chrome浏览器的调试工具

末蓝、 2021-09-13 15:46 561阅读 0赞

## **1.直接打开控制台** ##

Fn+F12

## **2.Elements标签页** ##

这个就是查看、编辑页面上的元素，包括HTML和CSS：

## 3.Resources标签页 ##

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。

这里的CSS文件有一个特性，你可以直接修改CSS文件，并且修改即时生效：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]

## 4.Network标签页 ##

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。  
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]

## 5.Scripts标签页 ##

这个标签页就是查看JS文件、调试JS代码的

## 6.Timeline标签页 ##

注意这个Timeline的标签页不是指网络请求的时间响应情况（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间

## 7.Profiles标签页 ##

这个主要是做性能优化的，包括查看CPU执行时间与内存占用

## 8.Audits标签页 ##

这个对于优化前端页面、加速网页加载速度很有用（相当与Yslow）

## 9.Console标签页 ##

就是Javascript控制台了  
这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。  
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/474389a0d3594153bc6c18dae2cc231a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/88ed5a64fe75456aa7f791c72814b798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/cdf24e925f1d4beea2560ed3164e712a.png