Skip to content

分享小册《Chrome-DevTools的使用技巧》中的精华

前言

花了大概半天时间 温习了一遍(主要是忘了O(∩_∩)O哈哈~)掘金小册:你不知道的 Chrome 调试技巧-> 开源免费版链接

和大家分享一些个人认为比较实用的内容,感兴趣的朋友推荐去阅读一下这本小册

查看详细Chrome版本信息

浏览器中输入chrome://version/查看

图片

预设代码块

可以将一些高频使用的工具脚本代码块保存下来,下次使用可以直接调用

例如:查看掘金页面中已加载的文章

js
{
  const posts = $$('.title-row>a')
  console.table(posts, ['textContent', 'href'])
}

图片

接下来复用这个代码块,在Source面板的 snippets中新建一个Snippet并将代码块写入

图片

图片

从今以后就可以直接command运行,通过指令运行 !scriptName即可执行脚本

tips: 默认打开Command会有一个 > 记得先删除

图片

Command面板

快捷键 Ctrl + Shift + P

图片

图片

截图

  • 页面截图: Capture full size screenshot
  • 指定区域: Capture area screenshot
  • 指定DOM节点: Capture node screenshot
  • 当前屏幕: Capture screenshot

显示console时间戳

图片

图片

Console面板相关

copy方法

有一个全局的copy方法,可以在console面板中复制任何能够拿到的资源到剪贴板中

图片

$符号

$number

$0 是对我们当前在 Element面板 中选中的 html 节点的引用

$1 是对上一次我们选择的节点的引用, $2 是对在那之前选择的节点的引用以此类推,直到 $4

$与$$

  • $ 等价于 document.querySelector()
  • $$ 等价于 document.querySelectorAll()

$_

上次打印结果的引用

console.table

可以将 数组 (或者是 类数组 的对象)打印成一个漂亮的表格

在需要使用console.log(arrData)查看数据时,换成console.table(arrData,columns),不妨会更直观一些

第二个参数指定要展示的列

图片

time与timeEnd

console.timeconsole.timeEnd,两个方法配合计算并打印时间戳

通常用于测试方法的执行时间

图片

Network面板

Filter

用于过滤请求

图片

通过 - 查看所有筛选条件

图片

自定义请求表中展示的项

图片

重新发送请求

图片

Drawer

ESC控制打开/关闭Drawer

图片

所有的功能选项

图片

图片

查看更改Change

在Element面板中更改元素的样式可以在这直接查看

图片