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
语句,执行中断。当前作用域的上下文出现在控制台中,还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。
在代码中还可以创建条件断点:
1
2
3
|
if (condition) {
debugger;
}
|
还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中,在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点(Edit Breakpoint)”,你还可以增加断点条件。
节点变化的断点
如果你的任务是调试垃圾代码,你可能会有这样的问题:为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点,可用来检测元素树中的节点变化。
在Elements视图中,右键点击一个元素,从右键菜单中选择“Break on…”。
节点变化的断点
DOM断点的类型可能包括:
- 选定节点树状子目录(sub-tree)中的节点变化,
- 选定节点的属性发生变化,
- 节点被删除。
避免记录引用类型
当记录对象或数组时,原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住,在记录和查看期间,代码执行可能会影响观测到的结果。
例如,在Chrome开发者工具中执行以下代码:
1
2
3
4
5
6
|
var wallets = [{ amount: 0 }];
setInterval( function() {
console.log( wallets, wallets[0], wallets[0].amount );
wallets[0].amount += 100;
}, 1000 );
|
记录的第二个和第三个属性的值是正确的,第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时,amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次,这个值都不会变化。
记录参考类型
永远记得你在记录什么。记录原始类型时,使用带断点的watch表达式。如果是异步代码,避免记录引用类型。
表格记录
在一些开发者工具中,你可以用console.table
在控制台中记录对象数组。
尝试在你的Chrome开发者工具中执行下列代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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发布过一些基本的调试代码片段,例如在函数执行前插入断点。审查这些代码片段,并在网上搜索其他代码片段,这是很有价值的。
在函数执行前插入断点
如果你可以得到函数调用的源代码,你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f
函数,用debug(f)
语句可以增加这种断点。
Unminify最小化代码
(译者注:unminify 解压缩并进行反混淆)
尽可能使用 source map。有时生产代码不能使用source map,但不管怎样,你都 不应该直接对生产代码进行调试。
(译者注:sourcemap 是针对压缩合并后的web代码进行调试的工具)
如果没有source map的话,你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮(Pretty Print Button)。格式化按钮{}
位于源代码文本区域的下方。格式化按钮对源代码进行美化,并改变行号,这使得调试代码更加方便,堆栈跟踪更加有效。
格式化按钮只有在不得已时才会使用。从某种意义上来说,丑代码就是难看,因为代码中的命名没有明确的语义。
DOM元素的控制台书签
Chrome开发者工具和Firebug都提供了书签功能,用于显示你在元素标签页(Chrome)或HTML标签页(Firebug)中最后点击的DOM元素。如果你依次选择了A
元素、B
元素和C
元素,
$0
表示C
元素$1
表示B
元素$2
表示A
元素
如果你又选择了元素D
,那么$0
、$1
、$2
和$3
分别代表D
、C
、B
和A
。
访问调用栈
1
2
3
4
5
|
var f = function() { g(); }
var g = function() { h(); }
var h = function() { console.trace('trace in h'); }
f();
|
Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。
性能审查
性能审查工具通常是很有用的。这些工具可以用于防止内存泄露,还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品,你可以忽略其某些建议。通常来说,性能分析工具能够有效范围,可以使你的网站显著优化。
审查工具举例:
- Chrome开发者工具的Audit标签页
- YSlow
熟能生巧
你可能熟悉某些调试技巧,其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧,我建议你几周之后重新阅读本文。你将会惊奇地发现,你的关注点在几周内就发生了变化。
JavaScript 调试建议和技巧相关推荐
- Javascript 调试技巧
Javascript 调试技巧 在代码中寻找错误 1)alert 方法: 弹框提示 2)console 方法 在调试窗口上打印 JavaScript 值 3)断点调试 在浏览器开发者工具中为JS代码添 ...
- Vue.js 父子组件通信的十种方式;告诉世界前端也能做 AI;你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
- Chrome - JavaScript调试技巧总结(浏览器调试JS)
Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习 ...
- javascript调试_如何提高JavaScript调试技能
javascript调试 Almost all software developers who have written even a few lines of code for the Web ha ...
- iOS应用性能调优的25个建议和技巧【转】
转载自:http://blog.jobbole.com/37984/ 首页 最新文章 资讯 程序员 设计 IT技术 创业 在国外 营销 趣文 特别分享 更多 > - Navigation - 首 ...
- 为游戏开发者总结的20个 Unity 建议和技巧
Unity是一款非常流行的游戏开发软件.它的功能令人印象深刻,也能够适应不同的游戏开发要求.游戏开发人员可以使用Unity创建任意类型的游戏,从世界级的RPG游戏到最受欢迎的增强现实游戏Pokemon ...
- iOS应用性能调优的25个建议和技巧
写在前面 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelofabri.com/ ...
- IE6,7,8开发人员工具使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)
在上一篇文章IE8"开发人员工具"使用详解上(各级菜单详解) 中,我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法,相信很多朋友应该已经使用上了.而IE8开发人员工具更 ...
- [转]javascript常用的小技巧
javascript常用的小技巧 分类: javascript 2011-12-19 09:30 170人阅读 评论(1) 收藏 举报 事件源对象 event.srcElement.tagName e ...
最新文章
- 智办事协同办公:数字化转型下的高效工作方式
- 最高奖金5万|带打目标检测大赛!还给匹配神助攻队友!
- hihoCoder-1828 2018亚洲区预选赛北京赛站网络赛 A.Saving Tang Monk II BFS
- 用7*7的卷积核分类9*9的图片到底应该用几个卷积核?55个
- 21.println输出打印.rs
- python的scrapy框架的安装_Python爬虫基础(四)--Scrapy框架的安装及介绍
- twitter api_Java应用程序上的Twitter API
- 【数字信号处理】基于DFT的滤波系列1
- nginx post请求超时_nginx记录分析网站响应慢的请求(ngx_http_log_request_speed)
- 遍历矩阵每一行穷举_[LeetCode] 566. 重塑矩阵
- JavaScript中获取数组元素索引号方法
- 国科大学习资料--操作系统(杨力祥)--2015年思考题(含解答)
- 基于微信小程序的比赛报名系统
- PPAPI开发之路(四)PPAPI开发环境配置到第一个例子整理(详细总结整理,之前遇到的一些问题解决)
- cssie兼容性配置
- python3 subprocess.Popen监控控制台输出
- 5855. 找出数组中的第 K 大整数
- H5案例分享:jquery.qrcode.js生成简易二维码
- FFmpeg源码分析:swr_convert()音频格式转换
- 【Python】使用pandas_datareader获取股票信息并进行可视化分析
热门文章
- 【Android 逆向】x86 CPU 架构体系 ( 堆内存 | 栈内存 | 函数调用 )
- 【Java 虚拟机原理】Class 字节码二进制文件分析 二 ( 常量池位置 | 常量池结构 | tag | info[] | 完整分析字节码文件中的常量池二进制数据 )
- 【错误记录】Android Studio 编译报错 ( A problem occurred starting process ‘command ‘ninja.exe‘ ‘ )
- 【错误记录】Oboe / AAudio 播放器报错 ( onEventFromServer - AAUDIO_SERVICE_EVENT_DISCONNECTED - FIFO cleared )
- 【数据挖掘】高斯混合模型 ( 与 K-Means 每个步骤对比 | 初始参数设置 | 计算概率 | 计算平均值参数 | 计算方差参数 | 计算高斯分布概率参数 | 算法终止条件 )
- 【Android 属性动画】属性动画 Property Animation 简介 ( 属性动画简介 | 属性动画特性 )
- Linux 下 ps 命令的使用详解
- 破解win2003“终端服务器授权”激活许可证!
- 前端开发之JavaScript基础篇四
- C#文件夹权限操作工具类