chrome 浏览器调试工具的使用

打开Chrome的开发者工具

可以直接在页面上点击右键，然后选择审查元素：

**快捷方式：**Ctrl+Shift+I，或者直接按F12。
打开以后：

标签分析：

Elements：这个就是查看、编辑页面上的元素，包括HTML和CSS
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

可以查看元素占的空间情况（宽、高、Padding、Margin）

network

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

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的

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