以下内容是关于如何调试javascript的相关知识，以及有哪些建议和技巧。详情请见下文。

浏览器工具。

个人最喜欢Chrome开发者工具。Safari和Firefox虽然达不到Chrome的高标准，但也在逐步提升。在Firefox中，您可以将Firebug与Firefox开发工具相结合。如果Firefox团队在改进内置开发工具方面继续表现出色，Firebug可能有一天会被淘汰。

抛开您的个人偏好，您应该能够在目标浏览器中测试和调试任何代码。您的目标浏览器可能包含也可能不包含著名的IE8。熟悉您选择的开发工具。您还可以从IDE(集成开发环境)或第三方软件获得额外的调试支持。

在各种调试工具中，调试的基础知识是一样的。事实上，我是在90年代从Borland的C开发者环境中学到调试基础的。断点、条件断点和监控与最新版本的Chrome开发工具完全相同。大约在2000年，我在Java中捕捉到了第一个异常。堆栈跟踪的概念仍然适用，即使JavaScript术语称之为错误，检查堆栈跟踪仍然像以前一样有用。

有些知识点是前端开发独有的。例如：

检查DOM断点调试事件内存泄漏分析。

断点

您可以使用调试器语句向源代码添加断点。一旦到达调试器语句，执行就会中断。当前范围的上下文以及所有本地和全局变量都显示在控制台中。将鼠标光标移动到变量上以查看其值。

您也可以在代码中创建条件断点：

Java Script语言

if(条件){调试器；}您也可以根据自己的需要在开发工具中插入断点和条件断点。在Chrome开发工具中，单击源代码视图中的行号以添加断点。如果右键单击断点并选择编辑断点，也可以添加断点条件。

节点更改的断点。

如果你的任务是调试垃圾代码，你可能会有这样的疑问：为什么DOM节点在执行过程中会发生变化？Chrome开发工具提供了一个方便的断点，可以用来检测元素树中的节点变化。

在“元素”视图中，右键单击一个元素，然后从右键菜单中选择“打断.”。

节点更改的断点。

DOM断点的类型可能包括：

选定节点的子树中的节点发生变化，选定节点的属性发生变化，节点被删除。

避免记录引用类型。

记录对象或数组时，原始类型的值可能会在引用对象记录中发生变化。查看引用类型时，一定要记住，在记录和查看过程中，代码执行可能会影响观察到的结果。

例如，在Chrome开发工具中执行以下代码：

Java Script语言

var钱包=[{ amount : 0 }]；setInterval(function(){ console . log(钱包，钱包[0]，钱包[0])。金额)；钱包[0]。金额=100；}, 1000 );记录的第二个和第三个属性的值是正确的，并且第一个属性中的对象引用的值不可靠。当您第一次在开发工具中显示此属性时，金额字段的值已经确定。无论关闭和重新打开同一个引用多少次，该值都不会改变。

记录引用类型

永远记住你正在录制的内容。录制原始类型时，使用带断点的观察表达式。如果是异步代码，请避免记录引用类型。

表格记录

在一些开发工具中，可以使用console.table在控制台中记录对象数组。

尝试在您的Chrome开发工具中执行以下代码：

Java Script语言

console.table([ { id: 1，名称： 'John '，地址： 'Bay street 1' }，{ id: 2，名称： 'Jack '，地址： 'Valley road 2 '}，{ id: 3，姓名： 'Jim '，地址： 'Hill street 3 '} ] );输出是一个非常漂亮的表。所有原始类型都会立即显示，它们的值反映了录制时的状态。也可以录制复杂类型，显示的内容就是它的类型，不能显示内容。因此，console.table只能用于显示由具有原始类型值的对象组成的二维数据结构。

XHR断点

有时您可能会遇到错误的AJAX请求。如果您不能立即确认提交请求的代码，XHR断点可以节省您的时间。当提交特定类型的AJAX时，XHR断点将终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发工具的源代码选项卡中，断点类型之一是XHR断点。点击图标，可以输入网址片段。当这个网址片段出现在AJAX请求的网址中时，JavaScript代码将被中断。

事件侦听器断点

Chrome工具可以捕捉各种事件，当用户按键点击鼠标时，可以对触发的事件进行调试。

