推荐译文：《你不知道的 Chrome 调试工具技巧》

你不知道的 Chrome 调试工具技巧 （来自掘金）

了解了下，实际上 chrome 调试工具有相当的功能让我们使用，尽管我在里面发现很多没有用的（并非没用，而是在框架体系下无法使用。）

我就提几个简单的东西：

1. dom break

   上古时期 jQuery 代码调试神器，修改旧代码通过这个已经救了好几次了。

2. store as global variable

   现代框架代码调试神器了，不过应该很多人都知道。

3. inspector-stylesheet

   仔细注意下会发现，通过 + 号写的 css 属于 inspector-stylesheet。

   实际上很有好处，别自己在原有的 class 上进行修改，这样你会分不清楚你到底修改了什么 css，也别添加内联样式，需要添加的 css 全部用 + 号自己多一个规则。

   最后所有的修改都会总结进入 inspector-stylesheet，这样我们就能最简单把所有的改动获取到。

4. conditional-breakpoint (条件断点)

   条件断点不仅是一个简单条件断点，实际上是执行一组表达式然后返回值等于 true 的时候才断点，就包括修改值和打印都能做到，不侵入代码的实现。

   至于还有更多的异常断点不知道的可以关注下，可惜没有针对类型抛出错误进行 debuger 的断点方式，但是我们至少能使用 black-box script 功能屏蔽来自框架底层和包所报的错误。

5. Coverage

   我也是今天才注意到这个功能的，有关于覆盖率的提示，虽然运行的时候不会提示 sourcemap 下的代码，但是实际上你打开 sourcemap 的时候，你会发现也会对覆盖率进行提示。

6. filesystem

   其实就是 chrome 内置的一个 workspace 功能，一个简单的编辑器，但是对于这种功能我只能感觉在现有体系下很多时候并用不上。更何况连 emmet 语法都不支持，就显得更鸡肋了。

   同时一起的还有 override 和 snippets，override 是覆盖当前请求静态资源，看这个意思实际上线上调试作用应该会体现，而 snippets，我感觉我做个代码收藏夹还不错。

我只是简单举例几个用用，实际上还有很多功能可以使用，多翻翻总有自己没看过的，另外每次打开 dev tools 的 drawer 会有个 what's new，我看了下内容，可以关注下，里面提到了很多新的功能加入。比如 Store DOM nodes as global variables 就是在 chrome 71 里面加入的功能。

chrome dev tools 官方文档