chrome DevTool调试技巧
调试是代码开发、定位问题的重要手段。作为前端开发人员,学会利用Chrome开发者工具调试,快速定位问题,也是我们一项必备技能。
启动
- F12
- 右键–>检查
- 右上角设置->更多工具->开发者工具(有时候以上两种会被页面屏蔽)
基本布局
- 快速选择元素(ESC退出选择状态)
- 模拟设备分辨率
- 通过右上角三个点,调整布局位置
Element
该页签下是浏览器界面的元素情况。重点介绍一下右边的各个页签。
- Style
- 该页签显示了元素的所有样式(可以手动修改)
- 模拟元素状态(悬停、聚焦等等)查看样式
- 查看某个类样式
顾名思义,DOM断点,Chorme开发者工具支持我们监听元素移除、子树更新和属性更新三种断点。
打断点方式:Element选中元素–>右键–>Break on->选择断点。
Source
该页签下是页面请求的所有资源。
说明:
一个资源一旦被请求了,就会按照路径在这里显示。
比如请求一个图片,即使后台没有这份资源,该资源也会在这里显示,只是没有数据。
- 作用域空间
一个页面可能会划分不同的作用域,比如iframe、content-stript,注意要先选对作用域空间
- 快速查找文件: CTRL+P ->输入文件名
- 美化代码
有时候遇到被压缩过的代码,可以点击花括号来美化代码。
-
条件断点(较好用)
- 打断点大家都会,debug状态下,也给我们提供了很多信息:调用栈Call Stack(快速熟悉代码流程)、Scope、Breakpoints、Global Listeners等等。
- 有时候会根据需要打断点,比如循环到某个变量的时候才执行断点。这时候条件断点派上用场:右键蓝色断点–>Edit breakpoint–>输入JavaScript表达式(当表示式返回
true
的时候执行断点),条件断点显示为橙色注意:
- 关于JavaScript表达式的返回值,可以直接在控制台进行测试
console.log()
的返回值是undefined
,结合条件断点,可以用来快速打印日志- 使用IIFE立即执行函数可以巧妙地修改变量进行测试
在调试的时候,有时候会进入我们无需关注的三方件源码,此时blackbox script就派上用场了。简单地说,黑箱脚本就是在调试时可以直接绕过的脚本(脚本内的断点也会被跳过哦)。设置也比较简单,右键脚本–>Blackbox script即可。
以上是个人在使用Chrome DevTool中的一些分享,如果错误,欢迎指正~
另外有其他技巧,欢迎补充~