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等等，接下来我们重点介绍一下。

Sources panel

1. 如何快速查找以及定位文件的具体行数？
   我们可以使用 进行快速查找文件，然后在找到的文件的命令菜单中输入

image

2. 如何对压缩的文件进行格式化？
   我们可以通过来进行格式化压缩后的文件

image

3. 如何在打断点的时候，注入代码？
   首先选择要注入代码的地方，，接下来便可以进行相关代码的注入。这样就避免了我们要去项目中修改代码~

image

4. 如何同时修改多行代码？
   我们可以使用来添加多个光标，并输入想要修改的内容。

image

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

image

Elements panel

1. 如何快速展开一层层的Dom呢?
   我们只需要使用就可以打开嵌套多层的闭合状态下的Dom树。

image

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

image

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

3. 如何更改元素颜色的格式呢？
   我们只需使用 去点击元素的色块，就可以实现元素RGBA, HSL, and hexadecimal的格式更换。

image

Console panel

1. 如何编辑页面上的文字呢？
   当我们希望整个页面的都可以被编辑的时候，我们只需要在console面板中输入就可以实现对整个页面的编辑了。

2. 如何进行数据的格式化复制呢？
   我们可以使用Devtools提供的工具函数 来实现，即使给copy函数传入一个没有格式的 JSON，也会返回格式化的结果。执行完copy(obj)，我们可以直接粘贴~

image

3. 如何快速的获取对象的key和value呢？
   我们可以也是使用Devtools提供的工具函数 ,,具体事例如下：

image

Network panel

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

image

2. 怎样自定义网络限制的条件？
   当你想测试一下自己的程序在具体的网络条件下的表现，你就可以选择自定义网络的配置文件。
   • 在 Network panel中 点击online,选择其中的
   • 然后选择在新的弹窗中点击

   • 输入自定义的相关条件即可

     
     image

总结

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