谷歌f12能看到php代码吗,谷歌浏览器F12基本用法
第一步:打开你想进行调试的页面,并按F12进入到调试模式
此处以百度页面为例进行功能展示
这是关于最右侧“元素选择器”的功能展示
关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小,
elements:点击这个功能后出现的是当前页面的html文件,在你想实时修改的那个元素处双击,可以暂时修改,不过并没有同步到后台,这个功能通常和第一个功能元素选择器搭配使用
console:控制台,用来打印错误信息和你在后台写的console.log("显示信息")
network:网络功能,用于查看相关的ajax请求,详情请看图片(顺序:从左到右,从上到下)
Network详细介绍
那我就按照从左到右的顺序来写啦~
记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)
捕获截屏 记录页面加载过程中一些时间点的页面渲染情况,截图根据可视窗口截取,如下图所示。
过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。
指定条件有哪些?
domain:资源所在的域,即url中的域名部分。如 domain:api.github.com
has-response-header:资源是否存在响应头,无论其值是什么。如 has-response-header:Access-Control-Allow-Origin
is:当前时间点在执行的请求。当前可用值:running
larger-than:显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K
method:使用何种HTTP请求方式。如 GET
mime-type:也写作content-type,是资源类型的标识符。如 text/html
scheme:协议规定。如 HTTPS
set-cookie-name:服务器设置的cookies名称
set-cookie-value:服务器设置的cookies的值
set-cookie-domain:服务器设置的cookies的域
status-code:HTTP响应头的状态码
显示详细信息
显示时间流
是否保留日志
当选择保留日志,重新加载url当前界面时,之前请求显示的资源信息,会保留下来,不会清空的哟~
是否进行缓存
当打开开发者工具时生效,打开这个开关,则页面资源不会存入缓存,可以从Status栏的状态码看文件请求状态。
设置模拟限速,如下图所示。
设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。
Network主题内容介绍
下列介绍中,前者为名词解释,后者为举例
Name/Pat:资源名称以及URL路径 (main.css)
Method:Http请求方法 (GET或者POST)
status/Text:Http状态码/文字解释 (200,ok)
Type :请求资源的MIME类型,MIME是Multipurpose Internet Mail Extensions (html,css,js等)
Initiator:解释请求是怎么发起的,有四种可能的值
1.Parser :请求是由页面的html解析时发送
2.Redirect:请求是由页面重定向发送
3.script :请求是由script脚本处理发送
4.other :请求是由其他过程发送的,比如页面里的Link链接点击
size/content:size是响应头部和响应体结合的大小,content是请求解码后的大小
请求文件具体说明
点击某个具体请求后的界面,如下图所示:
一共分为四个模块:
Headers
Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview:预览面板,用于资源的预览。
Response:响应信息面板包含资源还未进行格式处理的内容
Timing:资源请求的详细信息花费时间
谷歌f12能看到php代码吗,谷歌浏览器F12基本用法相关推荐
- 谷歌浏览器F12开发者工具格式化js代码
谷歌浏览器F12开发者工具调试代码时,查看js文件都是非格式化存储的,不能直观显示. 在最底部的工具栏有一个" { } " 样的图标, 点一下就格式化了.
- 谷歌浏览器F12(开发者工具) -----功能介绍
测试调试时使用最多的功能页面是:元素(ELements).控制台(Console).源代码(Sources).网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.C ...
- html禁止f12键代码,网站禁用f12 禁止调试代码方法
正常情况下 自己的一些网站的一些代码不想被别人扒来扒去的,可以看看本方法. 可以设置复制提示,禁f12,禁止调试是很有必要的 当然这个防不了大佬,只能防防小学生 具体方法: 1.首先我们需要下载web ...
- 联想电脑谷歌浏览器f12无法唤起开发者工具
联想电脑谷歌浏览器F12键无法唤起开发者工具 刚入职新的公司,接手了上一个离职员工的台式联想电脑,键盘有一个键是坏的.使用谷歌浏览器调试页面时,按F12唤起开发者工具时灵时不灵.我认为是键盘的问题,遂 ...
- 谷歌浏览器 F12或右键检查 开发者工具DevTool打开慢问题
谷歌浏览器 F12或右键检查 开发者工具DevTool打开慢问题 原因: 最近Chrome更新后提示是否将DevTool语言设为中文,设为中文后感觉不适应,又切回英文,但是有个UK.US英文,选了个U ...
- 谷歌浏览器F12抓包如何过滤只显示接口请求不显示图片、js那些请求
谷歌浏览器F12抓包如何过滤只显示接口请求不显示图片.js那些请求
- 用IE点击html页面用谷歌打开,如何在电脑中使用谷歌浏览器打开不兼容的网页
有不少用户选择在电脑系统中使用谷歌Chrome浏览器,但有时候会在谷歌浏览器中打开某个网页时,提示不兼容,无法正常显示网页内容.在这样的情况下,我们可以通过下载插件来帮助我们在谷歌浏览器中打开不兼容的 ...
- 翻译谷歌浏览器F12的功能
翻译谷歌浏览器F12的功能-2020-3-15 devtools.pdf下载地址: https://www.com/iaaqmkd 谷歌浏览器F12 设置 1.Elements 2.Console 3 ...
- 腾讯QQ、淘宝旺旺、微软MSN、谷歌Gtalk 在线客服代码
腾讯QQ.淘宝旺旺.微软MSN.谷歌Gtalk 在线客服代码 腾讯QQ在线客服代码的生成 访问: http://imis.qq.com/webpresence/code.shtml 选择在线状态图片风 ...
- 前端工程师必备谷歌浏览器F12下的调试知识点
chrome浏览器版本(所有的操作都是基于我电脑上目前这个版本.) 进入开发者工具的方式:F12 (所有浏览器都可以用F12进入开发者工具),ChromeDev(开发者工具简称)按照类别可以分为下面几 ...
最新文章
- 流程快速开发平台,工作流引擎中间件,工作质量考核设计
- 科研人专属微信红包封面免费送!速领
- 第八周实践项目4 字符串加密
- Redmine环境搭建
- Android代码数字证书,有关Android中读取证书
- gem for onenote安装教程
- 个人开发—进度记录(二)
- 计算两个经纬度之间的距离
- 十行代码训练sklearn七种分类算法
- 国外的大龄程序员在干什么?
- 深交所与庄家6次过招 中集认沽走下神坛幕后
- chemdraw如何改中文_教你如何快速自定义ChemDraw默认设置
- ESlint语法检测工具
- [BZOJ2742/Luogu4598][HEOI2012]Akai的数学作业
- 计算机excel按F4是那个公式,功能键F4你真的会用?Excel四大F4快捷操作,轻松解决工作中问题...
- 左神算法中级班第三课[C++代码]
- 登录后跳转又提示未登录
- 日语学习之——五十音图及相应单词(1)
- 冬战柴达木的压裂“将士”
- selenium:定位一闪而过的弹窗