javaWeb前端调试的三种方法

前端调试常用三种方法

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，可以看到没有请求是通过缓存来获取数据的了

禁用前：

禁用后：