美文网首页
chrom常用调试技巧

chrom常用调试技巧

作者: Small_Song | 来源:发表于2021-04-27 14:26 被阅读0次

    1.截屏的新姿势

    当你只想对一个特别的 DOM 节点进行截图时,你可能需要使用其他工具弄半天,但现在你直接选中那个节点,打开 Command 菜单并且使用 节点截图 的就可以了。

    不只是这样,你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意,这里说的是全屏,并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情!

    2. Snippets - 代码块的使用

    我经常使用 JavaScript 作为我的自动化工具,来处理第三方网站和应用程序:

    比方说,我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium 没有提供这样的总数,所以我把这个小脚本组合在一起:

     ?('td:last-child .sortableTable-number')
        .map(el => parseInt(el.innerText))
        .reduce((total, value) => total + value);
    
    

    当我打开状态页并且输入这段脚本到 Console 面板的时候,它将会返回这个数值:

    [图片上传失败...(image-e63a2b-1619062687910)]

    <figcaption style="display: block;"></figcaption>

    现在看来,即使这个脚本并没有花费我太多的精力来编写,但也只是偶尔运行一下,所以对于我来说,记住一段这样的脚本会很麻烦:

    那怎么解决这个问题呢?

    这就是 Snippets 的用武之地:它允许你存放 JavaScript 代码到 DevTools 中,方便你复用这些 JavaScript 代码块:

    进入到 Sources 面板,在导航栏里选中 Snippets 这栏,点击 New snippet(新建一个代码块) ,然后输入你的代码之后保存,大功告成!现在你可以通过右击菜单或者快捷键: [ctrl] + [enter] 来运行它了:

    3. $ 和 ?

    如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话,它在 console 中就是对这一大串函数 document.querySelector 的别名。

    如果是 ? 就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll 并且它返回的是:一个节点的 数组 ,而不是一个 Node list

    本质上来说 Array.from(document.querySelectorAll('div')) === ?('div') ,但是document.querySelectorAll('div')?('div') 哪一种方式更加优雅呢?

    4. console篇 - 异步的 console

    如今,越来越多与浏览器有关的 API 都是 基于 Promise 。当你使用 promise 的时候通常配套用 .then(处理方法) 或者 将 promise 包裹在 async 方法中,再使用 await 来接收结果。
    我们在 JavaScript/TypeScript 中大量使用的东西,但如果在 Console 中书写这样的结构很不方便。

    像下面这样


    或者这样

    这样太难用了!不是输入之前就被触发了,就是括号漏写了...

    但如果 console 默认就被 async 包裹呢?

    你猜怎么着,还真是这样!你可以直接使用 await


    事实上,在 Console 中使用 promise 比在源码中使用起来还要简单!

    5. Request initiator 显示了调用堆栈信息

    initiator 可以翻译为 启动器,但是太过生硬,大家理解意思就好。

    Network 面板中的 initiator 这一列显明了是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步。但如果你用的是,例如:一个本地化的 fetch API, 那它将会指向一些低层级的类库的代码 - 例如 当我们在 Angular 配合使用 Axios 或者 zone.js 的时候,这时指向的是 xhr.js

    除了这些外部库之外,如果你希望查看代码的哪一部分触发了请求。 将鼠标悬停在显示的 initiator(例如 外部库)上,你将看到完整的调用堆栈,包括你的文件:

    6. 重新发送 XHR 的请求

    如何重新发送 XHR 的请求?刷新页面?太老套了,试试这么做:

    7. XHR/fetch 断点

    在某一特定时刻,你想要对已发送的 “ajax” 请求进行捕获怎么做呢? 可以使用 XHR/fetch breakpoint

    这些只能在 Source 面板中设置。(我也同样希望可以直接在 Network 面板中设置,但事实并非如此)

    你可以添加部分 URL 作为触发器或监听任何请求:

    .png

    8. 通过 'h' 来隐藏元素

    按一下 'h' 就可以隐藏你在元素面板中选择的元素。再次按下 'h' 可以使它出现。某些的时候这很有用:例如你想截图,但你想去掉里面的敏感信息。

    image

    9. 在元素面板中展开所有的子节点

    一个一个的去点击级联的 按钮太慢了,不如使用右击节点后的 expand recursively 命令:

    相关文章

      网友评论

          本文标题:chrom常用调试技巧

          本文链接:https://www.haomeiwen.com/subject/lwmxrltx.html