# Chrome 调试工具技巧

TIP

源于你不知道的Chrome调试工具技巧,共有24天的内容,本文是在阅读过程中的一点总结(基于个人技术水平和对Chrome的了解程度,选取适用于自己的),只用于自己研究学习,本文中没有涉及到的,还请移步原文.

# 1.$0

ChromeElements 面板中,$0 是当前我们选中的 html 节点的引用。

理所当然,$1 就是我们上一次选择的节点的引用,$2 是在那之前选择的节点的引用,等等。一直到 $4

你可以通过其他引用来尝试相关操作 (例如: $1.appendChild($0))

tool1.7-1

# 2.$$$

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

如果是 $$ 就更加厉害了,还能节省更多的时间,因为它不仅执行 document.QuerySelectorAll 并且它返回的是:一个节点的 数组 ,而不是一个 Node list

Array.from(document.querySelectorAll('div')) === $$('div')$$('div') 哪一种方式更加优雅呢?

# 3.$_

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

tool1.7-2

# 4.$i

Chrome插件:Console Importer 的帮助之下,你可以快速的在 console 中引入和把玩一些 npm 库。

直接运行例如 $i('lodash') 或者 $i('moment') 几秒钟之后,就可以获取到 lodash / momentjs 了。

tool1.7-3

# 5.copy(...)

你可以通过全局的方法 copy()consolecopy 任何你能拿到的资源,包括我们在上一篇中提及的那些变量。例如 copy($_) 或者 copy($0)

tool1.7-4

# 6.Store as global

如果你在 console 中打印了一堆数据(例如 App 中计算出来的一个数组),然后你想对这些数据进行额外操作,

例如,使用我们刚刚说的 copy ,那就可以轻松将它转换成一个全局变量: 只需右击,并且选择 “Store as global variable”(保存为全局变量) 这个选项。

第一次使用的话,它会创建一个名为 temp1 的变量,然后是 temp2 等等。这样你就可以操作各样的数据,而不用担心他们会被复写。

tool1.7-5

# 7.Copy HTML (最快的方式)

可能你知道右击或者点击在 html 元素边上的省略号(...)就能将它 copy 到操作系统剪贴板中 但你同样可以用非常古老的 [ctrl] + [c] + [ctrl] + [v] 大法来实现同样的效果!

tool1.7-6

# 8.console.assert

tool1.7-7

当我们传入的第一个参数为时,console.assert打印跟在这个参数后面的值。当你需要在特殊情况下打印一些信息的时候这很有用 - 现在你可以在不使用if表达式的情况下做到这件事情。另外,你还可以白白得到一个堆栈的跟踪信息 ;-)

请注意,如果你使用的 NodeJS 版本 ≤ 10.0 ,那可能会中断后面代码的执行,但是在. 10的版本中被修复了(当然,在浏览器中使用是完全安全的)

tool1.7-8

# 9.console.table

令人惊讶的是,这一个小技巧在开发者中并没有多少人知道。如果你有一个数组(或者是类数组的对象,或者就是一个对象),你可以使用 console.table 方法以一个漂亮的表格的形式将它打印出来。它不仅会根据数组中的对象的所有属性去计算出表中的列名,而且这些列都是可以 缩放 甚至... 排序 !😳

当列太多的时候,就可以通过第二个参数,只传入你想展示的列名。

tool1.7-9

# 10.console.dir

最受欢迎的 console.log 方法会将数据以格式化的形式打印出来,大多数的情况下默认的格式化很有用。但是有时候那可能不是你想看到的 - 最典型的例子就是:你想要打印一个 DOM 节点。 console.log 会将这个交互式的元素渲染成像是从 Elements 中剪切出来的一样。如果说你想要查看这个节点所关联到的真实的 JavaScript 对象呢?并且想要查看他的属性等等? 这样的情况下,如果需要更加直接表现形式来展示数据,就可以使用 console.dir

tool1.7-10

# 11.通过 'h' 来隐藏

可以按下 'h' 来隐藏在元素面板中被你选中的元素。再次按下 'h' 使它出现。某些时候这是很有用的,例如你想截图,但是又不想里面包含一些敏感信息。

tool1.7-11

# 12.使用 Command (命令) 菜单

