web前端调试的一些小技巧 前端页面如何调试

最近在做一个大型web工具的维护性开发，项目已经成型，业务很复杂，之前的经验多是开发一个新的页面或者模块，或者维护自己开发的代码，对于调试的要求没有那么高，接到这个项目后，以前那种简陋低效的调试方法不管用了，学习了一些调试的小技巧，在此分享。

1.从控制台的Sources搜索到源文件打断点

这个方法比在代码里写“debugger”或者“console.log”高效很多

打开源文件，在控制台Resources面板下输入 ctrl+P，如图：

打断点：点击代码前的数字，会变成一个蓝色的小箭头，当程序运行到这一行代码时就会停下来，鼠标放到这一步之前的变量上面，会显示这个变量当前的值，比在代码里console.log便捷多了，此时回到console面板，直接输入在当前上下文下的变量，可以打印出具体的值,鼠标放在执行过代码的变量上，就能直接看到其值，非常方便。

调试：右边面板上有一些操作的小按钮，鼠标放上去会解释用途，可以单步调试，也可以进入某一步的方法里

2.打点计时（console.time()）

在进行网页性能优化的时候，需要知道一段程序的运行用了多久，有一个快捷的方法，在程序开始的地方，输入console.time("起一个名字")，结束的地方输入console.timeEnd("你刚才起的名字")，控制台会把这段程序运行的时间打印出来。

3.控制台打印对象或数组(console.table())

使用这个打印的命令，你会有耳目一新的发现，控制台也可以像网页一样输出清晰美观的表格