chrome 浏览器调试工具的使用

打开Chrome的开发者工具

可以直接在页面上点击右键,然后选择审查元素:
chrome 浏览器调试工具的使用
**快捷方式:**Ctrl+Shift+I,或者直接按F12。
打开以后:
chrome 浏览器调试工具的使用

标签分析:

Elements:这个就是查看、编辑页面上的元素,包括HTML和CSS
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改:
chrome 浏览器调试工具的使用
可以查看元素占的空间情况(宽、高、Padding、Margin)
chrome 浏览器调试工具的使用

network

chrome 浏览器调试工具的使用
chrome 浏览器调试工具的使用
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。
点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况
chrome 浏览器调试工具的使用
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息,对于开发、调试,都是很有用的

除element、network以外标签分析(https://cloud.tencent.com/developer/article/1025076)