• 玩转chrome的调试神器,Chrome 调试工具技巧

    发布于2019-02-21
  • 我就提几个简单的东西:

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

    store as global variable
    现代框架代码调试神器了,不过应该很多人都知道。

    inspector-stylesheet
    仔细注意下会发现,通过 + 号写的 css 属于 inspector-stylesheet。
    实际上很有好处,别自己在原有的 class 上进行修改,这样你会分不清楚你到底修改了什么 css,也别添加内联样式,需要添加的 css 全部用 + 号自己多一个规则。

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

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

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

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

    filesystem
    其实就是 chrome 内置的一个 workspace 功能,一个简单的编辑器,但是对于这种功能我只能感觉在现有体系下很多时候并用不上。更何况连 emmet 语法都不支持,就显得更鸡肋了。
    同时一起的还有 override 和 snippets,override 是覆盖当前请求静态资源,看这个意思实际上线上调试作用应该会体现,而 snippets,我感觉我做个代码收藏夹还不错。

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