33 Chrome调试工具

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

33.1 打开调试工具

打开 Chrome浏览器，按下F12键或者右击页面空白处→检查，点击elements。再点击调试窗口左上角的“方框鼠标”按键后，点击页面任意位置，即可看到相应的代码。

图3.1: 调试工具中会显示HTML和CSS

33.2 使用调试工具

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

2. 上边是HTML元素结构，下边是CSS样式。

3. 下边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。

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

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

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

33.3 移动端调试