9种使用Chrome Firefox 自带调试工具调试javascript技巧

JavaScript调试技巧概述

在开发过程中，我们通常依赖Chrome或Firefox内置的开发者工具来调试JavaScript代码。本文梳理了若干实用的调试技巧，掌握这些方法有助于缩短排查错误和Bug的时间，从而提升整体开发效率。

基础调试与数据展示技巧

1. debugger语句的使用

除了常用的console.log，debugger是我们偏好且高效的调试手段。代码执行到该语句时，浏览器会自动暂停。你可以将其封装在条件判断中，确保仅在特定需求触发时执行暂停操作。

if (thisThing) { 
 debugger; 
}

2. 利用表格展示对象数据

当需要查看一组复杂对象时，仅使用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() 测试循环

若需获取特定代码段的执行耗时，尤其是调试运行缓慢的循环逻辑时，此方法非常有效。你可以通过传入不同的参数名称来设置多个独立的计时器。具体运行方式如下所示：

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

执行上述代码后，控制台将输出相应的计时结果。

代码处理与函数监控

5. 调试前对代码进行格式化

有时代码在生产环境中出现异常，但Source Maps并未部署至生产环境。此时无需担忧，Chrome支持对JavaScript文件进行格式化操作。尽管格式化后的代码可读性不如源码，但它能帮助你了解代码的实际执行状态。只需点击Chrome控制台源代码查看器中的“{}”按钮即可实现。

6. 监控特定函数的调用及参数 在Chrome控制台中，你可以设置对特定函数的观察。每当该函数被调用时，控制台会自动打印出传入的参数值。

var func1 = function(x, y, z) { 
//.... 
}; 

控制台输出示例如下：

这是检查传入函数参数的有效方式。如果控制台能额外提示形参数量，将更为理想。以上述例子为例，func1期望接收3个参数，但实际只传入了2个。若代码中未对此进行妥善处理，极有可能引发错误。

DOM操作与网络请求调试

7. 在控制台中快速访问DOM元素

在控制台中，比querySelector更快捷的方法是使用美元符号。$('css-selector')将返回匹配CSS选择器的第一个元素，而$$('css-selector')则返回所有匹配项。若需多次使用某一元素，可将其保存为变量以便复用。

8. Postman虽好，但Firefox操作更便捷

许多开发人员使用Postman来查看Ajax请求。Postman功能强大，但打开新窗口、编写请求对象再进行测试的过程略显繁琐。

有时直接在浏览器中进行操作更为简便。

当通过浏览器查看请求时，若涉及密码验证页面，无需担心身份验证Cookie的问题。以下演示如何在Firefox中编辑并重新发送请求。

打开控制台并切换到Network（网络）选项卡。右键单击目标请求，选择“编辑并重新发送”（Edit and Resend）。此时你可以修改任意参数，例如更改标题或编辑请求体，然后点击“重新发送”即可。

下面展示了使用不同属性发起的两次请求对比：

DOM状态监控与总结

9. 中断节点更改

DOM结构有时会发生变化，且原因不明。但在调试JavaScript时，Chrome允许你在DOM元素发生更改时自动暂停执行。你甚至可以监控其属性变化。在Chrome控制台中，右键点击目标元素，在设置中选择“中断”（Break on）相关选项即可。

Chrome和Firefox自带的网页调试工具功能十分强大，其中许多实用的小功能仍有待开发者进一步发掘。