隐秘的Chrome DevTools 技巧

Posted 2021-03-30 程序狗的精神乐园

1. $0

在Chrome的Elements面板中，$0 是当前我们选中的html节点的引用。

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

2. $_

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

3. copy(...)

你可以通过全局的方法copy()在console里copy任何你能拿到的资源，包括我们在上一篇中提及的那些变量。

例如：copy(\_$) or copy($0)

4. console.table

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

    当列太多的时候，使用第二个参数，传入你想要展示的列对应的名字。

　

5. console.dir

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

在那样的情况下，如果你需要更加直接的表现形式来展示你的数据，就可以使用console.dir。

6.通过'h'来隐藏

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

7.截屏，大小通吃

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

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

8. Shadow editor 阴影编辑器

它也只是一个小部件而已，你可以通过在 Style 面板中点击靠近 box-shadow属性 或者 text-shadow属性 的阴影方形符号来打开它。

9.Timing function editor 定时函数编辑器

也称为 Cubic bezier (贝塞尔)编辑器。贝塞尔曲线是一串用来定义 CSS 的动画速度在整个动画过程中如何变化的魔法数值。我们将其定义为 transition-timing-function 或者 animation-timing-function CSS 属性。

就像之前说的 Color picker 和 Shadow editor 一样直接点击我们刚刚提到的属性(或者他们的简写形式：trasition, animation - 请注意：如果timing 函数的值没有设置在这个简写的形式中，这个符号不会显示出来)边上的曲线符号：

10.插入样式规则的按钮

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

l text-shadow

l box-shadow

l Color

l background-color

    打开相应的编辑器：

11.给你的 console.log 加上 css 样式

给你的打印文本加上 %c 然后 console.log 的第二个参数变成了... css 规则！你可以利用这一点让你的日志脱颖而出(例如 Facebook在你打开 console的时候所做的一样)。

12.在元素面板中展开所有的子节点

相比于点击级联的 ▶ 按钮，不如使用右击节点后的 expand recursively 命令：

13. 大括号 + table

    终极 log。

　

14.控制传感器

如果你正在你的应用中使用一些获取位置信息的 API 而且想要测试一下它，你可能不想开车环绕世界只是为了做到这一点(去旅行有更好理由

    位于 Drawer 的 Sensors(传感器) 面板可以让你模拟特定的位置。可以从预定义的位置中进行选择，添加自己的位置，或者只需手动键入纬度/经度。选定的值将被navigator.geolocation.watchPosition（或 .getCurrentPosition ）报告。

如果你的应用使用加速计，传感器面板也可以模拟你设备在3D空间中的位置！

15.模拟网络状态

就像伪造你的位置一样，你可以使用 Drawer 的 Network conditions 面板模拟特定的网络行为：模拟互联网为典型的3G网络甚至离线！ 这有助于了解页面资源的大小。

或者测试应用的离线功能。

Network conditions 面板还可以模拟特定的用户代理。

16.在 Chrome 中修改你的文件

有时在代码执行的位置是最容易编辑代码的 - 在浏览器中。如果你直接把项目的文件夹直接拖到 Source 面板，DevTools 会将你做出的修改同步到系统的文件中。

这对于快速修复代码非常方便！（我真的认识一个喜欢以这种方式做大部分编码的开发者）

17.工作区支持即时同步样式

正如我们刚才所说，一旦设置好了 DevTools workspace，就可以在 Sources 面板中编辑 HTML 和 javascript（或者甚至是 TypeScript，如果你有sourcemaps）文件，按 ctrl + s 后它将被保存 在文件系统中。

    但是在样式方面它会变得更好。 因为现在，即使您在“元素”面板的“样式”部分中编辑样式规则，它也会立即同步。 立刻！

18.为新选择器选择目标位置

如果要向现有选择器添加新样式，很容易：只需在“元素”面板的“样式”部分中找到该选择器，然后开始编写 css。 但是如果还没有这样的选择器，则需要按下New Style Rule 按钮。

但是，当你使用工作区时，新样式规则的默认定位为 - “inspector-stylesheet：1” 如果这不是你想要规则显示的位置。 在这种情况下，只需按住 New Style Rule 按钮，你将看到列出所有 css 文件的选项。 只需选择目的地，新规则就会保存在那里！

19. Snippets

有时我使用 JavaScript 作为自动化工具来处理第三方网站和应用程序。

    比方说，我想看看有多少人在我的所有媒体帖子上鼓掌。 Medium 没有提供这样的总数，所以我把这个小脚本组合在一起：

 $$('td:last-child .sortableTable-number')

    .map(el => parseInt(el.innerText))

    .reduce((total, value) => total + value);

当我打开状态页并且输入这段脚本到 Console 的时候，它将会返回这个数值:

　

现在，就算，它并没有花费我太多的精力来写这个，但如果我只是偶尔需要做一次，那么对于我来说，要去记住正确的选择器肯定会很烦人。

这就是 Snippets 的用武之地：这是让你存放 JavaScript 代码到 DevTools的一种方式，以便于你稍后复用他们。

创建这样一个 Snippet 进入到 Sources 面板，在导航栏里面选中 Snippets 这栏，点击 “New snippet(新建一个代码块)” ,输入你的代码，保存，大功告成！

一旦设置了一组很棒的代码块，您甚至不必访问Sources来运行它们。最快的方式，就像我们本周已经多次发现的那样，就是使用 Command Menu。如果你输入 ! 在它的输入框中，你可以根据名字来选择你的代码块。

20. 检查你修改的内容

在浏览器中进行设计，调整这些css值，在代码执行的地方进行调试 - 这既方便又有趣。 但在某些时候，你可能希望将已更改的内容与最初加载的样式表进行比较。

为此，可以使用位于 DevTools' Drawer 中的更改工具。

出处：https://medium.com/@tomsu