浅析JavaScript 调试方法和技巧
111 浏览量
2020-11-22
05:46:33
上传
评论
收藏 297KB PDF 举报
浅析浅析JavaScript 调试方法和技巧调试方法和技巧
javascript简称JS,是网页的前端开发语言,直接运行在浏览器上,以前我刚开始学的时候,并不懂这个,所以我每次开发或调试它,都
是在vs.net里面,现在想想,实在是太痛苦了,其实JS是执行在浏览器的,而不是执行在服务器的,所以根本没必要在网页开发软件
里搞,直接在浏览器中即可调试
浏览器开发者工具浏览器开发者工具
我个人最喜欢Chrome开发者工具。 虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。在Firefox
中，可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有
一天可能会被淘汰。
先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括著名的IE8，也可
能不包括。
要熟悉你自己选择的开发者工具。你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。
在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。断点、
条件 断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack
traces）的概念依然适用，即使J avaScript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。
有些知识点是前端开发特有的。例如：有些知识点是前端开发特有的。例如：
DOM检查
DOM断点
调试事件
内存泄露分析
断点
使用 debugger 语句可以在源代码中增加断点。一旦到达 debugger 语句，执行中断。当前作用域的上下文出现在控制台中，
还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。
在代码中还可以创建条件断点：
JavaScript
if (condition) {
debugger;
}
还可以 根据自己需要 在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断
点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。
节点变化的断点节点变化的断点
如果你的任务是调试垃圾代码，你 可能会有这样的问题： 为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提
供了一种方便的断点，可用来 检测 元素树中的节点变化。
在Elements视图中，右键 点击 一个元素，从右键菜单中选择“Break on…”。
资源评论
