Chrome 调试工具

Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式

前端必要：测试，排错，调试

打开调试工具

打开 Chrome 浏览器，按下 F12 键或者右击空白处 ---> 检查 

使用调试工具

1. Ctrl + 滚轮可以放大或缩小开发者工具代码

2. 左边是 HTML 元素结构，右边是 CSS 样式（CSS 中会提示网页代码在原代码中的位置，第几行）

3. 右边 CSS 样式可以改动数值（键盘上的上下左右箭头或者直接输入，改完之后原代码并不会发生改变，我们需要将改的结果复制到原代码中）和查看颜色

4. Ctrl + 0 复原浏览器的大小

5. 如果点击元素，发现右侧没有样式导入，极可能是类名或者样式引入错误

6. 如果有样式，但是样式前面有黄色的叹号提示，则是样式属性书写错误