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

2019-01-24 16:28:26 +08:00
 wly19960911

你不知道的 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 官方文档

3382 次点击
所在节点    JavaScript
2 条回复
wly19960911
2019-01-24 20:59:42 +08:00
哇,都没人回复的,只有几个收藏
as94boy
2019-01-28 16:15:02 +08:00
都去点链接了,还有的人先收藏再说。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/530276

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX