CHROME开发者工具的小技巧【代码格式化、强制DOM、动画、直接编辑、网络限速、复制HTTP请求、抓图】

以你之姓@ 2022-05-17 07:40 59阅读 0赞

Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定，也欢迎大家补充交流。

话不多话，我们开始。

代码格式化

有很多css/js的代码都会被 minify 掉，你可以点击代码窗口左下角的那个 `{ }`  标签，chrome会帮你给格式化掉。

![pretty-code.gif][]

强制DOM状态

有些HTML的DOM是有状态的，比如<a> 标签，其会有 active，hover， focus，visited这些状态，有时候，我们的CSS会来定关不同状态的样式，在分析网页查看网页上DOM的CSS样式时，我们可以点击CSS样式上的 `:hov` 这个小按钮来强制这个DOM的状态。

![state.gif][]

动画

现在的网页上都会有一些动画效果。在Chrome的开发者工具中，通过右上角的菜单中的 `More Tools` => `Animations` 呼出相关的选项卡。于是你就可以慢动作播放动画了（可以点选 `25%` 或 `10%`），然后，Chrome还可以帮你把动画录下来，你可以拉动动再画的过程，甚至可以做一些简单的修改。

![animation.gif][]

直接编辑网页

在你的 console 里 输入下面的命令：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>document.designMode =&nbsp;</code><code>"on"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

于是你就可以直接修改网页上的内容了。

P.S. 下面这个抓屏中还演示了一个如何清空console的示例。你可以输入 clear() 或是 按 `Ctrl+L`（Windows下），`CMD + K` (Mac下)

![editor.gif][]

网络限速

你可以设置你的网络的访问速度来模拟一个网络很慢的情况。

![custom-network-throttling-profiles.gif][]

复制HTTP请求

这个是我很喜欢 的一个功能，你可以在 network选项卡里，点击 XHR 过滤相关的Ajax请求，然后在相关的请求上点鼠标右键，在菜单中选择： `Copy` => `Copy as cURL`，然后就可以到你的命令行下去 执行 `curl` 的命令了。这个可以很容易做一些自动化的测试。

![curl.gif][]

友情提示：这个操作有可能会把你的个人隐私信息复制出去，比如你个人登录后的cookie。

抓个带手机的图

这个可能有点无聊了，不过我觉得挺有意思的。

在device显示中，先选择一个手机，然后在右上角选 `Show Device Frame`，然后你就看到手机的样子了，然后再到那个菜中中选 Capture snapshot，就可以抓下一个有手机样子的截图了。

![device.gif][]

我抓的图如下（当然，不是所有的手机都有frame的）

![coolshell.cn-iPhone-6-Plus-1-148x300.png][]

设置断点

除了给Javascript的源代码上设置断点调试，你还可以：

给DOM设置断点

选中一个DOM，然后在右键菜单中选 Break on … 你可以看到如下三个选项：

![break.dom_-1024x708.png][]

给XHR和Event Lisener设置断点

在 Sources 面页中，你可以看到右边的那堆break points中，除了上面我们说的给DOM设置断点，你还可以给XHR和Event Listener设置断点，载图如下：

![breakpoints-834x1024.png][]

关于Console中的技巧

DOM操作

*  chrome会帮你buffer 5个你查看过的DOM对象，你可以直接在Console中用 $0, $1, $2, $3, $4来访问。

*  你还可以使用像jQuery那样的语法来获得DOM对象，如：`$("#mydiv")`

*  你还可使用 `$$(".class")` 来选择所有满足条件的DOM对象。

*  你可以使用 `getEventListeners($("selector"))` 来查看某个DOM对象上的事件（如下图所示）。

![events-geteventlisteners_expanded.png][]

