js中的调试技巧小tips(一)

文章2019-05-05156 人已阅来源:网络

调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等。下面给大家介绍的是出了除了在浏览器中断点调试外,一些辅助的小技巧!

1. debugger;

‘debugger’ 是 console.log 之外我最喜欢的调试工具,简单暴力。只要把它写到代码里,Chrome 运行的时候就会自动自动停在那。你甚至可以用条件语句 把它包裹起来,这样就可以在需要的时候才执行它。

假如我的代码如下:

页面打开后,在页面中会出现这个提示

打开控制台,结果如下,代码停留在了debugger的46行;

点击一下箭头,代码就继续执行

2. 把 objects 输出成表格

有时候你可能有一堆对象需要查看。你可以用 console.log 把每一个对象都输出出来,你也可以用console.table 语句把它们直接输出为一个表格!

var animals = [
{ animal:'Horse', name: 'Henry', age: 43 },
{ animal:'Dog', name: 'Fred', age: 13 },
{ animal:'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

3. 试遍所有的尺寸

虽然把各种各样的手机都摆在桌子上看起来很酷,但这却很不现实。为什么不选择直接调整界面大小呢? Chrome 浏览器提供了你所需要的一切。 进入检查面板点击 ‘切换设备模式’ 按钮,这样你就可以调整视窗的大小了!

4. 用console.time() 和 console.timeEnd() 测试循环耗时

当你想知道某些代码的执行时间的时候这个工具将会非常有用,特别是当你定位很耗时的循环的时候。你甚至可以通过标签来设置多个 timer 。

demo 如下:

console.time('Timer1');
var items = [];
for(var i = 0; i < 100000; i++){
items.push({index:i});
}
console.timeEnd('Timer1');

测试结果如下:

5. 格式化代码使调试 JavaScript 变得容易

6.  屏蔽不相关代码

如今,经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是,调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。

下面,比如我要屏蔽掉jquery的代码

F12之后,鼠标移到三个小点那里,选择settings点击

在settings界面,选择blackboxing,然后点击右边的Add pattern,添加jquery