0202年了, Chrome DevTools 你还只会console.log吗 ?

前言

Chrome 开发者工具（简称 DevTools）是一套 Web 开发调试工具,内嵌于 Google Chrome 浏览器中。DevTools 使开发者更加深刻的了解浏览器内部以及他们编写的应用。经过使用 DevTools,能够更加高效的定位页面布局问题,设置 JavaScript 断点而且更好的理解代码优化。

本文分享 24 个 Chrome 调试技巧和一些快捷键,但愿能帮你进一步了解 Chrome DevTools ～

调试技巧

1. 控制台中直接访问页面元素

在元素面板选择一个元素,而后在控制台输入$0,就会在控制台中获得刚才选中的元素。若是页面中已经包含了 jQuery,你也能够使用$($0)来进行选择。

你也能够反过来,在控制台输出的 DOM 元素上右键选择 Reveal in Elements Panel 来直接在 DOM 树种查看。

2. 访问最近的控制台结果

在控制台输入$_能够获控制台最近一次的输出结果。

3. 访问最近选择的元素和对象

控制台会存储最近 5 个被选择的元素和对象。当你在元素面板选择一个元素或在分析器面板选择一个对象,记录都会存储在栈中。 能够使用$x来操做历史栈,x 是从 0 开始计数的,因此$0 表示最近选择的元素,$4 表示最后选择的元素。

4. 选择元素

• $() - 返回知足指定 CSS 规则的第一个元素，此方法为 document.querySelector()的简化。
• $$() - 返回知足指定 CSS 规则的全部元素，此方法为 querySelectorAll()的简化。
• $x() - 返回知足指定 XPath 的全部元素。

5. 使用 console.table

该命令支持以表格的形式输出日志信息。打印复杂信息时尝试使用 console.table 来替代 console.log 会更加清晰。

6. 使用 console.dir,可简写为 dir

console.dir(object)/dir(object) 命令能够列出参数 object 的全部对象属性。

7. 复制 copy

你能够经过 copy 方法在控制台里复制你想要的东西。

8. 获取对象键值 keys(object)/values(object)

9. 函数监听器 monitor(function)/unmonitor(function)

monitor(function),当调用指定的函数时,会将一条消息记录到控制台,该消息指示调用时传递给该函数的函数名和参数。

使用 unmonitor(函数)中止对指定函数的监视。

10. 事件监听器 monitorEvents(object[, events])/unmonitorEvents(object[, events])

monitorEvents(object[, events]),当指定的对象上发生指定的事件之一时,事件对象将被记录到控制台。事件类型能够指定为单个事件或事件数组。

unmonitorevent (object[， events])中止监视指定对象和事件的事件。

11. 耗时监控

经过调用 time()能够开启计时器。你必须传入一个字符串参数来惟一标记这个计时器的 ID。当你要结束计时的时候能够调用 timeEnd()，而且传入指定的名字。计时结束后控制台会打印计时器的名字和具体的时间。

12. 分析程序性能

在 DevTools 窗口控制台中，调用 console.profile()开启一个 JavaScript CPU 分析器.结束分析器直接调用 console.profileEnd().

13. 统计表达式执行次数

count()方法用于统计表达式被执行的次数,它接受一个字符串参数用于标记不一样的记号。若是两次传入相同的字符串,该方法就会累积计数。

14. 清空控制台历史记录

能够经过下面的方式清空控制台历史:

• 在控制台右键，或者按下 Ctrl 并单击鼠标，选择 Clear Console。
• 在脚本窗口输入 clear()执行。
• 在 JavaScript 脚本中调用 console.clear()。
• 使用快捷键 Cmd + K (Mac) Ctrl + L (Windows and Linux)。

15. 异步操做

async/await 使得异步操做变得更加容易和可读。惟一的问题在于 await 须要在 async 函数中使用。Chrome DevTools 支持直接使用 await。

16. debugger 断点

有时候咱们须要打断点进行单步调试,通常会选择在浏览器控制台直接打断点,但这样还须要先去 Sources 里面找到源码,而后再找到须要打断点的那行代码,比较麻烦。

使用 debugger 关键词,咱们能够直接在源码中定义断点,方便不少。

17. 截图

咱们常常须要截图,Chrome DevTools 提供了 4 种截图方式,基本覆盖了咱们的需求场景,快捷键 ctrl+shift+p ,打开 Command Menu,输入 screenshot,能够看到如下 4 个选项:

