文章目录
  1. 1. 文件快速转换
  2. 2. 源码中搜索
  3. 3. 定位到某行
  4. 4. 在console中选择元素
  5. 5. 多行编辑
  6. 6. 保留日志
  7. 7. 格式化压缩代码
  8. 8. 设备仿真
  9. 9. 颜色拾取
  10. 10. 改变元素状态
  11. 11. 查看shadow DOM
  12. 12. 同时操作重复变量
  13. 13. 改变颜色格式

Chrome浏览器的调试功能十分强大,今天介绍其中的13个技巧,这能提高你debug页面的效率。

文件快速转换

当DevTools打开时,按住Ctrl+P,mac上是Cmd+P,输入想要搜索的文件名称,就能打开对应项目中的文件。
quick_switch_file

源码中搜索

如果想要项目中某个文件中特定的字符串,可以按住Ctrl + Shift + F,mac是Cmd + Opt + F,这种搜索模式支持正则匹配。
search_within_source

定位到某行

当你在Sources中打开一个文件时,你可以按住Ctrl + G,输入行号来定位。
go_to_line

在console中选择元素

DevTools中的console支持DOM元素的选择:

  • $(),是document.querySelector()的简写,返回匹配css规则的第一个元素。
  • $$(),是document.querySelectorAll()的简写,返回匹配css规则的元素集合。
  • $0 – $4,选择元素的历史纪录,$0代表最近的选择元素。

select_element_in_console

多行编辑

当你打开一个文件时,可以按住Ctrl,mac上是Cmd,然后单击想要编辑的行,可以是多行,输入或删除文本。
use_multiple_carets

保留日志

在Console中,勾选Preserve Log,当你在页面间跳转时,Console中之前的log就会被保留,这对于你想查看之前的日志非常有用。
preserve_log

格式化压缩代码

DevTools有一个功能可以格式化压缩后的代码,方便你调试线上的源码。
pretty_source_code

设备仿真

在DevTools可以仿真移动设备,比如触摸,加速度计,甚至可以模拟定位。
device_emulation

颜色拾取

在Styles中可以打开color picker,浮动光标到页面上时,可以显示对应的颜色。
color_picker

改变元素状态

在Styles中,可以勾选元素的各种状态来查看对应的样式。
force_element_state

查看shadow DOM

visualize_shadow_dom

同时操作重复变量

当在Sources中编辑文件时,选择某个字符串后,多次按Ctrl+D,mac上是Cmd+D可以选择相邻的重复字符串,选定后可以同时进行编辑操作。
select_next_occurrence

改变颜色格式

在颜色预览框上,按住Shift,然后单击,可以在rgba,hsl和十六进制之间进行转换。
change_color_format

文章目录
  1. 1. 文件快速转换
  2. 2. 源码中搜索
  3. 3. 定位到某行
  4. 4. 在console中选择元素
  5. 5. 多行编辑
  6. 6. 保留日志
  7. 7. 格式化压缩代码
  8. 8. 设备仿真
  9. 9. 颜色拾取
  10. 10. 改变元素状态
  11. 11. 查看shadow DOM
  12. 12. 同时操作重复变量
  13. 13. 改变颜色格式