首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

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

  •  
  •   wly19960911 · 90 天前 · 721 次点击
    这是一个创建于 90 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    2 回复  |  直到 2019-01-28 16:15:02 +08:00
        1
    wly19960911   90 天前
    哇,都没人回复的,只有几个收藏
        2
    as94boy   86 天前
    都去点链接了,还有的人先收藏再说。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1633 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 17ms · UTC 16:51 · PVG 00:51 · LAX 09:51 · JFK 12:51
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1