掌握一定的调试方法可以快速排查和定位问题，大幅度提高开发效率。常用的前端调试工具：chrome浏览器

调试方法：

在要调试的页面右键，选择检查即可打开调试工具

image.png

调试工具打开如下，最常用的调试功能为：

Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。

Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。

Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。

image.png

Elements：

用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息

image.png

console

用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，执行console可以看到它有很多函数可以调用

image.png

Sources

js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试

image.png

较复杂的例子

image.png

Network 网络请求标签页

可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

以百度首页为例：

image.png

不只是查看请求，还可以了解缓存情况，后面会详细说明。