「译」你不知道的Chrome调试技巧DAY1
1. $0
在Chrome的Elements面板中，$0关联到当前我们选中的html节点。
理所当然，$1 是我们上一次选择的节点，$2是在那之前选择的节点，等等。一直到 $4
你可以用以上的补充参考来尝试一些相关的操作(例子: $1.appendChild($0))
2. $ 和 $$
在你还没有在app中定义 $变量的情况下(例如 jQuery)，$在console中是冗长的函数document.querySelector的一个别名。
但是$$ 能节省更多的时间，因为它不仅仅执行document.QuerySelectorAll并且返回的是一个节点的数组，而不是一个Node list
从本质上说:Array.from(document.querySelectorAll('div')) === $$('div'),但是$$('div')要简短太多了！
3. $_
$_变量是关联上次执行的结果。
4. $i
在Chrome插件:Console Importer的帮助之下，你可以快速的在console中引入和把玩一些npm库。
直接运行例如 $i('lodash') 或者 $i('moment') 然后在几秒钟之后，你就可以获取到lodash / momentjs了。
5. copy(...)
You can copy anything available in the console into your OS clipboard using the global copy function available in the Console. This includes variables that we’re discussed in the previous tips, e.g. copy(_$) or copy($0)
你可以通过全局的方法copy()在console里copy任何你能拿到的资源，包括我们在上一篇中提及的那些变量。例如 copy(\_$) or copy($0)
6. Store as global
如果你在console中打印了一坨数据(例如 你在app中计算出来的一个数组),然后你想对这些数据做一些额外的工作， 例如使用我们刚刚提到的copy，你可以很容易的将它变成一个全局变量
只需要右击它，并且选择“Store as global variable” (保存为全局变量)这个选项.
第一次使用的话，它会创建一个名为 temp1 的变量，然后是 temp2 等等.所以你可以操作各样的数据而不用担心会复写(译注:修改他们原有的值)他们
7. 保存(Stack trace)堆栈跟踪
对你来说，堆栈跟踪会很有用，但是对于你的同事来说也是这样。(例如 : 与其他的前端开发者合作，或者是QA (测试) 工程师).你可以直接把堆栈跟踪保存为一个文件而不是截个图。
8. Copy HTML (最快的方式)
你可能知道右击或者点击在html元素边上的省略号(...)就可以将它copy到你的操作系统的剪贴板中
但是你同样可以用非常古老的[ctrl] + [c]大法来实现同样的效果！
9. console.assert
console/assert当我们传入的第一个参数为假时，console.assert打印跟在这个参数后面的值。当你需要在特殊情况下打印一些信息的时候这很有用 - 现在你可以在不使用if表达式的情况下做到这件事情。另外，你还可以白白得到一个堆栈的跟踪信息 ；-）
请注意，如果你使用的 NodeJS 版本 ≤ 10.0 ,那可能会中断后面代码的执行，但是在. 10的版本中被修复了(当然，在浏览器中使用是完全安全的)
10. console.table
令人惊讶的是，这一个小技巧在开发者中并没有多少人知道.如果你有一个数组(或者是类数组的对象，或者就是一个对象)，你可以使用console.table方法将它以一个漂亮的表格的形式打印出来。它不仅仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以缩放甚至...可以排序！
当列太多的时候，使用第二个参数，传入你想要展示的列对应的名字
如果你偶尔在后台进行尝试的话，只有node版本大于10以上,console.table才能起作用
11. console.dir
最受欢迎console.log方法将数据以格式化的形式打印出来，在大多数的情况下这确实很有用。但是有时候那可能不是你想看到的 - 最典型的例子就是你想要打印一个DOM节点.console.log会将这个交互式的元素渲染成像是从Elements中剪切出来的一样.如果说你想要查看这个节点所关联到的真实的js对象呢？并且想要查看他的属性等等？
在那样的情况下，如果你需要更加直接的表现形式来展示你的数据，就可以使用console.dir。
12. 通过'h'来隐藏
你可以通过简单的按一下'h'来隐藏你在元素面板中选择的元素。再次按下'h'可以使它出现。这在某些的时候是很有用的，例如你想截图，但是你又不想里面包含一些敏感信息的情况。
13. 拖动 & 放置 元素
当你想要看看你页面的一部分在DOM树的不同部分是如何显示的时候，只需要拖动放置它(到指定的位置)，就像在你机器上任何其他地方一样 :-)
14. 或者使用control!(按钮)
如果你只是想移动你当前选中的元素，在DOM结构中往上一点或者往下一点，而不是拖动和放置，你同样可以使用[ctrl] + [⬆] / [ctrl] + [⬇] ([⌘] + [⬆] /[⌘] + [⬇] on Mac).
15. 它是一个基础编辑器
从某一点来看，我们可以拖动，放置，编辑，复制(当然，以及使用 [ctrl]+[v] 来粘贴), 所以当我们发现我们可以在元素面板里把我们的HTML结构搞得一团糟，这并不奇怪。在任意一个编辑器中都有一个标准：
使用[ctrl] + [z] ([⌘] + [z] on Mac)撤销我们的任何改动。 使用 [ctrl] + [shift] + [z]重新编辑我们的任何修改。
16. 打印出来的对象，并不是我们所期待的样子
好家伙，这个(打印出来的对象，并不是我们所期待的样子)会让你摔个跟头，并且使基于console.log的调试过程变得扑朔迷离，或者调试失败。
你在console中打印出的对象，在你打印出他内容之前，都是以引用的方式保存的。
这是什么意思呢？例如:你(在代码中)打印了一个对象，然后(在代码中)修改了它，然后再将他打印出来 - 然后在console中查看，你就会看到第一条打印的记录(在进行修改前的记录) 和第二条打印的记录的值是一样的！
如果这样描述你仍然不好理解，别担心，在下面的视频中看下这个流程，然后你就会变得清晰。
现在想象一下，如果在你想要弄清楚一个对象是在何时被修改的时候，发生了这样的情况。
怎么处理这样的情况呢？你可以打印一个从这个对象复制出来的对象，或者...在正式的调试中使用可以让我们放心的断点或者资源面板来替代。
17. 开始使用 Command (命令) 菜单 (如果你还没有用过的话)
有一些 Chrome 调试工具的功能被深深的隐藏在特别的面板中，菜单中等等。并且有一些甚至隐藏在这些地方之下。这也是为什么 Command 菜单 是一个在工具盒中必不可少的工具。
如果你在 WebStorm 中使用过 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜单) 也是类似的功能。可以这样让它显示出来：在 Chrome 的调试打开的情况下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)或者使用DevTools 的 dropdown 按钮的这个选项:
你可以看到命令的输入和一系列的可供你选择的命令，按照我在下图所选择的类型被分组排列。
顺便说一句. 我个人认为上面这张图，是对于 DevTools 有多么强力的最好的象征
让我们一起来看看隐藏在这里的精华吧，一起？
18.截屏，大小通吃
如果你想对一个特别的 DOM 节点进行截图，选中那个节点，打开 Command 菜单并且寻找节点截图的命令。
更有用的是什么呢，你同样可以用这种方式全屏截图 - 使用 Capture full size screenshot。请注意，我们说的是全屏，并不是嵌入页面的一部分。我记得这可是得使用浏览器插件才能做到的！
19.快速切换面板
DevTools 的部分使用双面板布局（例如：元素或者资源面板）经常将它们以适合阅读的方式展示出来，根据屏幕可用的部分，将它们横向或者纵向的排列。有时候这个布局却并不是你喜欢的。
（你是否重置过DevTools呢？将样式面板将其从html预览的底部移动到右边或者其他的周围位置呢？是的，这就是我所说的）
Open Commands Menu and type in “layout”, you will see 2 of the 3 possible options (The option you have currently active is the one that won’t be shown):
打开 Commands 菜单并且输入layout,你会看到 2 到3个可供选择的项(当前你已经激活的选项不会在这里显示)：使用横向面板布局使用纵向面板布局使用自动面板布局
选择你需要的
20.快速切换主题
你是否突然开始讨厌强光，并且不能忍受一直看着白光闪闪的屏幕呢？或者你一直都在黑暗的模式下工作，突然太阳出来了，照在你的 DevTools 上所以你什么都看不到？
在 Commands菜单中寻找与 theme 相关的选项，以实现在明亮&暗黑两种主题之间的切换。
作者：Tomek Sułkowski 地址：https://twitter.com/sulco
翻译：dendoink 地址：http://www.dendoink.com
著作权归原作者所有
