如何调试JS?

如何调试JS?

目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的：1、在F12开发人员工具中进行调试打开IE浏览器，按下F12键，就会打开开发人员工具，这是IE内置的开发人员开发工具，方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部，可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页，分别是：HTML、CSS、控制台、脚本、探查器和网络，点开每一个标签，可以执行相应的任务。在HTML标签窗口中，工具栏中的按钮所执行的操作如下图：CSS标签是用来查看样式的；控制台显示网页中JS的各种输出信息，包括错误信息、用户日志等；打开脚本标签页，这里面才是我们想要的内容。我在图中用黄色矩形选中连个控件，左侧的下拉列表用来选择文件，右侧的按钮用来启动调试。当点击启动调试后，调试程序会将窗口最大化，我们在选中的文件中找到需要调试的位置，点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时，就可以进行调试了：在这里，我们可以使用快捷键进行操作，常用的快捷键如下：F9：添加/移除 断点F10：逐过程，即跳过该语句中的方法、表达式等F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试在执行过程中，如果我们要执行即时的代码，我们就需要在右侧的窗格中输入代码，按回车即可：如果要执行多行代码，点击运行按钮右侧的双箭头，就会打开多行模式。我就不再截图片了。这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug，只不过在细枝末叶上面有些不同罢了，主体的功能都是一样的。

按F12键进入开发者工具，可以查看源代码、样式和js：点击Scripts按钮，可以打开这个调试窗口，里面包含了网页中脚本文件源码，点击左侧的按钮可以打开选择文件的侧窗口。2、使用debugger关键字进行调试这种方法很简单，我们只需要在进行调试的地方加入debugger关键字，然后当浏览器运行到这个关键字的时候，就会中断：设置以后就可以使用debugger关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。

Javascript如何调试有哪些建议和技巧附五款有用的调试工具

浏览器开发者工具 我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。

在Firefox中，可以将Firebug和Firefox开发者工具组合使用。

如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有一天可能会被淘汰。 先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括著名的IE8，也可能不包括。要熟悉你自己选择的开发者工具。

你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。 在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。

断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack traces）的概念依然适用，即使Javascript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。

有些知识点是前端开发特有的。例如： DOM检查DOM断点调试事件内存泄露分析 断点 使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。

当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。 在代码中还可以创建条件断点： Javascript if (condition) { debugger;} 还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。

如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。 节点变化的断点 如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。 在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。

节点变化的断点 DOM断点的类型可能包括： 选定节点树状子目录（sub-tree）中的节点变化，选定节点的属性发生变化，节点被删除。 避免记录引用类型 当记录对象或数组时，原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果。 例如，在Chrome开发者工具中执行以下代码： Javascript var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100;}, 1000 ); 记录的第二个和第三个属性的值是正确的，第一个属性中对象引用的值是不可靠的。

当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次，这个值都不会变化。 记录参考类型 永远记得你在记录什么。

记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。 表格记录 在一些开发者工具中，你可以用console.table在控制台中记录对象数组。

尝试在你的Chrome开发者工具中执行下列代码： Javascript console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] ); 输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此，console.table只能用来显示具有原始类型值的对象构成的二维数据结构。

XHR断点 有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。

在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，Javascript代码将会中断。 事件监听器断点 Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。 异常时暂停 Chrome开发者工具可以在抛出异常时暂停执行Javascript代码。

这可以让你在Error对象被创建时观察应用的状态。 异常时暂停 代码片段 Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。 如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。

这样的话，甚至还可以把你的调试技巧教给你的同事。 Paul Irish发布过一些基本的调试代码片段，例如在函。

如何调试Javascript代码

初级调试，也就是用alert来调试。比如弹出一个变量值，看看这个变量值是不是预想中滴结果，当然用alert调试起来有很大的限制，现在已经用的不多了，而且用户还可以重写alert事件，如果把alert屏蔽掉了，那么就彻底无用了，当然有时候也还是挺管用的。

中级调试，也就是用调试工具调试。

一般来说，现在的浏览器都自带了JS调试工具，如IE8-IE11，Chrome，火狐（最好装上Debug），Safari等，按F12呼出调试界面。以下用Chrome来说，按F12，选择选项卡的Source选项，接着点击右上角的三角形，选择你要调试的JS文件（如test.js），然后在你需要调试的代码段前面单击鼠标左键就添加了一个断点，这个时候当代码运行到这个地方的时候就会停止下来了，把鼠标移动对应的变量上面去就能显示出该变量的值什么的，还可以在变量上面单击右键添加监视等。

如何调试html网页中的js代码

以谷歌浏览器Chrome为例（火狐类似），说下前端打“断点”： 一、按F12快捷键打开Chrome控制台，点击“Sources”选项卡，如图： 二、刷新当前网页，代码执行到“断点”处会停住，如上图蓝色区域； 三、按F8快捷键可以在不同的断点之间切换、按F10快捷键程序代码会一步步执行，这样就能很方便定位到错误区域，排查错误。 说明：火狐浏览器的操作方法和谷歌类似，当然界面略有不同。

如何在google chrome浏览器中调试Javascript

google chrome浏览器不仅性能出色，对web标准的支持是非常优异的。其调试开发也比较方便（自动识别debugger断点、支持动态设置断点、可以查看参数和本地变量、可以单步执行等）。

开发人员 ——> 调试Javascript——>打开Javascript调试页（快捷键好像是ctrl+shift+l）。

输入h（或者help）可以查看各种调试选项。如果已经在js代码中设置了断点（debugger关键字），则保持Javascript调试器启动（打开）状态，再刷新待调试页面，就可以自动识别debugger关键字声明的断点，用户可以输入各种调试命令。这时候可以输入h，查看新的调试命令，比如args--查看函数参数，l（或者locals）--查看函数内部本地变量，n（或者next）等。感兴趣的可以看看其调试器源码，也是使用Javascript实现的。

可以把它扩展成像firebug那样强大的东东。至少这个调试器是浏览器内置的，不用担心插件兼容性。实现firebug那些console api才是关键。

在Javascript中如何做控件测试

不太清楚你说的控件测试是指的什么，一般前端测试js的话，如果测试数据提交响应使用抓包工具fillder或者其它的进行抓包以及伪造测试数据，浏览器的话IE的httpwatch，火狐的firebug，谷歌的chrom都是不错的测试工具，我们可以看到页面的情况，js信息传输包，以及语法错误报错控制台，甚至可以写一些js语法，在开发工具中直接进行验证，另外js语法中常用来测试的语句是alert，console，希望对你有帮助~