Chrome DevTools中的实用技巧

Chrome DevTools是开发者最好的“朋友”

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

认识Chrome DevTools的控制面板

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

Mac: Cmd + Opt + I
Windowns: F12 or Ctrl + Shift + I

image

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

Sources panel

如何快速查找以及定位文件的具体行数？
我们可以使用 $\color{red}{Cmd + P( Ctrl + p )}$ 进行快速查找文件，然后在找到的文件的命令菜单中输入 $\color{red}{:行数:列数，如（:13:14）}$

image

如何对压缩的文件进行格式化？
我们可以通过 $\color{red}{点击{}}$ 来进行格式化压缩后的文件

image

如何在打断点的时候，注入代码？
首先选择要注入代码的地方， $\color{red}{右键输入Edit in breakPoint}$ ，接下来便可以进行相关代码的注入。这样就避免了我们要去项目中修改代码~

image

如何同时修改多行代码？
我们可以使用 $\color{red}{Cmd + Click(Ctrl + Click)}$ 来添加多个光标，并输入想要修改的内容。

image

如何选中hover之后出现的元素？
- 首先打开sources 面板
- 然后在页面上hover相关元素让其显示出tooltip的元素
- 使用commond+\ 或者f8来暂停脚本的执行
- 回到Elements面板，去检查tooltip的元素

image

Elements panel

如何快速展开一层层的Dom呢?
我们只需要使用 $\color{red}{Alt/Option + Click }$ 就可以打开嵌套多层的闭合状态下的Dom树。

image

如何在控制台中实现花式截图呢？
- 我们可以选中需要被截图的元素节点。
- 通过Cmd + Shift + P打开命令菜单
- 在命令菜单中输入screenshot 选中你要的截图类型，即可实现相关的截图操作

image

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

如何更改元素颜色的格式呢？
我们只需使用 $\color{red}{Shift + Click}$ 去点击元素的色块，就可以实现元素RGBA, HSL, and hexadecimal的格式更换。

image

Console panel

如何编辑页面上的文字呢？
当我们希望整个页面的都可以被编辑的时候，我们只需要在console面板中输入 $\color{red}{document.body.contentEditable="true"}$ 就可以实现对整个页面的编辑了。
如何进行数据的格式化复制呢？
我们可以使用Devtools提供的工具函数 $\color{red}{copy(obj)}$ 来实现，即使给copy函数传入一个没有格式的 JSON，也会返回格式化的结果。执行完copy(obj)，我们可以直接粘贴~

image

如何快速的获取对象的key和value呢？
我们可以也是使用Devtools提供的工具函数 $\color{red}{keys(obj)}$ , $\color{red}{values(obj)}$ ,具体事例如下：

image

Network panel

怎样重新发起xhr请求呢？
以往我们都是通过刷新页面，点击按钮的等方式去触发xhr请求，现在我们可以使用google提供的的方式去发起一条新的请求。
- 只需要选中要重新请求的链接
- 右击选中Replay XHR即可。

image

怎样自定义网络限制的条件？
当你想测试一下自己的程序在具体的网络条件下的表现，你就可以选择自定义网络的配置文件。
- 在 Network panel中点击online,选择其中的 $\color{red}{Add...}$
- 然后选择在新的弹窗中点击 $\color{red}{Add custom profile...}$
- 输入自定义的相关条件即可
  
  image

总结

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