Chrome浏览器开发者工具使用开发详解
文章目录
- 1.如何调出开发者工具
- 2.开发者工具初步介绍
- 2.1元素(Elements)
- 2.2控制台(Console)
- 2.3源代码(Source)
- 2.4Network详细介绍
- 3.Network主题内容介绍
- 4.请求文件具体说明
- 5.细节补充
1.如何调出开发者工具
- 按F12调出
- 右键检查(或快捷键Ctrl+Shift+i)调出
2.开发者工具初步介绍
chrome开发者工具最常用的四个功能模块:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)。
元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改,即时显示。大大方便了开发者调试页面
控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~
源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
2.1元素(Elements)
查看元素的代码:点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置
查看元素的属性:定位到元素的源代码之后,可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。
当然从源代码中读到的只是一部分显式声明的属性,要查看该元素的所有属性,可以在右边的侧栏中查看:
修改元素的代码与属性:点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:包括编辑元素代码(Edit as HTML)、修改属性(Add attribute、Edit attribute)等。选择Edit as HTML选项时,元素进入编辑模式,可以对元素的代码进行任意的修改。当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
查看元素的CSS属性:在元素的右边栏中的styles页面可以查看该元素的CSS属性,这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件,使编码调试时修改代码变得非常方便。
在Styles页旁边,有一个Computed页面,这个页面展示该元素经过计算之后的所有CSS属性,即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行,是浏览器渲染页面的一个必不可少的过程。
修改元素的CSS属性:在元素的Styles页面,可以对元素的CSS属性进行修改,甚至删除原有、添加新属性。不过,这些修改,仅对当前浏览器的页面展示生效,不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。
给元素添加断点:在元素的右键菜单中选择断点选项(Break on…),选中之后,当元素被修改(通常是被JS代码修改)时,页面加载会暂停,然后可以查看该元素的属性。
元素断点添加之后,可以在右侧栏的DOM Breakpoints页面中看到,这个页面可以看到当前网页的所有元素断点。
查看元素的监听事件:元素的右边栏的Event Listener页面,可以查看到该元素的所有监听事件。在开发中,尤其是维护其他人的代码时,会出现不了解元素对应的监听事件,这个时候,可以在这个页面中找到。这个页面不仅能看到对应的事件函数,还可以定位该函数所在的JS文件以及在该文件中的具体位置(行数),大大提高开发维护的效率。
2.2控制台(Console)
查看JS对象的及其属性:
执行JS语句:
查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉
2.3源代码(Source)
查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。
添加断点:在源代码左边有行号,点击对应行的行号,就好给改行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。
中断调试:添加断点后,当JS代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量的
也可以在右边的侧栏上查看:
在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。
2.4Network详细介绍
那我就按照从左到右的顺序来写啦~
记录按钮 处于打开状态时会在此面板进行网络连接的信息记录,关闭后则不会记录。
清除按钮 清除当前的网络连接记录信息。(点击一下就能清空)
过滤器 能够自定义筛选条件,找到自己想要资源信息,如下图所示。
也可以是一些指定条件
指定条件有哪些?
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栏的状态码看文件请求状态。
设置模拟限速,如下图所示。
设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。
3.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是请求解码后的大小
4.请求文件具体说明
点击某个具体请求后的界面,如下图所示:
一共分为四个模块:
- Headers
Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
Preview:预览面板,用于资源的预览。
Response:响应信息面板包含资源还未进行格式处理的内容
- Timing:资源请求的详细信息花费时间
5.细节补充
对某请求右键,出现页面如下图所示。
Copy Request Headers:复制HTTP请求头到系统剪贴板
Copy Response Headers:复制HTTP响应头到系统剪贴板
Copy Response:复制HTTP响应内容到系统剪贴板
Copy as
cURL:将网络请求作为一个curl的命令字符复制到系统剪贴板(curl是一种开源的命令行工具和库,用于配合url语法进行数据传输)
Copy All as HAR:将网络请求记录信息以HAR格式复制到系统剪贴板(what is HAR file)
Save as HAR with Content:将资源的所有的网络信息保存到HAR文件中(.har文件)
Clear Browser Cache:清除浏览器缓存
Clear Browser Cookies:清除浏览器cookies
Open in Sources Panel:当前选中资源在Sources面板打开
Open Link in New Tab:在新tab打开资源链接
Copy Link Address:复制资源url到系统剪贴板
Chrome浏览器开发者工具使用开发详解相关推荐
- 谷歌浏览器开发者工具的快捷键详解
谷歌浏览器开发者工具的快捷键详解 孔子说:工欲善其事,必先利其器. 老子说:孔子说的对. 针对前端开发人员,谷歌浏览器的好处自然不言而喻,其强大的调试工具更是提供了很多便利,现将开发工具常用的快捷键整 ...
- 谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主 ...
- 浏览器开发者工具修改html后执行,谷歌Chrome浏览器开发者工具教程—JS调试篇
上一篇咱们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是最经常使用到的Chrome功能面板,也是解决通常问题 ...
- 谷歌 chrome 浏览器开发者工具打不开的解决方法
谷歌 chrome 浏览器开发者工具打不开的解决方法 参考文章: (1)谷歌 chrome 浏览器开发者工具打不开的解决方法 (2)https://www.cnblogs.com/youding/p/ ...
- chrome浏览器开发者工具F12中某网站的sources下的源码如何批量保存?
目录 chrome浏览器 开发者工具F12中某网站的sources下的源码如何批量保存 1. 常用保存Sources源码的两种方法 1.1单个文件 1.2 单个页面 2. 问题 3.解决方案 chro ...
- Chrome浏览器 开发者工具中的 Performance
目录 ■Chrome浏览器 开发者工具中的 Performance ■画面 ■代码 (2009年前后,大学时期写的代码.) ■工作中的使用 (两个系统同时运行) --- ■Chrome浏览器 开发者工 ...
- 谷歌Chrome浏览器开发者工具教程—基础功能篇
Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用.下载吧小编为大家带来Chrome开发者工具基础 ...
- Chrome浏览器开发者工具介绍;(包括,Network面板介绍,XHR等等)
为什么写了这篇博客: (1)原因一 在[OA系统二十三:请假审批四]这篇博客中,加载[请假审批这个内嵌页面]后,这个内嵌页面中需要显示[待审批请假数据]的列表数据,而这些列表数据,是通过ajax请求从 ...
- 谷歌浏览器开发者工具的使用详解
一.基础功能篇 1. elements 在elements中主要分为两大块: A:HTML结构面板 B:操作dom样式.结构.事件的显示面板 (1)点击箭头选中一个元素,可以在HTML面板中定位到该元 ...
最新文章
- 12)登录验证函数简单编写验证
- linux shell脚本 wget,bash – 在shell脚本中运行wget和其他命令
- 华为抢购助手_华为MateBook 13轻薄本:出差者的首选,学生党的福音
- AtomicIntegerArray类详解
- 启动项目后,FileItemFactory 错误
- 软工网络15个人阅读作业2——提问题
- 备份恢复与同步(数据搬运专家)
- 优秀的硕博士们,他们的朋友圈都有什么特点?
- 玩转lib-notify (转自PT牛的博客)
- 四:客服端防护HTTP发送请求类
- iphone three20 保存本地的图片
- Partition List,拆分链表
- nvme固件升级 linux,Intel NVME SSD 固件升级步骤
- 终端字符乱码解决方法
- 武汉大学计算机学院 毕业答辩,【2017年整理】毕业与答辩ppt模板武汉大学.ppt
- python转化excel数字日期为标准日期
- 通信领域的宽带信号和窄带信号到底是什么??
- sql可以查询数据但是提示对象名无效
- 微信开方平台微信管理员重置
- 刺沙冰雪高爆版辅助多开方案
热门文章
- 语音识别研究综述——阅读笔记3(端到端语音识别、语音识别的难度与热点)
- 王者荣耀为何如此受欢迎
- 误码率BER计算原理及仿真输出
- uboot下phy的工作
- 【Sass】437- 一文详解Sass新特性 - 模块
- The Art of Deception----CH Edition
- Lab: User ID controlled by request parameter with data leakage in redirect:由请求参数控制的用户 ID,重定向数据泄漏...
- EMINEM 50Cent Jayz linkin park
- 一人改代码搞崩推特,马斯克气疯:全部重写!
- 计算机控制讲的是什么意思啊,计算机控制_计算机控制是什么