异常时暂停。

当抛出异常时，Chrome工具可以暂停JavaScript代码。这允许您在创建错误对象时观察应用程序的状态。

异常时暂停。

代码片段

“源”选项卡的左侧面板上有一个“代码片段”子选项卡，可用于保存代码片段并帮助您调试代码。

如果您坚持使用控制台进行调试，并一遍又一遍地编写相同的代码，那么您应该将代码抽象成调试片段。这样，你甚至可以把你的调试技巧教给你的同事。

Paul Irish发布了一些基本的调试代码片段，比如在函数执行之前插入断点。查看这些代码片段并在互联网上搜索其他代码片段非常有价值。

在函数执行前插入断点。

如果能得到函数调用的源代码，还可以在函数调用前插入断点，终止函数的执行。如果要调试f函数，可以使用debug(f)语句增加此断点。

最小化不一致的代码。

(译者注：不混淆解压缩和防混淆)

尽可能使用源地图。有时生产代码不能使用源代码映射，但在任何情况下，您都不应该直接调试生产代码。

(译者注：sourcemap是一个用于压缩和合并web代码的调试工具)

没有源图，你最终可以转向Chrome开发者工具“源”标签中的“漂亮打印”按钮。格式按钮{}位于源代码的文本区域下方。格式按钮美化了源代码，更改了行号，使得调试代码更加方便，堆栈跟踪更加有效。

只有在必要时才会使用格式按钮。从某种意义上说，丑陋的代码就是丑陋的，因为代码中的命名没有明确的语义。

DOM元素的控制台书签。

Chrome开发者工具和Firebug都提供了书签功能，用来显示你在元素选项卡(Chrome)或者HTML选项卡(Firebug)中最后点击的DOM元素。如果依次选择元素A、元素B和元素C，

c元素为$0，b元素为$1，a元素为$2。如果您再次选择元素d，$0、$1、$2和$3分别代表d、c、b和a。

存取栈

Java Script语言

var f=function(){ g()；} var g=function(){ h()；} var h=function(){ console . trace(' trace in h ')；} f()；Chrome开发工具中的Sources选项卡也显示了Watch表达式下的调用堆栈。

业绩审查

绩效评估工具通常非常有用。这些工具可以用来防止内存泄漏，并检测您的网站需要优化的地方。由于这些工具不了解您的产品，您可以忽略它们的一些建议。一般来说，性能分析工具可以有效地优化您的网站。

审查工具示例：

Chrome开发工具的审核选项卡YSlow。

熟能生巧

您可能熟悉一些调试技术，其他技术会为您节省大量时间。如果你开始在实践中使用这些技巧，我建议你在几周内重新阅读这篇文章。你会惊讶地发现你的注意力在几周内发生了变化。

五种常用的js调试工具。

JavaScript被称为基于原型的语言。该语言具有动态、弱类型等特点，还具有一级功能。另一个特点是它是一种多范式语言，支持面向对象、声明性和功能性的编程风格。

JavaScript最初被用作客户端语言，浏览器实现它是为了提供增强的用户界面。JavaScript被用于许多现代网站和网络应用程序中。JavaScript的一个很棒的功能也很重要，那就是我真的可以用它来改善或者提高网站的用户体验。JavaScript还可以提供丰富的功能和交互组件。

随着这项技术的快速发展，JavaScript变得非常流行。因为流行的JavaScript也改进了很多，修改JavaScript脚本有很多事情要做。这次，我们为开发人员带来了几个有用的JavaScript调试工具。

1)果蝇

您可以调试任何WebKit程序，而不仅仅是Safari浏览器。

2)蜻蜓

源视图有语法高亮显示，并且可以设置断点。强大的搜索功能，支持正则表达式。

3)Getfirebug

您可以在任何网页上实时编辑、调试和监控CSS、HTML和JavaScript。

4)Debugbar

5)文克曼

Venkman是Mozilla的JavaScript调试器名称。它旨在为基于Mozilla的浏览器(Firefox、Netscape 7.x/9.x和Seamonkey)提供一个强大的JavaScript调试环境。

以上内容是关于如何调试JavaScript的一些建议和技巧，以及五种常用调试工具的相关说明。希望大家都喜欢。