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

文章2019-05-05650 人已阅来源：网络

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

1. debugger;

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

假如我的代码如下：

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

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

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

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

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

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

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

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);

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

3. 试遍所有的尺寸

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

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

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');

测试结果如下：

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

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

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

6. 屏蔽不相关代码

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

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

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

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

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

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

AIHX

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

1. debugger;

2. 把 objects 输出成表格

3. 试遍所有的尺寸

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

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

6. 屏蔽不相关代码

相关内容