去试试吧,很香!

18. 切换主题

Chrome 提供了 亮&暗 两种主题,当你视觉疲劳的时候,能够 switch 哦, 快捷键 ctrl+shift+p ,打开 Command Menu,输入 theme ,便可选择切换

19. 复制 Fetch

在 Network 标签下的全部的请求,均可以复制为一个完整的 Fetch 请求的代码。

20. 重写 Overrides

在 Chrome DevTools 上调试 css 或 JavaScript 时,修改的属性值在从新刷新页面时,全部的修改都会被重置。

若是你想把修改的值保存下来,刷新页面的时候不会被重置,那就看看下面这个特性（Overrides）吧。Overrides 默认是关闭的,须要手动开启,开启的步骤以下。

开启的操做:

打开 Chrome DevTools 的 Sources 标签页
选择 Overrides 子标签
选择 + Select folder for overrides,来为 Overrides 设置一个保存重写属性的目录

21. 实时表达式 Live Expression

从 chrome70 起,咱们能够在控制台上方能够放一个动态表达式,用于实时监控它的值。Live Expression 的执行频率是 250 毫秒。

点击 "Create Live Expression" 眼睛图标,打开动态表达式界面,输入要监控的表达式

22. 检查动画

Chrome DevTools 动画检查器有两个主要用途。

• 检查动画。您但愿慢速播放、重播或检查动画组的源代码。
• 修改动画。您但愿修改动画组的时间、延迟、持续时间或关键帧偏移。 当前不支持编辑贝塞尔曲线和关键帧。

动画检查器支持 CSS 动画、CSS 过渡和网络动画。当前不支持 requestAnimationFrame 动画。

快捷键 ctrl+shift+p ,打开 Command Menu,键入 Drawer: Show Animations。

23. 滚动到视图区域 Scroll into view

24. 工做区编辑文件 Edit Files With Workspaces

工做空间使您可以将在 Chrome Devtools 中进行的更改保存到计算机上相同文件的本地副本。

进入 Sources Menu, Filesystem 下 点击 Add folder to workspace 添加要同步的工做目录

快捷键

访问 DevTools

访问 DevTools	Windows	Mac
打开 Developer Tools (上一次停靠菜单)	F十二、Ctrl + Shift + I	Cmd + Opt + I
打开/切换检查元素模式和浏览器窗口	Ctrl + Shift + C	Cmd + Shift + C
打开 Developer Tools 并聚焦到控制台	Ctrl + Shift + J	Cmd + Opt + J

全局键盘快捷键

下列键盘快捷键能够在全部 DevTools 面板中使用:

全局键盘快捷键	Windows	Mac
下一个面板	Ctrl + ]	Cmd + ]
上一个面板	Ctrl + [	Cmd + [
更改 DevTools 停靠位置	Ctrl + Shift + D	Cmd + Shift + D
打开 Device Mode	Ctrl + Shift + M	Cmd + Shift + M
切换控制台	Esc	Esc
刷新页面	F五、Ctrl + R	Cmd + R
刷新忽略缓存内容的页面	Ctrl + F五、Ctrl + Shift + R	Cmd + Shift + R
在当前文件或面板中搜索文本	Ctrl + F	Cmd + F
在全部源中搜索文本	Ctrl + Shift + F	Cmd + Opt + F
按文件名搜索（除了在 Timeline 上）	Ctrl + O、Ctrl + P	Cmd + O、Cmd + P
放大（焦点在 DevTools 中时）	Ctrl + +	Cmd + Shift + +
缩小	Ctrl + -	Cmd + Shift + -
恢复默认文本大小	Ctrl + 0	Cmd + 0
打开 command 菜单	Ctrl + Shift + P	Cmd + Shift + P

控制台

控制台快捷键	Windows	Mac
上一个命令/行	向上键	向上键
下一个命令/行	向下键	向下键
聚焦到控制台	Ctrl + `	Ctrl + `
清除控制台	Ctrl + L	Cmd + K
多行输入	Shift + Enter	Shift + Enter
执行	Enter	Return

后记

若是你和我同样喜欢前端,也爱动手折腾,欢迎关注我一块儿玩耍啊～ ❤️

github 地址,欢迎 follow 哦～

博客

个人博客,点 star,不迷路～

公众号

前端时刻