本文详细介绍了前端开发中常用的三种调试方法：使用alert()显示变量值、利用console.log()输出信息至控制台以及通过设置断点进行精细调试。此外，还讲解了如何利用谷歌浏览器的开发者工具进行网络请求监控和禁用缓存，以实现更高效的前端调试。
前端调试常用三种方法
1、通过alert（）
在js代码适当的位置使用alert方法打印变量的值，执行程序就可以看到浏览器中弹出结果
2、通过console.log()方法
在js代码适当的位置使用cosole.log(),执行程序就可以在浏览器console控制台看到输出结果，也可以直接在浏览器cosole控制台使用该方法打印
3、前端断点调试
类似于后端断点调试的方法，当执行程序后，查看浏览器开发者模式的Network，筛选XHR，可以看到向后台发送的request请求、状态以及后台返回的结果response（可以帮助快速了解请求状态和结果）；
另外一点就是js的断点调试
3.1、在Sources的选项下，左侧page下找到对应的js文件
3.2、在需要的地方打上断点
3.3、执行程序进入断点调试
鼠标悬停在某一变量上可以看到变量在执行到该断点的值，右侧Scope可以看到执行到该断点时的各个变量的值
第一个按钮（F8）就会变成一个三角形。点击运行至下一个断点，若下面没有断点，它就会自动运行至结束。
第二个按钮（F10）是逐行执行，如果这一行调用了一个函数，会一次性执行函数得到结果，而不会跳转到函数内部去执行函数的过程
第三个按钮（F11）是逐过程执行，一行一行地执行，只是当这一行是一个函数的时候，他会自动跳转到函数内部的
第四个按钮（shift + F11）是跳出该函数
第五个按钮，是忽略所有断点，自动执行至结束
清除所有断点方法
谷歌浏览器的禁用缓存功能
打开 network，勾选 disable cache，这样每次刷新页面都不会通过缓存来获取数据，而是每次都会重新发出请求。
如下图，勾选前可以看到某些请求返回的是 304。勾选禁用缓存后，每个请求返回的都是 200，可以看到没有请求是通过缓存来获取数据的了
禁用前：
禁用后：
扫一扫
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
