黑马程序员技术交流社区

标题: 【广州前端】--js中的调试技巧小tips [打印本页]

---

作者: 李盼盼老师    时间: 2017-12-17 13:14
标题: 【广州前端】--js中的调试技巧小tips

js中的调试技巧小tips（一）

查看更多精彩前端资源

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

【小技巧】

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

     

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2