Chrome调试工具Developer Tools——前端必备神器
今天要给大家介绍一个神器,就是谷歌浏览器(Chorme)自带的前端调试工具——Developer Tools.
在谷歌浏览器中,通过快键键F12就可以打开Devloper Tools:
Developer Tools
Develop Tools功能比较多,本文主要讲解比较常用的几个面板:Elements、Console、Sources和Network。
—— 1 ——
Element面板
之所以把这部分放在最前面,是因为这个功能是最为常用的。
元素面板就是用来查看网页的HTML元素的,使用方法看下图。
查看HTML元素
首先点击下左上角的按钮,然后我们只要把鼠标悬停在网页元素上,即可查看到对应的元素。
其中包括它的HTML标签与对应的属性,还有对应的样式与原型(包括盒子模型)。
然而,它能做的不仅仅如此,我甚至们可以任意的进行编辑,对HTML元素可以进行改动,对它的样式也是可以自由调整!
这就意味着,调整一个网页的样式可以实时的在chrome上进行微调,而不用每次修改后都要刷新资源后才能看效果。
这简直是太棒了,有木有?
-
Console面板
控制台面板与各种开发工具的控制台类似,主要是用于控制台信息输出。
遇到资源文件加载失败、网络请求失败等,或者一些提示信息,会打印到此处,像这样:
js加载失败
-
关于Console的其他用处
查看变量。直接在控制台中输入变量名(当然需要这个变量在作用域内),即可查看。
编写js。这就意味着我们可以自己定义变量、写函数,做个简单的网页脚本完全不成问题。例如,通过DOM来获取搜索关键字input这个元素:
查看变量
—— 3 ——
-
Sources面板
资源面板就是将浏览器加载当前页面时,所用到的资源文件的列表,它会按资源的URL来进行分类,如图所示:
查看资源
该面板最关键用处的就是可以调试js。我们可以找到对应的js文件,然后设置断点,进行调试。
在这里调试非常的方便,我们可以添加要观察的变量,它可以是在作用域内已定义的变量,也可以是通过DOM获取到的元素,或者通过各种方式得出的变量。
它可以清晰的展示出变量的所有属性、事件、以及原型链。
断点调试
例如,我们要观察某个已知id的input元素,我们可以在这里看到它的所有属性,以及它的事件与原型:
观察变量
—— 4 ——
-
Network面板
网络面板主要是将加载页面过程中,发送的网络请求(包括加载资源)按照时间线的形式呈现,能够看到请求状态,以及加载的时间等:
网络请求
我们可以查看每个请求的详细信息,包括请求的头部、返回值等(这个对于前后端联调DEBUG时非常有用):
请求详细信息
至此,大概把个人在试用Chrome调试工具比较常用的部分整理了一遍,希望本文能帮助到你了解Develop Tools。
相关文章
- 007_Chrome的Waterfall详解
- 谷歌测试安卓/Chrome OS混合系统“仙女座”
- 谷歌(Chrome)浏览器调试JavaScript小技巧
- 极客日报第86期:腾讯员工每年写3万行代码;马斯克承认利用摄像头监视车主;Chrome 89上线实时字幕
- 通过 Chrome devtools protocol 和 adb 调试 Android Webview
- Python:Selenium + Chrome添加认证代理
- Chrome资深粉热衷的10个必备扩展程序
- chrome浏览器web打印需要了解的几个小技巧
- 谷歌浏览器Chrome developer tool详细介绍
- Chrome inspect学习(三)Android端如何查看本地环境/测试环境下移动端内嵌H5页面在手机中真实渲染的DOM结构、CSS样式、接口调用
- Chrome开发者工具详解(二)之使用断点调试代码下
- Chrome开发者工具详解(一)之使用断点来调试代码上
- [涨姿势]Chrome 谷歌浏览器原生截长图命令
- 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
- Java Selenium(Chrome)载取滚动条网页长图的方法及示例代码
- .NET Core(C#) 操作selenium(Chrome)对网页截完整页面长图的方法及示例代码
- 删除Chrome地址栏记录中自动补全的网址
- chrome中jsonview的使用方法
- chrome 调试移动端H5