Chrome开发者工具详解(1)-Elements、Console、Sources面板

ゞ浴缸里的玫瑰 2022-02-25 16:56 265阅读 0赞

## Chrome开发者工具面板 ##

面板上包含了*Elements*面板、*Console*面板、*Sources*面板、*Network*面板、  
*Timeline*面板、*Profiles*面板、*Application*面板、*Security*面板、*Audits*面板这些功能面板。  
![chrome-devtools-panes.png][]  
这些按钮的功能点如下：

*  **Elements**:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
 *  **Console**:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
 *  **Sources**:断点调试JS。
 *  **Network**:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
 *  **Timeline**:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
 *  **Profiles**:如果你需要Timeline所能提供的更多信息时，可以尝试一下*Profiles*,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
 *  **Application**:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
 *  **Security**:判断当前网页是否安全。
 *  **Audits**:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
    
    **注：** *这一篇主要讲解前三个面板Elements、Console、Sources*。

## Elements面板 ##

### 实时编辑DOM节点和CSS样式 ###

*  双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面

![element1.png][]

*  点击右侧**Style**面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图：

![element2.png][]

*  点击右侧**Computed**面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(**top**、**bottom**、**left**、**right**) 就可以修改元素的**padding**、**border**、**margin**属性值。

![element-computed.png][]

*  查看网页的本地修改历史
    
     *  点击**Styles**面板中修改过属性的文件名，会跳转到**Source**面板
     *  在文件位置右击选择**Local modifications**,可以查看本地的所有修改记录
     *  点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

![source1.png][]

## Console面板 ##

### 控制台输出日志 ###

通过JS代码或者命令行`console.log()`、`console.warn()`  
和`console.error()`可以将日志信息输出到控制台

*  `console.log` 显示一般的基本日志信息，当要显示的基本日志太多时可以使用`console.group`将相关的日志进行分组
 *  `console.warn` 显示带有*黄色小图标*的警告信息
 *  `console.error` 显示带有*红色小图标*的*红色*的错误信息

![console5.png][]

*  `console.assert` 当第一个参数为false时，才会显示第一个参数的值

![console4.png][]

*  可以根据JS条件判断输出不同的日志信息
    
    ***注：*** 当需要换到下一行而不是回车的时候，请按`Shift`\+`Enter`。  
    ![console3.png][]

### 控制台交互 ###

*  JS表达式计算

在上一小节，我们已经看到可以在控制台输入JS表达式点击`Enter`即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用`Tab`自动完成当前的建议项

*  选择元素

![console6-select.png][]

<table> 
 <thead> 
  <tr> 
   <th>快捷方式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$()</td> 
   <td>返回与指定的CSS选择器相匹配的第一个元素，等同于<code>document.querySelector()</code></td> 
  </tr> 
  <tr> 
   <td>$$()</td> 
   <td>返回与指定的CSS选择器相匹配的所有元素的数组，等同于<code>document.querySelectorAll()</code></td> 
  </tr> 
  <tr> 
   <td>$x()</td> 
   <td>返回与指定的XPath相匹配的所有元素的数组</td> 
  </tr> 
 </tbody> 
</table>

![console-select-element-issue.png][]

***注：*** 我在实际操作过程中发现`$()`并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组，我也给Google提供了这个issue，等待Google的答复。

## Sources面板 ##

你可以在这个面板里面调试你的JS代码，也可以在工作区打开你的本地文件。

### 调试JS代码 ###

*  你可以点击JS代码块前面的数字外来设置断点，如果当前代码是经过压缩的话，可以点击下方的花括号`{}`来增强可读性，所有的断点都会列出右侧的断点区。

![sources1.png][]

*  设置断点

断点可以在**DOM元素节点发生改变时**、**XHR生命周期状态改变时**、**指定的事件执行时**被触发

① **DOM元素节点发生改变时**

在**Elements**面板中指定的DOM节点上右击，在弹出的菜单中选择`Break on...`，可以看到三个选择项，比如我们选择`Subtree modifications`，  
那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。设置方式如下图：  
![sources-element-debug2.png][]

下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点，通过单步调试可以看到会弹出一个`div`对话框供用户添加数据。

![sources-dom-changes.png][]

② **XHR生命周期状态改变时**

当XHR生命周期状态发生改变或者XHR的URL与**Sources**面板右侧的**XHR Breakpoints**栏设置的字符串匹配时，则断点就会有触发。

![sources-xhr.png][]

③ **指定的事件执行时**

在**Sources**面板右侧的**XHR Breakpoints**栏下面是**Event Listener Breakpoints**,列出了各种类型的事件，勾选你要监听的事件，  
在指定的事件执行时，断点就会有触发。

![event-listener.png][]

[chrome-devtools-panes.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/chrome-devtools-panes.png
[element1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element1.png
[element2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element2.png
[element-computed.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element-computed.png
[source1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/source1.png
[console5.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console5.png
[console4.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console4.png
[console3.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console3.png
[console6-select.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console6-select.png
[console-select-element-issue.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console-select-element-issue.png
[sources1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources1.png
[sources-element-debug2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-element-debug2.png
[sources-dom-changes.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-dom-changes.png
[sources-xhr.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-xhr.png
[event-listener.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/event-listener.png