关键词：
前言
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 (上一次停靠菜单) | F12、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 |
| 刷新页面 | F5、Ctrl + R | Cmd + R |
| 刷新忽略缓存内容的页面 | Ctrl + F5、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 |
❤️ 看完三件事
点在看，让更多的人也能看到这篇内容。
关注公众号「mad_coder」，加星收藏，不定期分享原创知识。
点击菜单，查看往期精彩文章。
你点的每一个"在看"，
我都当成了喜欢！
你还只会用atomicxxx？！恭喜你，可以下岗了！(代码片段)
...ff0c;栈长介绍了LongAdder的使用，性能实在太炸了，你还在用AtomicInteger、AtomicLong吗？如果你还不知道LongAdder，赶紧看我之前写的那篇文章。上次也提到了，在JDK8+中的atomic包下，还有另外一个兄弟类：... 查看详情
你还只会用atomicxxx？！恭喜你，可以下岗了！(代码片段)
...ff0c;栈长介绍了LongAdder的使用，性能实在太炸了，你还在用AtomicInteger、AtomicLong吗？如果你还不知道LongAdder，赶紧看我之前写的那篇文章。上次也提到了，在JDK8+中的atomic包下，还有另外一个兄弟类：... 查看详情
都0202年了，你还不知道javascript有几种继承方式？(代码片段)
前言 当面试官问你：你了解js哪些继承方式？es6的class继承是如何实现的？你心中有很清晰的答案吗？如果没有的话，可以通过阅读本文，帮助你更深刻地理解js的所有继承方式。 js继承总共分成5种，包括构... 查看详情
那些代表性的http状态码，你还只知道404吗？快来看看吧
前言在网络上发送请求后，经常会根据请求的状态码去判断请求的成功失败与否，常见的状态码有200，404，500。不过你以为HTTP请求的状态码就只有这么几个么？其实是远远比这个多的。今天这篇文章我们就一起来看看HTTP请求中... 查看详情
matlab还只会画爱心？，教你画水晶簇以及水晶爱心(代码片段)
创意来自于初中时做的硫酸铜爱心，硫酸铜是三斜晶型，这里为了方便绘制并没有采用同样的结构。效果：果然还是自然生长出的晶体更好看呜呜呜坐标变换想要画出水晶新要先会画晶体簇，画晶体簇要先会画一... 查看详情
matlab还只会画爱心？，教你画水晶簇以及水晶爱心(代码片段)
创意来自于初中时做的硫酸铜爱心，硫酸铜是三斜晶型，这里为了方便绘制并没有采用同样的结构。效果：果然还是自然生长出的晶体更好看呜呜呜坐标变换想要画出水晶新要先会画晶体簇，画晶体簇要先会画一... 查看详情
面试官：淦！0202年你还不知道面向对象？
2020年6月13日多云转暴雨??I‘msad,tired,negative,powerless,miss,lonelyfine:)那你回去等通知吧面试官：我看你简历上说，你的主要编程语言是Java，偶尔也用Python，那么你可以说一下这两个的相同点在什么地方吗？山禾：它们都是高级程序... 查看详情
都2017年了，h5这些知识你还不知道?
一、交互上，慎用横屏展示效果。但是在今年的微信传播中，好的创意也可以尝试使用。 原因：体验上，需要用户设备开启屏幕旋转功能，才能正常观看，用户操作成本高。对不同屏幕的手机，长宽比... 查看详情
都2021年了，你还在说测试比不上开发？
时间如白驹过隙，不知不觉从事测试行业已经近八年了，这些年来经常会听到这样的质疑，你是不是因为技术不好，不会编程，才做的测试？我先给出我的真实经历，我是正规软件工程专业出身，... 查看详情
python怎么调试程序
如果你还只会使用print来定位python程序问题，那这篇文章就是为你写的，这篇文章将带你入门python调试器。python标准库提供了一个叫pdb的调参考技术A如果你还只会使用print来定位python程序问题，那这篇文章就是为你写的，这篇文... 查看详情
活久见：都2203年了，你还在使用word调试api
...得无处不在，无处不用。但令人费解的是，都2203年了，竟然还有很多人使用word调试API？今天，西红柿将带领大家打开新世界的大门，放下诺基亚，抄起智能机！！！有些小伙伴可能不理解&#... 查看详情
都2021年了，你还在用kafka？快试试这个全新平台吧
点击关注公众号，回复“1024”获取2TB学习资源！最近这个ApachePulsar消息中间件非常的火，号称下一代消息中件，今天，就一起来看看它到底有多牛逼？概述ApachePulsar是一个使用ApacheBookkeeper提供持久化的pub/... 查看详情
都2021年了，你还在用jenkins？赶快看看这些替代方案吧！
Jenkins是目前最常用的持续集成工具，拥有近50%的市场份额，它还是很多技术团队的第一个使用的自动化工具。但是随着自动化领域的持续发展，Jenkins逐渐暴露出了一些问题，例如缺乏功能、维护问题、依赖关系... 查看详情
都2021年了，你还在写es5？快醒醒吧，这份es6超全教程拯救你(代码片段)
〝古人学问遗无力，少壮功夫老始成〞都2021年了，你还在写ES5？快醒醒吧，这份ES6超全教程拯救你，作为JavaScript语言的下一代标准。ES6其实在2015年就已经发布了，很多人并不清楚ES和JavaScript之间的关系&#x... 查看详情
只会懒汉式和饿汉式你还不懂单例模式!(代码片段)
只会懒汉式和饿汉式你还不懂单例模式!一.文章导读设计模式是每一位技术人员都应该掌握的技术,但是现在根据实际情况来看,大家对于设计模式也仅仅限于面试八股文,知其然不知其所以然。你说设计模式很难吧,其实也没有,你... 查看详情
都2023年了，听说你还不会归并排序？手把手教你手写归并排序算法(代码片段)
👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇作者丨超悦人生来源丨超悦编程本文介绍了归并排序的基本思想，递归方法的一般写法，最后一步步手写归并排序，并对其性能进行了分析... 查看详情
都2021年了，听说你还不会归并排序？手把手教你手写归并排序算法(代码片段)
👇👇关注后回复 “进群” ，拉你进程序员交流群👇👇作者丨超悦人生来源丨超悦编程本文介绍了归并排序的基本思想，递归方法的一般写法，最后一步步手写归并排序，并对其性能进行了分析... 查看详情
只会基础的功能测试的已经被炒鱿鱼了，而你还在不知所措···
作为一个在软件测试领域奋斗10年的老人，我前8年先后在不同的互联网公司担任高级软件测试工程师，测试主管等职，这么多年下来，也算是身经百战，阅人无数了。本文的结构将由下面几个部分构成1.当前新... 查看详情