掌握一定的调试方法可以快速排查和定位问题，大幅度提高开发效率。常用的前端调试工具：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
不只是查看请求，还可以了解缓存情况，后面会详细说明。
网友评论