Chrome DevTools 你不知道的小技巧

命令

• mac

 command + shift + p

• window

ctrl + shift + p

截图 DOM 元素

1. 截图某个 DOM 元素

• 打开控制台， 在 Element 选中需要 "截图" 的 DOM 元素，然后使用上面命令 ，选择 Capture node screenshot ，具体操作如下

  
  select.png
  image.png
  image.png

2. 可以截图当前网页，保存一张长图

• 还是先打开控制台，操作命令，选择Capture full size screenshot 会自动下载一张网页的长图

  
  image.png

使用控制台，操作上一次的返回结果

• 使用 _ 可以直接拿到上一次的结果

function test() { return 'HelloWorld' }
test()
"HelloWorld"
$_
"HelloWorld"

重新发起某个XHR请求

• 当我们在 network 调试的时候，有事需要从新对某个请求重新获取一遍，这是不需要刷新全部，只需在触发一个请求即可
• 在 network 选择某个 XHR 请求，右键 选择 Replay XHR

编辑网页面上的内容

• 在控制台输入 document.body.contentEditable = "true" 或者 document.designMode = ‘on’ 即可

• 例如： 我把简书上文章 的 “章” 删掉

  
  image.png

network 使用幻灯片模式

• 点击 network ，点击右上角设置，选择 capture screenshots， 然后 刷新页面。

• 设置

  
  set

• 效果

  
  image.png

调整 css 属性值

• 每次写页面时，在浏览器调试 css 间距大小，我都是使用 上下 箭头 进行数字的 加减，但有时遇到小数或者较大数字，都要手动修改，其实这也有快捷方式的：
• 每次加减 0.1

option + ↑  or option + ↓   （mac）
alt + ↑ or option + ↓   (window)

• 每次加减 1 直接使用 ↑ 或 ↓
• 每次加减 10 使用 shift + 上 或 shift + 下
• 每次加减 100

 command + 上 或 下 (mac)
 ctrl + 上 或 下  (window)

自定义 devtools 颜色

• 一般我们都是使用默认的 黑色 或者 白色
• 有种插件可以让我们选择更多的颜色

1. 打开 devtools

2. 打开设置，选择

   
   image.png
3. 在 Chrome 商店 安装 aterial DevTools Theme Collection 即可

自定义代码片段

• 在 source 下 选择 snippets 添加代码片段

  
  image.png