Chrome DevTools中的实用技巧

前言

随着Javascript框架的爆炸式增长，拥有在浏览器中实时处理代码的能力是尤为重要的，$\color{#13c078}{Chrome DevTools}$是内置在浏览器中的 $\color{#13c078}{Web创作和调试工具}$，它们为开发人员提供了对其Web应用程序和浏览器的更深入访问。 您可以在DevTools中$\color{#13c078}{进行代码的调试，接口的测试，性能的检测等等}$强大的操作，极大程度的节省了开发者的时间。接下来，我将介绍几种在实际开发中会非常有用的技巧和窍门~

Chrome DevTools控制面板简介

打开 DevTools的方式有很多中，适合自己的就是最好的，在这里我们介绍一下用快捷键的形式打开：

• Mac: $\color{#13c078}{Cmd + Opt + I}$
• Windowns: $\color{#13c078}{F12 or Ctrl + Shift + I}$

从图片中我们可以看到DevTools中有很多不用类型的面板，包括Elements panel, Console panel, Sources panel等等，接下来我们重点介绍一下Sources panel，Elements panel，Console panel，Network panel。

Sources panel

1. 如何快速查找以及定位文件的具体行数？

• 使用$\color{#13c078}{Cmd + P( Ctrl + p )}$进行快速查找文件
• 然后在找到的文件的命令菜单中输入$\color{#13c078}{:行数:列数}$，如（:13:14）

2. 如何对压缩的文件进行格式化？

• 点击$\color{#13c078}{左下角\{\}标志}$来进行格式化压缩后的文件

3. 如何在打断点的时候，注入代码？

• 首先$\color{#13c078}{选择要注入代码的地方}$
• $\color{#13c078}{右键选择Edit in breakPoint}$
• 接下来进行$\color{#13c078}{相关代码的注入}$

4. 如何同时修改多行代码？

• 使用$\color{#13c078}{Cmd + Click(Ctrl + Click)}$来添加多个光标
• 输入想要修改的内容。

5. 如何选中hover之后出现的元素？

• 首先$\color{#13c078}{打开sources 面板}$
• 然后在页面上hover相关元素$\color{#13c078}{让其显示出tooltip的元素}$
• 使用$\color{#13c078}{commond+\ 或者f8}$来暂停脚本的执行
• 回到$\color{#13c078}{Elements面板}$，去检查tooltip的元素

6. 如何自定义snippets代码块？

经常有些代码需要在控制台下调试，比如数组排序，ajax封装，防抖，节流等等，有些时候我们需要用到一次就去查找一次这些通用代码的写法，devtools中的snippets就提供了让我们存放这些常用代码的地方，以便我们可以更好的查找和复用这些代码~

• $\color{#13c078}{进入sources面板，在导航中选中Snippets}$
• $\color{#13c078}{点击“New snippet”}$输入你需要存储的代码，保存即可
• $\color{#13c078}{使用Command Menu，在输入框中输入!}$，就可以根据名字来选择你的代码块进行多次使用了

Elements panel

1. 如何快速展开一层层的Dom呢?

• 使用$\color{#13c078}{ Alt/Option + Click}$就可以打开嵌套多层的闭合状态下的Dom树。

2. 如何在控制台中实现花式截图呢？

• 我们可以$\color{#13c078}{选中需要被截图的元素节点}$。
• 通过$\color{#13c078}{Cmd + Shift + P}$打开命令菜单
• 在命令菜单中输入$\color{#13c078}{screenshot}$ 选中你要的截图类型，即可实现相关的截图操作

截取特定节点对应上图命令是Screenshot Capture node screenshot， 通过 Screenshot Capture full size screenshot 命令可以截取全屏，不仅仅是可视区。

3. 如何快速隐藏元素呢？

• $\color{#13c078}{选中想要隐藏的元素}$
• $\color{#13c078}{直接点击’h‘键}$，可以实现隐藏元素，再次按下’h‘键可以使隐藏的元素展现

当我们在用上述方法进行截图，但是又不想在里边包含某些信息的时候，这招还是挺好用的~ 下图是p标签隐藏的状态，前边会有个黑色圆圈的标志

4. 如何更改元素颜色的格式呢？

• 使用 $\color{#13c078}{Shift + Click}$ 去点击元素的色块
• 可以实现元素$\color{#13c078}{RGBA, HSL, and hexadecimal}$的格式更换。

Console panel

1. 如何编辑页面上的文字呢？

• 在console面板中输入$\color{#13c078}{document.body.contentEditable="true"}$ 就可以实现对整个页面的编辑了。

2. console.table

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

如果列数太多的情况，我们可以传入第二个参数，来仅仅展示需要展示的列

3. 如何进行数据的格式化复制呢？

• 使用Devtools提供的工具函数$\color{#13c078}{copy(obj)}$ 来实现

即使给copy函数传入一个没有格式的 JSON，也会返回格式化的结果, 执行完copy(obj)，我们可以直接粘贴~

4. $和$$选择器

在控制台使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用$和$$替代。

• $('div')
• $$('div')

5. 控制台引用上一次执行的结果

• 使用$_

6. 如何快速的获取对象的key和value呢？

• 使用Devtools提供的工具函数 $\color{#13c078}{keys(obj)}$,$\color{#13c078}{values(obj)}$,具体事例如下：

Network panel

1. 怎样重新发起xhr请求呢？

以往我们都是通过刷新页面，点击按钮进行交互等方式去触发xhr请求，现在我们可以使用google提供的 Replay XHR 的方式去发起一条新的请求。 + 只需要$\color{#13c078}{选中要重新请求的链接}$ + $\color{#13c078}{右击选中Replay XHR}$即可。

2. 怎样自定义网络限制的条件？

当你想测试一下自己的程序在具体的网络条件下的表现，你就可以选择自定义网络的配置文件。

• 在 Network panel中 点击online,选择其中的 $\color{#13c078}{Add...}$
• 然后选择在新的弹窗中点击$\color{#13c078}{Add custom profile...}$
• $\color{#13c078}{输入自定义的相关条件}$即可

总结

如您所见，Chrome DevTools具有众多功能，可帮助大家更好地开发，更快地调试并更有效地衡量网站或应用程序的性能, 上面提到的技巧只是众多可用功能中的几个。如果大家在实际开发中用到了有意思的DevTools功能，欢迎在下面的评论区中分享哦~