weixin_34037173
weixin_34037173

那些不需要你知道的Chrome DevTool - 使用技巧篇

前提

默认读者已经具备了基本的Chrome DevTools 的知识，即了解Chrome开发者工具中每一个面板的基本用法。

如果尚未了解，请自助查看同事写的基本介绍。

当然，你也可以选择继续往下读。

快捷键

常用几个面板的快捷键如下：

  1. Elements Panel Command+Option+C (Mac) 或 Control+Shift+C (Windows, Linux, Chrome OS).

  2. Console Panel

    Command+Option+J (Mac) 或 Control+Shift+J (Windows, Linux, Chrome OS)

  3. 打开上一次停留的面板

    Command+Option+I (Mac) 或 Control+Shift+I(Windows, Linux, Chrome OS)

  4. 调用命令菜单栏

    Command+Shift+P(Mac)或Control+Shift+P(Windows, Linux, Chrome OS)

对于剩下 DevTools 所有的快捷键，请自行查看。

Elements Panel

  1. 如何快速定位一个元素，并出现在视窗中？

    可以再面板中进行搜索Command+F，元素主面板会唤起一个搜索条，搜索条中可以输入 CSS 选择器进行过滤，找到对应元素后，右键点击scroll to view，便可以再视窗中查看到该元素。

  2. 如何定位元素上绑定的事件？

    定位到了目标元素，然后元素面板中的幅面版切换至 Event Listeners，点开事件查看函数配置，选中 handler 右键点击 Show Function Definition，DevTools会自动跳转Source面板对应函数申明的地方。

  3. 如何监听一个DOM节点变化，是由那部分的JavaScript脚本控制的？

    在 Elements Panel 中选中目标的元素节点，然后右键查看 Break on ，查看不同的监听方式

    • Subtree modifications

      当选中节点的子节点发生变化(添加、移除、内容改变)都会触发，但是子节点属性变化以及选中节点任何变化都不会触发。

    • Atrribute modifications

      当选中节点属性变化(添加、移除、属性值变更)都会触发。

    • node removal

      当选中节点被移除时候触发。

  4. 如何页面的accessibility？从元素是否正确标记角度。

点击Elements Panel 右侧的 Accessibility Tab，你可以查看整个页面中的Accessibility Tree，该 Tree 是DOM tree 的子集，对应节点是由对屏幕阅读器（screen reader）有关和有用的展示内容。

可以查看每个节点的ARIA Attributes，该属性是确保屏幕阅读器(screen reader)如何从Accessibility Tree以合适的方式展示页面内容。

为什么要提高页面的accessibility，这项性能呢？

Web Accessibility is a way to make everyone including the disabled to have access to the web and internet in whole.

Web accessibility means that people with disabilities can use the Web

from Why Web Accessibility Is Important and How You Can Accomplish It

就是为了让每一个人都能获得访问网站的权利。

那如何审查自己的网站accessibility的状况呢？

  1. 可以安装axe查看进行审查，该插件还会给出对应的解决方案，以及可以帮助你快速定位问题元素在 Elements Panel 的位置

  2. 使用 Audits Panel 只勾选 Accessibility 选项，然后进行审查，会有对应的报告给出然后结合经验进行修复。

  3. 如何查看页面中 CSS 和 JavaScript 使用情况？

    解释「使用情况」，最理想的情况页面中使用到的 CSS 和 JavaScript 每一行都被页面使用到，但保不齐开发途中我们忘记剔除无用的代码？

    使用「快捷键」中调用命令菜单栏的命令，输入「show coverage」，便可以查看 Coverage 面板。点击面板中的刷新按钮，最后便可以得到页面中 CSS 和 JavaScript 使用情况。注：此时的表示的使用率情况是页面加载的使用率。如果想获得更全的使用率情况请点击Recording 按钮进行操作。

    双击点击任意 CSS 和 JavaScript 脚本，会自动调整到自动格式化好的 Sources Panel 中左侧会出现红绿标记，前者表示该行在页面中尚未使用，后者便是改行在页面中被使用。

  4. 如何展开所有的元素节点 ？

    选中父级节点，右键选中「Expand recursively」，Elements Panel 会将所有子节点展开，方便导航。当然对应的快捷键是 Option + click(Mac) 或 control + alt + click (Windows, Linux, Chrome OS)

Console Panel

首先 console 面板大家主要工作都是在这边查看更多代码中的日记，而console下有许多好用的API，这些 API 可以帮助你在诸多的 log 中以不同形式的方式查看，但这里边步一一赘述API了，自助查看官网。

感兴趣的可以查看一篇文章：Getting creative with the Console API! 中文翻译

但是笔者钟爱time/timelog/timeEnd，这些 API 可以帮助你的代码快速粗糙的性能测试。

  1. 如何从不同类型的 log 中过滤如何自定义条件的log ？

    存在历史遗留问题的项目中，会在 console 面板看到各处（代码中/浏览器）留下的 log 。为了过滤出自己想看到的log，你可以根据console panel 中的 Filter 进行过滤。

    Filter 会有一些智能的提示关键词：

    • url: 查看对应脚本的log或是不同网址或是插件中的log。
    • source: 可以根据产生log的来源来过滤。
    • context: 可以根据不同的上下文，因为如果内嵌