浏览器的开发者工具
我个人喜欢Chrome开发者工具。虽然Safari和Firefox浏览器不能满足高标准，他们也在提高。在Firefox，萤火虫和Firefox开发者工具可以结合使用。如果Firefox团队不断提高内置的开发工具做得好，可以消除一天的萤火虫。
第一，把个人的喜好放在一边，你应该能够在目标浏览器测试和调试代码。你的目标可能包括著名的IE8浏览器，或者不。
熟悉您所选择的开发工具，还可以从IDE（集成开发环境）或第三方软件中获得额外的调试支持。
在各种调试工具，调试的基本知识是相通的。事实上，我正在调试的基础上，我从Borland的C开发环境在90年代的教训。断点，条件断点，并监测同样是Chrome开发者工具的最新版本。2000左右，我陷入了java第一个例外。堆栈跟踪的概念仍然适用。即使Javaｓｃｒｉｐｔ术语称之为错误，检查堆栈跟踪仍然和以前一样有用。
一些知识点对于前端开发是独一无二的：
DOM检查
DOM断点
调试事件
内存泄漏分析
断点
使用调试器语句可以向源代码添加断点。一旦到达调试器语句，就执行中断。当前作用域的上下文出现在控制台中，以及所有本地和全局变量。
条件断点也可以在代码中创建：
Javaｓｃｒｉｐｔ
如果（条件）{
调试器；
}
你也可以插入断点和条件断点在开发者的工具根据您的需要。在Chrome开发者工具，点击来源查看在线人数可以增加断点。如果你点击右键并选择断点断点编辑（编辑断点），你也可以增加断点条件。
节点更改断点
如果您的任务是调试垃圾代码，那么您可能会遇到这样的问题：为什么DOM节点在执行过程中发生了变化，Chrome开发工具提供了一个方便的断点，可以用来检测元素树中节点的变化。
在元素视图中，右键单击一个元素，然后从右键菜单中选择中断。
节点更改断点
DOM断点的类型可能包括：
所选节点子树节点（子树）在，
所选节点更改的属性，
删除节点。
避免记录引用类型
当记录对象或数组时，原始类型的值可能在引用的对象记录中发生变化。当您查看引用类型时，请记住，在记录和查看期间，代码执行可能会影响所观察到的结果。
例如，下面的代码是在Chrome开发工具中执行的：
Javaｓｃｒｉｐｔ
var钱包=数量：0 } { { }；
setInterval（）{（）函数（
console.log（钱包，钱包，钱包，{ 0 }，{ 0 }。金额）；
钱包{ 0 }。金额= 100；
}，1000）；
对记录的第二和第三属性的值是正确的，并在第一个属性的对象引用的值是不可靠的。当你第一次显示该属性的开发者工具，量的域值来确定的。不管你多少次关闭相同的参考和重新打开的价值不会改变。
记录参考类型
始终记住您录制的内容。当原始类型被记录时，使用带有断点的表表达式。如果是异步代码，请避免记录引用类型。
表记录
在一些开发工具，你可以使用console.table记录在控制台对象数组。
尝试在您的Chrome开发工具中执行以下代码：
Javaｓｃｒｉｐｔ
Console.table（
{
{
身份证：1，
姓名：约翰，
地址：'bay街1号'
}，
{
身份证：2，
名称：杰克，
地址：'valley路2号。
}，
{
身份证：3，
名称：吉姆，
地址：'hill街3号。
}
}）；
输出是一个很好的表。所有的原始类型是立即显示，和他们的价值观是对记录的状态，也可以记录复杂的类型，显示的内容是其类型和内容无法显示。因此，console.table只能用来显示二维数据结构由原始类型的值对象。
XHR断点
有时你可能会遇到一个错误的Ajax request.xhr断点可以节省你的时间，如果你不能立即确认代码提交请求。当某一特定类型的Ajax提交，XHR断点将终止执行的代码，并向用户提交请求。
在Chrome开发者工具的源标签页，一个断点类型是XHR断点。点击+图标，你可以输入URL片段和Javaｓｃｒｉｐｔ代码将被中断，当URL片段出现在Ajax请求的URL。
事件监视器的断点
Chrome开发工具可以捕获所有类型的事件，当用户按下键并单击鼠标时，可以触发触发事件。
异常的停顿
当抛出异常时，Chrome开发工具可以暂停Javaｓｃｒｉｐｔ代码的执行。这允许您在创建错误对象时观察应用程序的状态。
异常的停顿
代码段
有一个代码片段（片段）sublabel页面的源标签页的左侧，可以用来保存代码片段来帮助你调试代码。
如果您坚持使用控制台反复调试和编写相同的代码，则应该将代码抽象为一个调试片段，这样您甚至可以教您的同事调试技能。
保罗爱尔兰已经发布了一些基本的调试代码片段，比如在函数执行前插入断点，这对于回顾代码片段和在因特网上搜索其他代码段是很有价值的。
在执行函数之前插入断点
如果你能得到函数调用的源代码，你也可以在函数调用之前插入一个断点来终止函数的执行。如果你想调试f函数，你可以用调试（f）语句来添加这个断点。
unminify最小化代码
（注：unminify减压和抗混淆）
尽可能使用源映射，有时生产代码不使用源代码映射，但无论如何不应调试生产代码。
（sourcemap是调试工具合并网页代码）
如果你没有源地图，你终于可以把格式化按钮（漂亮的打印按钮）在Chrome开发者工具源标签页。位于源代码格式化按钮下面的文本区域内{ }。格式按钮美化源码和变化的线数，使调试代码更方便和堆栈跟踪更高效。
格式按钮只在不允许的情况下使用，在某种意义上，难看的代码很难看，因为代码中的名称没有明确的语义。
DOM元素控制台书签
Chrome开发者工具和Firebug显示在元素选项卡页面DOM元素上单击提供书签功能（铬）或HTML标签页（萤火虫）。如果你选择一个元素，B元素，反过来C单元，
$ 0代表C元素
1美元代表B元素
2美元代表一个元素
如果您选择了d元素，那么0美元、1美元、2美元和3美元分别代表D、C、B和A。
访问调用堆栈
Javaｓｃｒｉｐｔ
函数（））
函数（））
var =函数（）{ console.trace（'trace H '）；}
（f）；
Chrome开发工具中的源标记页也在表表达式下显示调用堆栈。
业绩回顾
绩效考核通常是有用的工具。这些工具可以用来防止内存泄漏，还可以检测你的网站需要优化，因为这些工具不了解你的产品，你可以忽略一些建议。一般来说，性能分析工具可以有效的使你的网站明显优化。
审查工具的一个示例：
Chrome开发工具的审核标记页
YSlow
技能来自实践
你可能对一些调试技巧很熟悉，而其他技能会节省你很多时间。如果你在实践中开始使用这些技巧，我建议你在几周后重读这篇文章。你会惊讶地发现你的注意力在几周内就改变了。
五种常见的JS调试工具
Javaｓｃｒｉｐｔ是一种基于原型的语言，它具有动态类型和弱类型等特点，具有一类函数，另一个特点是支持面向对象、声明式和函数式编程风格的多范型（多范型）语言。
Javaｓｃｒｉｐｔ最初是作为一个客户端和浏览器的实现语言，它提供增强的用户interface.javaｓｃｒｉｐｔ用于许多现代的网站和Web应用程序。一个Javaｓｃｒｉｐｔ的强大功能也很重要，我可以用它来改善或提高网站的用户体验site.javaｓｃｒｉｐｔ还可以提供丰富的功能和交互式组件。
Javaｓｃｒｉｐｔ随着这项技术的迅速发展而变得非常流行，因为流行的Javaｓｃｒｉｐｔ已经有了很大的改进，Javaｓｃｒｉｐｔ脚本的修改还有很多工作要做，这次我们为开发者带来了一些非常有用的Javaｓｃｒｉｐｔ调试工具。
1）茅膏菜
你可以调试任何开源程序，不只是一个Safari浏览器。
2）dranfly
源视图是语法高亮显示，可以设置断点。一个强大的支持正则表达式的搜索函数。
3）getfirebug
您可以在任何网页上编辑、调试和监视CSS、HTML和Javaｓｃｒｉｐｔ。
4）DebugBar
5）发生了
Venkman是Mozilla的Javaｓｃｒｉｐｔ调试器的名称。它的目的是提供一个强大的Javaｓｃｒｉｐｔ调试环境为基于Mozilla的火狐浏览器（Netscape 7，X／9。x和SeaMonkey）。
以上内容是关于如何调试Javaｓｃｒｉｐｔ有哪些建议和技术以及五种常用调试工具的相关说明，希望大家喜欢。
