Google实用调试方法

  • 按Cmd + Shift + P（如果使用Windows，则按Ctrl + Shift + P）打开“命令”菜单。

  • Dom元素截图，第一步打开命令输入Screenshot Capture node screenshot,全屏截图Screenshot Capture full size screenshot

  • 在控制台使用上一次操作返回值$_

  • 重新发起xhr请求

    ​ 在平时和后端联调时，我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求，我们往往都是通过刷新页面、点击按钮等方式去触发xhr请求，这种方式有时显得会比较麻烦，我们可以通过google提供的Replay XHR的方式去发起一条新的请求，这样对于我们开发效率的提升是有所帮助的。

  • 测试一个DOM节点文字太长时，样式是否会混乱

    在控制台输入document.body.contentEditable=”true”或者document.designMode = ‘on’就可以实现对网页的编辑了。

  • 网络面板（Network**）的幻灯片模式**

    启动Network 面板下的Capture screenshots就可以在页面加载时捕捉屏幕截图。

  • 动画检查

    DevTools 中有一个动画面板，默认情况下它是关闭的，很多人可能不太清楚这个功能。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。要打开该面板，可以在 DevTools 右上角菜单 → More tools 中打开 Animations 。


    默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。

    然后，我们可以通过使用鼠标拖动或调整时间轴来修改该动画。

  • 递增/递减 CSS 属性值

    • 增量0.1 * Mac： Option +向上和Option +向下 / Windows： Alt +向上和Alt +向下

    • 增量1 * Mac：向上+向下 / Windows：向上+向下

    • 增量10 * Mac：⇧+向上和⇧+向下 / Windows：⇧+向上和⇧+向下

    • 递增100 * Mac： ⌘+向上和⌘+向下 / Windows： Ctrl +向上和Ctrl +向下

  • 在低端设备和弱网情况下进行测试

    具体打开方式是：在Chrome DevTools中通过CMD/Ctrl + Shift + p打开命令菜单。然后输入Show Performance打开性能面板。

  • copying & saving

    • 可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源

    • 如果在console中打印了一堆数据，想对这堆数据做额外的操作，可以将它存储为一个全局变量。只需要右击它，并选择 “Store as global variable”选项。

  • CSS/JS 覆盖率

    • 打开调试面板，用快捷键 shift+command+P （mac）输入 Show Coverage调出相应面板

    • 点击reload 按钮开始检测

    • 点击相应文件即可查看具体的覆盖情况（绿色的为用到的代码，红色表示没有用到的代码）

  • 自定义代码片段Snippets

    在 Sources 这个tab栏下，有个 Snippets 标签，在里面可以添加一些常用的代码片段。

  • 将图片复制为数据 URI

    • 选择Network面板

    • 在资源面板中选择Img

    • 右键单击将其复制为数据URI（已编码为base 64）

  • 媒体查询

    • 在Chrome Devtools中的设备模式下，在三圆点菜单中点击 Show Media queries即可启用

    • Devtools会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形:

      • 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式
      • 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义

  • keys/values

    Devtools提供的快速查看一个对象的key、values的API

    1
    2
    3
    >let obj ={name:'Hero',age:24}
    >keys(obj)  //["name","age"]
    >values(obj)  //["Hero",24]

  • table

    Devtools提供的用于将对象数组记录为表格的API:

    1
    2
    3
    >let obj ={name:'Hero',age:24}
    >table(obj)
    >...显示表格

    如图：