为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
小编推荐:Fundebug
专注于JavaScript
、微信小程序、微信小游戏,Node.js
和Java
线上bug
实时监控。真的是一个很好用的bug
监控服务,众多大佬公司都在使用。
谷歌开发者工具提供了一系列的功能来帮助开发者高效Debug
网页应用,让他们可以更快地查找和修复bug
。在谷歌的开发者工具中,有非常多有用的小工具,但是很多开发者并不知道。通过这篇文章,我把我常用的那些高效Debug
的Chrome
开发者工具的功能分享给大家。
简洁起见,接下来我会使用开发者工具来指代谷歌开发者工具。
在我们开始之前,你需要做一些准备工作。
使用金丝雀版
如果你想使用谷歌最新的版本和开发者工具,你可以下载金丝雀版本,甚至把它设置为开发默认打开的浏览器。金丝雀版本旨在为早期接受者提供最新的更新。它可能不稳定,但是大多数时候是没问题的。你要习惯去使用最新最强的谷歌浏览器。
1. 开启开发者工具的实验性功能
你可以到chrome://flags
页面,然后开启Developer Tools experiments
选项。
当开启后,在开发者工具的设置页面,可以发现多了一个Experiments
选项。如果我使用的一些功能你没有看到,那么请到Experiments
窗口打开。
2.超级实验性功能
如果我使用到的功能在Experiments
列表没有,那么它可能是一个WIP
功能(WIP
指working in progress
)。你可以这样开启:页面处在Experiments
界面,连续敲击shift
键6次来开启WIP
功能。
Console
当Debug的时候,我们绝大部分时间是在和Console
打交道。我们往往在代码中插入很多Console logs
,通过打印变量值来debug
。鉴于Console
对于我们这么重要,很有必要了解所有开发者工具提供的相关的APIs
和快捷键。
3. 总是打印对象
我的第一个建议其实和开发者工具没有关系,而是我一直使用的一个技巧。在使用console.log();
的时候,不仅仅打印变量,而是要打印对象,用大括号({})
将变量包围起来。这样的优点是不仅会把变量的值打印,同时还会将变量名打印出来。
4. 使用console.table
来打印多条目数据
如果你要打印的变量是一个数组,每一个元素都是一个对象。我建议你使用console.table
来打印,其表格化的呈现更加美观易读。
5. 给log加点颜色
log有时候变得非常多,包含你自己的、一些第三方扩展或者浏览器的logs
。除了使用过滤器(filter
)以外,你还可以使用颜色来更好地区分。
6. $ 和 $$
如果你在console
下没有任何库使用$
和$$
,那么你可以使用它们分别作为document.querySelector()
和 document.querySelectorAll()
的快捷键。
除了提供了一个更加快捷的方式外,还有一个好处,$$
返回一个数组,而不是array-like
的NodeList
. 所以你可以直接使用map
, reduce
和filter
函数。
你可以使用$$
检查页面中的无效链接:
Promise
.all(
$$('a')
.map(link => link.href)
.map(href => fetch(href))
)
.then(() => console.log('All links working'))
.catch(() => console.error('Some links are broken'));
7、$0
如果你想引用某个DOM
元素,使用$0
。$0
指向你当前在Element
中选中的元素。如果指定了$0
,$1
指向之前选中的元素。以此类推,直到$4
都可以使用。
8、 $_
$_
记录了最后一次在Console计算的表达式。
9、getEventListeners()
getEventListeners(domElement)
返回在DOM
元素上注册的所有的事件。请看下面的例子:
你也许注意到了,当我在console
里输入表达式的时候,其结果立即被计算出来了。你可以看到我并没有敲击Enter
键,而结果已经显示出来。这个是金丝雀版本的一个新功能,叫做”Eager Evaluation
”。
10、debug(fn)
在上面的例子中,如果你想在点击按钮后的执行过程中暂停,你可以使用debug
函数。debug(fn)
接收一个函数作为参数,当每次该函数被调用时,Debugger
就会在该函数的第一行中断执行。
想象一下你要debug
一个按钮的问题,但是你不知道这个按钮对应的事件函数在代码中什么位置。除了去大量的源代码中慢慢寻找之外,还有一个巧妙的方法。使用getEventListeners
函数,然后将debug
方法注入进去。这样,当你点击按钮的时候,就会在该函数的第一行停下来。
11、 copy(obj)
copy(anything)
是一个很有用的工具函数方便你将任何东西拷贝到系统的粘贴板暂存。
给copy
函数传入一个没有格式的JSON
,会返回格式化的结果:
12、 Top-level await
async/await
使得异步操作变得更加容易和可读。唯一的问题在于await
需要在async
函数中使用。如果我们要在DevTools
的控制台使用,需要一些特殊的处理,使用Immediately Invoked Async Function Expression (IIAFE)
. 一点都不方便。好在DevTools
已经支持直接使用await
了。
Debugging in the Sources panel
在source
面板,使用breakpoints
,stepping-into
, stepping-over
等方式,你可以很好地掌控程序的执行状态,来发现代码问题。接下里我不会介绍大家都知道的基础内容,而是一些我经常使用的建议和技巧。
13、 开启 auto-pretty print
在金丝雀版本的实验模式下,你可以开启自动美化代码模式。
14、 使用条件断点在生产环境中注入console logs
断点是一个很棒的功能。但还有一个更棒的:条件断点。只有当设定的条件满足的时候,中断才会执行。也就是说DevTools
并不会每次都中断程序的执行,而只是在你想要它中断的时候才中断。想了解更多:查看这里.
在生产环境下,因为不能修改源代码,我喜欢使用条件断点来注入console.log
。如果我的断点仅仅是一个console.log
,DevTools
不会中断,因为console.log
返回undefined
,,是一个false
的值。但是它会执行我注入的表达式,可以看到输出结果。
为什么不直接使用普通的断点,并且查看变量呢?有时候我并不想这样做。比如,当我在分析那些频繁执行的操作,例如触摸或则滑动。我并不想每一次都导致Debugger
触发程序中断,但是我想看到程序输出的结果。
15、 暂停UI
在Hover
状态下的展示结果
我们很难去检查一个只有在Hover
状态下展示的元素。比如,如何去检查一个tooltip
?如果你右键并选择检查,元素已经消失了。那么有办法吗?
我是这么操作的:
- 打开
sources
面板 - 显示
tooltip
- 使用快捷键来暂停脚本执行(将鼠标停留在暂停的图标上查看快捷键)
- 回到
Elements
面板,然后像通常一样去检查元素
16. XHR breakpoints
如果想要理解一个请求是如何执行的,可以使用sources
面板的XHR breakpoints
。
17. 使用DevTools
作为IDE
DevTools
的source
面板可以说相当强大。你可以快速查找,跳转到某一行,某个函数,执行一段代码,使用多行光标等等。这些功能在这篇medium文章中有详细描述。
既然如此,为啥不把整个开发都搬到这里呢。这样就不需要浪费时间切换IDE和浏览器了。
如果你有一个使用create-react-app
或则vue-cli
构建的项目,你可以直接把整个文件夹拖到Sources
面板下。DevTools
会自动对所有文件做映射。所以,你可以在DevTools
下修改文件并立即查看。这样,整个开发效率,特别是Debugging效率绝对提高了。
18. 使用network overrides
来简单调试生产代码
如果你正在Debugging
一个生产环境下面的bug,你可以使用network overrides
来调试,而不用在本地搭建整个配置。
你可以很容易将任何远程的资源下载一份本地的版本,然后可以在DevTools
下编辑,并且DevTools
会更新展示你编辑后的文件。
在生产环境下,也可以很容易Debugging
,并且做一些性能上的测试也变得容易。
19. Nodejs debugging
如果你想使用DevTools
的Debugger
来debug Node.js
应用,你可以使用--inspect-brk flag
来开启:
node --inspect-brk script.js
跳转到chrome://inspect
页面,在Remote Target
选项,可以看到Node
程序。
并且,在DevTools
中你会看到一个绿色的Node
图标,点击图标会打开针对Node
的Chrome Debugger
。
如果你想要用DevTools Debugger
来debug
你的单元测试,你需要这样调用:
node --inspect-brk ./node_modules/.bin/jest
不过这样做其实很麻烦,我们需要自己找到相应的路径。 GoogleChromeLabs
最近发布了一个新的工具非常好用,叫做:ndb
。使用ndb
,你只需要:
ndb npx jest
如果你有一个自定义的脚本,你可以这样调用:
ndb npm run unit
更妙的是,如果你在一个有配置package.json
的项目下调用ndb
,他甚至会自动分析package.json
中的脚本,方便你直接使用DevTools
。
20. 使用Snippets来辅助Debugging
DevTools提供了一个可以创建和保存小段代码的工具,我很喜欢用它们来加速我的工作。比如lodashify —
可以快速给任何应用添加lodash
。
(function () {
'use strict';
var element = document.createElement('script');
element.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
element.type = "text/javascript";
document.head.appendChild(element);
})();
另一个小的工具函数式用来增强对象的属性,每次被访问或则修改,它都会提供给我充分的信息,比如谁访问了,谁更改了它。在Debugging
的时候,非常有用。
const traceProperty = (object, property) => {
let value = object[property];
Object.defineProperty(object, property, {
get () {
console.trace(`${property} requested`);
return value;
},
set (newValue) {
console.trace(`setting ${property} to `, newValue);
value = newValue;
},
})
};
还有很多非常有用的devtools
代码片段,你可以直接拿去使用。
19 条评论
我太崇拜你了!
好专业,大神我的偶像
害羞……!
感谢大神分享
多谢支持,欢迎常来!
很不错的方法,感谢博客分享
多谢支持,欢迎常来!
很全面 多谢ヾ(≧∇≦*)ゝ
谢谢支持!
chrome的强大之处确实在于控制台调试前台及部分后端 ajaxjson的,感觉很多时候还是得用几个浏览器,因为一个未必能返回正确结果,在这点上倒觉得 ie11 或 edge控制台更强大,它相当严格,但却不如 chrome ff这般小巧灵活。
嗯,是的!Chrome还是最强大的!
好久没用chrome了,我记得很早之前用chrome plus,可以翻哟,你懂得
呵呵,Chrome并不是仅仅用来“翻”的,对于站长来说其强大的网页调试也是很赞的!
好吧,老实说这文章太太太难了。
很难吗?不至于吧?
对于谷歌浏览器我也就是用来浏览而已,偶尔用到检查功能,其他功能很少折腾。感觉你们用都是大师级别的,功能太多
呵呵,用好了其实帮助很大的!
虽然没有看懂,但还是要支持一下的!
谢谢支持!