web前端学习91（Chrome 调试工具）

7 Chrome 调试工具

html，css书写过程中可能会出错，就需要有个查找工具，帮忙调试

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

1 打开调试工具

打开Chrome浏览器，按下F12键或者右击页面空白处→检查。

选elements：元素

上面（橙色方框）是html,下面（蓝色）是css

2 使用调试工具

1. Ctrl+滚轮可以放大开发者工具代码大小。
2. 左边（上面）是 HTML元素结构，右边（下面）是CSS样式。
3. 右边CSS样式可以改动数值（左右箭头或者直接输入)和查看颜色。
4. Ctrl+0复原浏览器大小。
5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

eg: 修改

1. 点红色方框处，将鼠标移到要修改的地方（左边页面），然后对应右边代码块就会有显示，如图中，选中左边的蓝色区域，右边绿色区域亮起
2. 比如修改颜色，则点击右边绿色方框，则对应下面粉色区域的css就会显示，找到颜色的地方，紫色区域，可点击正方形颜色部分就可以修改别的颜色，后者手动填写#ffffff等

在这个调试页面改代码，最后刷新还是会复原，所以需要复制一份到原写代码处，才能最终更改页面显示的内容

3. 出现！黄色叹号，说明出错，右边紫色方框显示35，则可以去vscode代码35行更改