浏览器控制台调试技巧

“DevTools是一款功能强大的软件，很容易被忽视， 它隐藏着许多我们甚至常常怀疑是否需要的那些功能”

复制内容

你可以通过全局的方法 copy() 在 console 里 copy 任何你能拿到的资源

保存全局变量

可以右键变量，并选择 “Store as global variable” (保存为全局变量) 选项。

第一次使用的话，它会创建一个名为 temp1 的变量，第二次创建 temp2，第三次 … 。通过使用这些变量来操作对应的数据。

换行

通常我们调试的时候，不止一行代码，一回车就执行了，那怎么办？

可以在需要回车的地方按Shift+Enter来换行输入，更好的办法就是编辑器编写完，直接复制粘贴。

切换面板位置

一般我在使用 DevTools 时， dock 的展示窗口都在底部 ，但是有时候我想把 dock 的窗口 切换到右边。

使用一个快捷键 ctrl + shift + D (⌘ + shift + D Mac) 来实现位置的切换（这一般都是切换为上一次的面板位置）

切换面板

日常开发中，我们常需要从 元素面板 跳转到 资源面板 并返回，这样往返的来调试我们的代码，怎么来节省鼠标点击的时间呢：

• 按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板。
• 按下 ctrl + 1 到 ``ctrl + 9可以直接转到编号1...9的面板(ctrl + 1转到元素面板，ctrl + 4` 转到 网络信息面板等等)

请注意! 我们在上面介绍的第二组快捷键默认被禁用了。你可以通过 DevTools>>Settings >>Preferences>>*Appearance* 打开这个选项：

数字的递增递减

通常我们在修改样式时，想调节字体大小或者间距，一个个去输入太慢

• 上键，可以递增 1
• 下键，可以递减 1
• Alt+上键，递增0.1
• Alt+下键，递减0.1
• Ctrl+上键，递增100
• Ctrl+下键，递减100
• Shift+上键，递增10
• Shift+下键，递减10

这些递增快捷键甚至对颜色都起作用

使用命令

控制台有一些被隐藏起来的功能，可以通过命令调用起来

• 在 浏览器控制台打开的情况下 按下 [ Ctrl] + [Shift] + [P] (Mac： [⌘] + [Shift]+ [P] )

如果有出现ctrl+shift+p无法调起的情况下，按ctrl+p，然后输入>也是一样的

命令一共分为这几类

自己一般比较常用的就是截屏功能/切换主题，其他功能可以自己探索。

截屏

通常我们全屏截图还需要一些插件工具啥的，在浏览器中就不用这么麻烦，一个命令就可以搞定

而且还可以单独对一个节点/区域来截图。如果浏览器语言是中文的话，搜索截图就可以，英文的话搜索Capture full size screenshot

切换主题颜色

在 Commands 菜单中寻找与 theme 相关的选项，实现 明亮 & 暗黑 两种主题之间的切换：

代码复用

如果我们平时有在控制台敲命令的时候，不能每次都要重新输入吧，这里说的不是缓存的代码，是需要代码时，直接调用该代码片段就可以重新运行，从目前测试结果看，清cookie ，清缓存，关闭浏览器都不会导致代码snippets丢失，而且是跨域名全局可用，应该是强存储于浏览器上的。

如何使用？

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存，大功告成！现在你可以通过右击菜单或者快捷键： [ctrl] + [enter] 来运行它了。

快捷键调用的方式：按ctrl+p 输入!就会看到自己存储的代码片段，回车就可以运行了。

ctrl+p，打开menu。输入?, !, :, >, … 各有不同作用,可以自行尝试体会

使用变量 $

看到这个$符号可能都会习惯性的想到 Jquery的选择器，但在DevTools上，他这个的用法也很多。

$$

如果你没有在 App 中定义过 $ 变量 (例如 jQuery )的话，它在 console 中就是对这一大串函数 document.querySelector 的别名。

$$它不仅执行 document.QuerySelectorAll 并且它返回的是一个节点的 数组 ，而不是一个 Node list

可以对比下document.querySelectorAll('div')和$$('div')哪个会更简洁。

$0

在 Elements 面板中， $0 是对我们当前选中的 html 节点的引用，当然$1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，等等。一直到 $4

你可以尝试一些相关操作(例如: $1.appendChild($0))

$_

调试的过程中，你经常会通过打印查看一些变量的值，但如果你想看一下上次执行的结果呢？再输一遍表达式吗？

$_ 是用于对上次执行的结果的 引用 。

$i

这个你可能都想不到，它可以拿来加载npm包，帮你快速引入或者测试npm库，不过这个只是插件的功能就是了，不是浏览器自带的。

使用这个命令的话，需要在安装 Chrome插件:Console Importer 的前提下才能用

安装插件后，我们运行 $i('lodash') 或者 $i('moment') 几秒钟后，你就可以获取到 lodash / momentjs 了

monitorEvents 事件监听

比如我们可以用来监听整个页面的点击事件，可以这么写

monitorEvents($0,'click')

Console

我们平时使用的比较多还是console.log来调试，但在不同场景下，也有其他更好的选择。

1. console.assert 断言

在 MDN 中是这样定义的

console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // c-like message formatting

当我们传入的第一个参数为 假 时，console.assert 会打印第二个参数的值。

通过它，你可以不用多余的 if 表达式，并且还可以获得堆栈信息。

2. console.table

如果有一个 数组 (或者是 类数组 的对象，或者就是一个 对象 )需要打印，你可以使用 console.table 方法将它以一个漂亮的表格的形式打印出来。它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以 缩放 甚至 还可以排序!!!

如果你觉得展示的列太多了，使用第二个参数，传入你想要展示的列的名字:

3. console.log({}) 增强log阅读体验

平常我们可能输出多个变量是直接使用console.log(name,age,address,phone),这样输出的结果虽然是都在同一块，但不易阅读，如果变量过多，或中间哪个变量为null的情况下，不好找到对应的缺失值。

为了让多个变量变得更加易读，你可以打印一个对象 - 只需将所有 console.log 的参数包装在大括号中。

将上面的代码改成

console.log({name,age,address,phone})

它就会输出成一个对象，能更好的阅读。

4. table与{}合并使用

console.table({name,age,address,phone})

这会将刚才对象转为表格形式展示

5. console.dir1

console 异步

一般来说，当你使用 promise 的时候通常配套用 .then(处理方法) 或者 将 promise 包裹在 async 方法中，再使用 await 来接收结果，但如果在 Console 中书写这样的结构很不方便。但如果 console 默认就被 async 包裹呢？你就可以直接使用await了。

⭐ 相关链接

推荐你订阅 Google Chrome Developers - YouTube 的频道

Developers.google.com 在这你可以（“按年”）或 技术（“按标签”）去查询一些有关特定更新的信息

你不知道的 Chrome 调试技巧【小册】