调试项目列表与调试项目内容列表

     ChromeF12调试器是比较好的一个网页调试工具，在修改网页样式时，作用较大，并且在分析事件与网络性能也挺好。并且可以调试JS代码。

首先在调试项目列表中的Elements中，如果将捉捕工具捉捕住元素窗口后，在调试项目内容的style中会有四部分，一般分是elementstyle，这个一般是空的，第二部分是此元素中的式样，因为其中会受父式样的子式样影响，所以会有很多，而且还会有一些通配式样，这时都会列出，其中会有一个覆盖的过程。

第三部分元素，一般是user agent stylesheet.一般如果不是内联，都是空白。

第四部分父元素，或者父元素更上层的式样继承。这个也比较多。

 

第二个调试项目列表项是console, 它是网页的输出。

第三个是源码或者脚本，里面可以下断点，一般对js下断点，F5可以刷新，便停在断点处，在watch中可以查看值，而后按F8单击执行。

第四个是网络，可以查看各个Get操作的general,request, response信息。

还有resource, security, audits的操作。但用得较少。