在前端开发调试中,我们最经常用的就是Chrome DevTools了。之前在看《现代前端技术解析》这本书的时候,里面提到了这么一句话。
在Chrome浏览器中, 用F12打开控制台后,一名优秀的前端工程师需要尽量保证自己对里面95%以上的操作和内容都很熟悉, 这样才可以说是基本运用自如。
95%这个数值感觉有点高了,不过还是说明了调试工具使用的重要性。所以我抽空把DevTools里面的Document给阅读了一遍,加强了一下自己的调试能力。
HTML、CSS
- Alt + Click 展开html所有节点
有时html的节点比较多,除了直接检查(Ctrl + Shift + C)页面元素来定位,还可以通过Alt + Click来展开。
- Styles和Computed标签栏中Filter要用起来
-
改变CSS值的快捷键
Alt+Up
+ 0.1Up
+ 1Shift+Up
+ 10Ctrl+Up
+ 100
-
Style栏中,
.cls
可以添加新的类名,也可以切换
这边想到了之前直接调试加类名改变样式的情况,都是在左边的DOM节点那边直接编辑、删除,现在想想太蠢了。
- 更多操作工具条
添加颜色和阴影时可以用到
- 颜色选择
吸管工具可以获取页面上的颜色,如果你想获取网页上的颜色又没安装chrome插件的话,可以试试这个方法
JavaScript
- 可以直接在 DevTools UI 内编辑 JavaScript 代码, Ctrl+S保存更改
这个方法一般只能改会重复执行的代码,只执行一次的改了话刷新的话又恢复到原来的代码。
- 用断点暂停代码
断点类型 | 使用场景 |
---|---|
行断点 | 特定区域的代码 |
条件行断点 | 特定区域的代码,但是只在某些条件下 |
DOM | 改变、移除元素时,或者删除子节点 |
XHR | URL包含某个字符串 |
事件监听 | 在事件执行后触发 |
异常 | 抛出的异常或者未抛出的异常 |
函数 | 某个特定函数执行时 debug(fn) |
下面具体介绍你可能没用到断点方法:
条件行断点:在左边行号区域右键, 选择 Add conditional breakpoint.
DOM改变断点:
XHR断点: 请求包含某个字符串时,会在XHR请求的地方断点。
事件监听断点:事件触发后产生断点
函数断点:
function sum(a, b) {
let result = a + b; // DevTools pauses on this line.
return result;
}
debug(sum); // Pass the function object, not a string.
sum();
- 调试中忽略一些代码
- 打开文件,右键选择Blackbox script
- 从执行栈中,右键操作
调试中如果能保证第三方库没问题,调试就可以直接忽略文件,步进步出的时候就快一些。
- 格式化压缩文件
Log
- $()是document.querySelector()
在控制台中像jquery一样快速查找元素
-
$0 返回最近一次选择的元素或 JavaScript 对象
-
console.table() 以表格形式输出,常用与打印后端返回的列表值
-
console.dir() 可以显示一个对象所有的属性和方法。
这个一般用来输出DOM元素或者对象,还有一个技巧就是可以打印原生对象的属性和方法console.dir(Number)
-
keys(object) 获取对象的所以key值
-
console.group() console.groupEnd() console.groupCollapsed() 信息按组输出在控制台
-
console.count() 函数调用次数
-
console.time() 和 console.timeEnd() 跟踪代码执行点之间经过的时间。
-
getEventListeners(document) 获取document元素上的所以事件监听
总结
调试工具中还有分析运行性能、分析网络状况、分析内存情况,这些实践性比较强一些,最好还是自己去看下文档,在找工作中一些项目练习一下。
其实,你可能看完了官方文档,但是平时调试还是和往常一下用以前的方法,所以还在需要在调试中多想想有没有更好的调试方法,当然前提是你接触过这些方法。