说明:截图中的Chrome版本为52,不同版本可能略有区别。

常用设置

开发时消除静态资源缓存不能立刻更新的困扰,勾选Disable cache即可

巧用chrome开发者工具

切换颜色显示格式

巧用chrome开发者工具

修改默认颜色显示格式,在Settings(控制台按F1)>Preferences>Elements>Color format

巧用chrome开发者工具

选择dom

快速选中dom节点,鼠标选中的dom节点,可以看到chrome将其赋值为$0,因此在控制台直接敲出$0就可以得到,不用去输繁琐的CSS选择器,而且$1 - $4记录了你最近选过的4个dom节点。

巧用chrome开发者工具

chrome默认提供了一些选择dom的函数

  • $(selector)等同于document.querySelector(selector)
  • $$(selector)等同于document.querySelectorAll(selector)
  • $x(path)即xpath搜索,chrome中可以等同document.evaluate(path,document)

打开一个chrome空白页(确保$没有被js使用),测试如下

巧用chrome开发者工具

调试

断点可以编辑,比如在for循环中可以编辑进入断点的条件。

巧用chrome开发者工具

全局搜索(ctrl+shift+F),快速找到代码

巧用chrome开发者工具

美化代码,方便调试

巧用chrome开发者工具

写代码

chrome中有专门写代码的地方(位置在Sources>Snippets),这里写的代码不会丢失,任何页面都可以运行,非常方便。

巧用chrome开发者工具

相关文章:

  • 2021-12-04
  • 2021-06-01
  • 2021-07-26
  • 2021-11-22
  • 2021-10-07
  • 2021-07-01
  • 2021-10-31
猜你喜欢
  • 2022-12-23
  • 2021-11-22
  • 2021-11-22
  • 2021-12-31
相关资源
相似解决方案