一些Chrome DevTools使用技巧

3,073 阅读3分钟

在前端开发调试中,我们最经常用的就是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.1
    • Up + 1
    • Shift+Up + 10
    • Ctrl+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元素上的所以事件监听

总结

调试工具中还有分析运行性能、分析网络状况、分析内存情况,这些实践性比较强一些,最好还是自己去看下文档,在找工作中一些项目练习一下。

其实,你可能看完了官方文档,但是平时调试还是和往常一下用以前的方法,所以还在需要在调试中多想想有没有更好的调试方法,当然前提是你接触过这些方法。