调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题,降低故障概率,帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要。
本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白。
除了<代码> console.log>
有时候我们需要看一些复杂的对象的详细信息,最简单的方法就是用<代码> console.log 然后展示成一个列表状,上下滚动进行浏览。不过似乎用<代码> console.table 展示成列表会更好呦,大概是介个样子: 这边就可以清晰地看出func1调用了func2,然后调用了func4, func4创建了汽车的实例然后调用了car.funcX。 有时候在生产环境下我们发现了一些莫名奇妙的问题,然后忘了把sourcemaps放到这台服务器上,或者在看别人家的网站的源代码的时候,结果就看到了一坨不知道讲什么的代码,就像下图.Chrome为我们提供了一个很人性化的反压缩工具来增强代码的可读性,大概这么用:
var汽车;
var func1=function () {
func2 ();
}
var func2=function () {
func4 ();
}
var func3=function () {
}
var func4=function () {
车=新车();
car.funcX ();
}
var车=function () {
这一点。品牌=拔侄帧?
这一点。颜色=昂焐?
这一点。funcX=function () {
this.funcY ();
}
这一点。funcY=function () {
this.funcZ ();
}
这一点。funcZ=function () {
控制台。trace(“跟踪汽车”)
}
}
func1 ();