有一些 Dev Tools 的功能被深深的隐藏在特别的 面板/菜单 中。甚至有一些还隐藏在他们(面板/菜单)下面。这也是为什么 Command 菜单,是在 Dev Tools 中必不可少的一个工具。

如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette, 那么 (Command 菜单) 也是类似的功能。可以这样调出它:

  • Chrome 的调试打开的情况下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)
  • 或者使用DevToolsdropdown 按钮的这个选项:
tool1.7-12

# 截屏,大小通吃

如果你想对某个特别的 DOM 节点进行截图,选中那个节点,打开 Command 菜单并且寻找节点截图的命令。

更好用的是:同样可以用这种方式全屏截图 - 使用 Capture full size screenshot 。请注意,我们说的是 全屏 ,并不是嵌入页面的一部分。我记得这可是得使用浏览器插件才能做到的!

tool1.7-13

# 快速切换面板

DevTools 的部分使用双面板布局(例如:元素或者资源面板),DevTools 经常根据屏幕可用的部分,将它们横向或者纵向的排列,以方便阅读的方式展示。有时候你并不喜欢这样布局。

(你是否重置过 DevTools 呢?把 样式面板html预览 的底部移动到右边或者其他的周围位置?是的,这就是我所说的😉)

打开 Commands 菜单并且输入 layout ,你会看到 2 到 3 个可供选择的项(当前你已经激活的选项不会在这里显示):

  • 使用横向面板布局
  • 使用纵向面板布局
  • 使用自动面板布局

选择你需要的

tool1.7-14

# 快速切换主题

你是否讨厌突然的强光,并且无法忍受一直看着白光闪闪的屏幕?或者你一直都在黑暗的模式下工作,但突然太阳出来了,照在你的 DevTools 上导致你什么都看不到?

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

tool1.7-15

#logs 加上时间戳

tool1.7-16

# 13.插入样式规则的按钮

当你把鼠标放在样式选择器的选择区域的最后时,你会看到几个按钮,它们可以让你快速的使用 ColorShadow 编辑器添加 CSS 属性:

  • text-shadow
  • box-shadow
  • color
  • background-color

...打开相应的编辑器:

tool1.7-17

# 14.Conditional breakpoints 条件断点

有时设置的断点被执行太多次了:想想看,有一个对 200 个元素的循环,但你只对第 110 次循环的结果感兴趣,或者只对一些满足其他的特殊条件的结果感兴趣。

这样的情况下,就可以设置一个条件断点。实现:

  • 右击行号并且选择 Add conditional breakpoint...(添加条件断点) 的选项
  • 或者右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)
  • 然后输入一个执行结果为 true 或者 false 的表达式(它的值并不需要明确的为 true 或者 false 尽管那个弹出框的描述是这样说的)。

在这个表达式中,你可以获取到任何这段代码可以获取到的东西,即这一行的作用域。 现在条件满足的话,断点就会暂停代码的执行

tool1.7-18

# 15.The ninja(忍者) console.log

得益于条件断点,现在可以开始灵活使用这个技术。因为:

  • 每一个条件都必须经过判断 - 也就是 - 运行 - 每当应用执行到这一行。
  • 并且如果条件返回的是falsy的值(例如. undefined ),它并不会暂停..

所以,与其在源码的不同地方去添加 console.log / console.table / console.time 等等,不如直接使用条件判断来将它们 “连接” 到 Source 面板中。它们不会停止,会一直执行,并且当你不再需要它们的时候,有一个地方( Breakpoints section )会列出它们。点两下鼠标就可以把所有的都移除,就像一堆忍者一样消失!

tool1.7-19

这个技术在调试生产环境的问题时同样很有用,你可以将 console logs 轻松插入到 source 里。

# 16.Switch between 2 recent DevTools placements 在两个最近使用的 DevTools 的展示位置之间切换

我通常会发现自己在 95% 的时间内都在使用 DevTools 窗口中的一个个人最喜欢的位置(底部的 dock),但是有时我想切换到另外一个(通常是右边的 dock)。那么你可以通过 DevTools 的下拉菜单,或者命令菜单...或者使用一个快捷键 ctrl + shift + D (⌘ + shift + D Mac)。

它将会在你现在所处的位置以及你之前使用的位置之间切换:

tool1.7-20

点个Star支持我一下 ~