*  你还可以使用 `monitorEvents($("selector"))` 来监控相关的事件。比如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>monitorEvents(document.body,</code><code>"click"</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![monitor-events-1024x378.png][]

Console中的一些函数

1）monitor函数

使用 monitor函数来监控一函数，如下面的示例

![monitor-300x112.png][]

2）copy函数

copy函数可以把一个变量的值copy到剪贴板上。

3）inspect函数

inspect函数可以让你控制台跳到你需要查看的对象上。如：

![inspect-1024x459.png][]

更多的函数请参数官方文档 – [Using the Console / Command Line Reference][Using the Console _ Command Line Reference]

Console的输出

我们知道，除了`console.log`之外，还有`console.debug`，`console.info`，`console.warn`，`console.error`这些不同级别的输出。另外一个鲜为人知的功能是，`console.log`中，你还可以对输出的文本加上css的样式，如下所示：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>console.log(</code><code>"%c左耳朵"</code><code>,</code><code>"font-size:90px;color:#888"</code><code>)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![console.log_-300x92.png][]

于是，你可以定义一些相关的log函数，如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> 
   <td> <p><code>console.todo =&nbsp;</code><code>function</code><code>( msg){ </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(</code><code>'%c%s %s %s'</code><code>,</code><code>'font-size:20px; color:yellow; background-color: blue;'</code><code>,</code><code>'--'</code><code>, msg,&nbsp;</code><code>'--'</code><code>);</code></p> <p><code>}</code></p> <p><code>console.important =&nbsp;</code><code>function</code><code>( msg){ </code></p> <p><code>&nbsp;&nbsp;</code><code>console.log(</code><code>'%c%s %s %s'</code><code>,</code><code>'font-size:20px; color:brown; font-weight: bold; text-decoration: underline;'</code><code>,</code><code>'--'</code><code>, msg,&nbsp;</code><code>'--'</code><code>);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![console.log2_-1024x411.png][]

关于console.log中的格式化，你可以参看如下表格：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:middle;">指示符</td> 
   <td style="vertical-align:middle;">输出</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%s</td> 
   <td style="vertical-align:top;">格式化输出一个字符串变量。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%i or %d</td> 
   <td style="vertical-align:top;">格式化输出一个整型变量的值。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%f</td> 
   <td style="vertical-align:top;">格式化输出一个浮点数变量的值。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%o</td> 
   <td style="vertical-align:top;">格式化输出一个DOM对象。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%O</td> 
   <td style="vertical-align:top;">格式化输出一个Javascript对象。</td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;">%c</td> 
   <td style="vertical-align:top;">为后面的字符串加上CSS样式</td> 
  </tr> 
 </tbody> 
</table>

除了console.log打印js的数组，你还可以使用console.table来打印，如下所示：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
   <td> <p><code>var</code><code>pets = [</code></p> <p><code>&nbsp;&nbsp;</code><code>{ animal:&nbsp;</code><code>'Horse'</code><code>, name:&nbsp;</code><code>'Pony'</code><code>, age: 23 },</code></p> <p><code>&nbsp;&nbsp;</code><code>{ animal:&nbsp;</code><code>'Dog'</code><code>, name:&nbsp;</code><code>'Snoopy'</code><code>, age: 13 },</code></p> <p><code>&nbsp;&nbsp;</code><code>{ animal:&nbsp;</code><code>'Cat'</code><code>, name:&nbsp;</code><code>'Tom'</code><code>, age: 18 },</code></p> <p><code>&nbsp;&nbsp;</code><code>{ animal:&nbsp;</code><code>'Mouse'</code><code>, name:&nbsp;</code><code>'Jerry'</code><code>, age: 12}</code></p> <p><code>];</code></p> <p><code>console.table(pets)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![console.table_-1024x438.png][]

关于console对象

*  console对象除了上面的打日志的功能，其还有很多功能，比如：
 *  console.trace() 可以打出js的函数调用栈
 *  console.time() 和 console.timeEnd() 可以帮你计算一段代码间消耗的时间。
 *  console.profile() 和 console.profileEnd() 可以让你查看CPU的消耗。
 *  console.count() 可以让你看到相同的日志当前被打印的次数。
 *  console.assert(expression, object) 可以让你assert一个表达式

这些东西都可以看看[Google的Console API的文档][Google_Console API]。

其实，还有很多东西，你可以参看Google的官方文档 – [Chrome DevTools][]

关于快捷键

点击在 DevTools的右上角的那三个坚排的小点，你会看到一个菜单，点选 `Shortcuts`，你就可以看到所有的快捷键了

![shortcuts-1024x466.png][]

如果你知道更多，也欢迎补充！

[pretty-code.gif]: /images/20220517/9ab3ab205f5d40039a2071609a1761fd.png
[state.gif]: /images/20220517/b686f6da6eb4413eb53ecf4eba3a5add.png
[animation.gif]: /images/20220517/311aa9e982ea4c8faf51b49dfc889539.png
[editor.gif]: /images/20220517/c164fceba8614eca986caf4e37030c15.png
[custom-network-throttling-profiles.gif]: /images/20220517/c242709c640840d7a99fcfbd8824b1e4.png
[curl.gif]: /images/20220517/5b8302b284394c07880b517183a8cc17.png
[device.gif]: /images/20220517/54b33c9564f649a1b7d0a63b1cd2fd1c.png
[coolshell.cn-iPhone-6-Plus-1-148x300.png]: /images/20220517/e4c058509a034d4d9aba51a191f4ea13.png
[break.dom_-1024x708.png]: /images/20220517/792eab4cf6a547aaa369d2f666af6ede.png
[breakpoints-834x1024.png]: /images/20220517/4a46bbd5e09241858bb7dc2898c03518.png
[events-geteventlisteners_expanded.png]: /images/20220517/97b4e2fab74d4b3d84cf35c5b4e1d69e.png
[monitor-events-1024x378.png]: /images/20220517/9ffb78472bab43d4bec73d218bb91e69.png
[monitor-300x112.png]: /images/20220517/160a6fdfb18f4eef8679565f56826050.png
[inspect-1024x459.png]: /images/20220517/a4623a5cdd0843e6a83d2540f7294f7a.png
[Using the Console _ Command Line Reference]: https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference
[console.log_-300x92.png]: /images/20220517/caf3678646c64f8abd4ecafca0d4de75.png
[console.log2_-1024x411.png]: /images/20220517/66679eb6ea0f4a128f49274cade33a93.png
[console.table_-1024x438.png]: /images/20220517/26459724e5544473bc8d9e218b67bcd5.png
[Google_Console API]: https://developers.google.com/web/tools/chrome-devtools/console/console-reference
[Chrome DevTools]: https://developers.google.com/web/tools/chrome-devtools/
[shortcuts-1024x466.png]: /images/20220517/b713bbc94be84ddc8eb4e2124b6f7e8e.png