![调试Node.js代码
• Eclipse
• Eclipse Debugger Plugin for V8
• 启动程序
• node
-‐-‐debug[=port]
app.js
• node
-‐-‐debug-‐brk[=port]
app.js
Using Eclipse as Node Applications Debugger](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-7-320.jpg)
![Source Map V3
{
"version":
3,
"file":
"all.min.js",
"lineCount":
37,
"sources":
[
"wind-‐core.js",
"wind-‐builderbase.js",
"wind-‐async.js",
"sorting-‐animations.aot.js"
],
"names":
[
"Wind",
"_",
"isArray",
"obj",
...
],
"mappings":
"AAAC,SAAS,EAAG,CAGT,IAAIA,
..."
}](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-20-320.jpg)
![Base64 VLQ解码
KAUYM,GAKoEF
>>
[10,
0,
20,
24,
12],
[6,
0,
10,
40,
4,
5]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-24-320.jpg)
![Base64 VLQ解码
KAUYM,GAKoEF
>>
[10,
0,
20,
24,
12],
[6,
0,
10,
40,
4,
5]
>>
[001010,
000000,
010100,
011000,
001100],
[000110,
000000,
001010,
101000,
000100,
000101]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-25-320.jpg)
![Base64 VLQ解码
KAUYM,GAKoEF
>>
[10,
0,
20,
24,
12],
[6,
0,
10,
40,
4,
5]
>>
最低N-‐1位为数据位
[001010,
000000,
010100,
011000,
001100],
01000,
00100
[000110,
000000,
001010,
101000,
000100,
000101]
最⾼高位表⽰示是否“连接后续数据”](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-26-320.jpg)
![Base64 VLQ解码
KAUYM,GAKoEF
>>
[10,
0,
20,
24,
12],
[6,
0,
10,
40,
4,
5]
>>
最低N-‐1位为数据位
[001010,
000000,
010100,
011000,
001100],
01000,
00100
[000110,
000000,
001010,
101000,
000100,
000101]
最⾼高位表⽰示是否“连接后续数据”
>>
[1010,
0,
10100,
11000,
1100],
[110,
0,
1010,
10001000,
101]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-27-320.jpg)
![数据解码
[1010,
0,
10100,
11000,
1100],
[110,
0,
1010,
10001000,
101]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-28-320.jpg)
![数据解码
[1010,
0,
10100,
11000,
1100],
[110,
0,
1010,
10001000,
101]
最⾼高N-‐1位为数据位 最低位为符号位](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-29-320.jpg)
![数据解码
[1010,
0,
10100,
11000,
1100],
[110,
0,
1010,
10001000,
101]
最⾼高N-‐1位为数据位 最低位为符号位
>>
[5,
0,
10,
12,
6],
[3,
0,
5,
68,
-‐2]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-30-320.jpg)
![数据解码
[1010,
0,
10100,
11000,
1100],
[110,
0,
1010,
10001000,
101]
最⾼高N-‐1位为数据位 最低位为符号位
>>
[5,
0,
10,
12,
6],
[3,
0,
5,
68,
-‐2]
>>
[5,
0,
10,
12,
6],
[8,
0,
15,
80,
4]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-31-320.jpg)
![含义
//
已确定⾏行号
[
5,
//
列号
0,
//
源⽂文件，从sources查找
10,
//
源⽂文件内⾏行号
12,
//
源⽂文件内列号
6
//
源⽂文件内标⽰示符，从names查找
]](https://image.slidesharecdn.com/slide-120914082531-phpapp01/85/JavaScript-32-320.jpg)
JavaScript现代化排错实践
- 1. JavaScript 现代化排错实践 赵劼 - 2012.9
- 2. 关于我 • 赵劼 / ⽼老赵 / Jeffrey Zhao / 赵姐夫 • ⽇日写代码三百⾏行，不辞⻓长作程序员 • 博客：http://blog.zhaojie.me/ • 微博：@⽼老赵 • F#, JavaScript, Scala, C#, Python, .NET, Mono... • 痛恨Java语⾔言
- 3. 内容提纲 • 代码调试检查 • 调⽤用堆栈分析 • 调试混淆代码 • Source Map
- 4. 代码调试
- 5. 代码调试 • 很久很久以前：alert • 过了⼀一段时间：console.log • 其实从IE 5时代开始便可以调试代码
- 7. 调试Node.js代码 • Eclipse • Eclipse Debugger Plugin for V8 • 启动程序 • node -‐-‐debug[=port] app.js • node -‐-‐debug-‐brk[=port] app.js Using Eclipse as Node Applications Debugger
- 8. 调试eval的代码 • 代码末尾：//@ sourceUrl=<path> • ⽀支持浏览器 • Chrome • Safari • Firefox (Firebug)
- 9. 调⽤用堆栈分析
- 10. 调⽤用堆栈
- 11. 命名函数表达式 // 函数定义 function Identifier(FormalParameterListopt) { FunctionBody } // 函数表达式 function Identifieropt(FormalParameterListopt) { FunctionBody } 命名函数表达式探秘
- 12. 分辨⼀一下 // 声明：程序的⼀一部分 function foo() { }; // 表达式：分组操作符中只能包含表达式 (function foo() { }); // 表达式：赋值表达式（AssignmentExpression）的⼀一部分 var bar = function foo() { }; // 表达式：New表达式（NewExpression）的⼀一部分 new function bar() { }; (function () { // 声明：函数体（FunctionBody）的⼀一部分 function bar() { }; })();
- 13. 调试混淆代码
- 14. 调试混淆代码
- 15. 格式化以后
- 16. 配合Source Map
- 17. Source Map • 记录⺫⽬目标代码到源代码的映射 • JSON格式 + 编码后的映射数据 • Source Map V3 Spec
- 18. Source Map • 记录⺫⽬目标代码到源代码的映射 • JSON格式 + 编码后的映射数据 • Source Map V3 Spec 脚本末尾加上：//@ sourceMappingURL=<path>，或 脚本请求头加上：X-‐SourceMap: <path>
- 19. 深⼊入Source Map
- 20. Source Map V3 { "version": 3, "file": "all.min.js", "lineCount": 37, "sources": [ "wind-‐core.js", "wind-‐builderbase.js", "wind-‐async.js", "sorting-‐animations.aot.js" ], "names": [ "Wind", "_", "isArray", "obj", ... ], "mappings": "AAAC,SAAS,EAAG,CAGT,IAAIA, ..." }
- 21. 解码 mappings 字段 • ⽤用分号区分“⾏行”，逗号区分“段”。 • Base64 Variable-Length Quantity 编码 • 节省空间，⽐比V2节省50%左右
- 22. 确定代码⾏行号 AABBC; // 第1⾏行 KAUYM,GAKoEF; // 第2⾏行 CCDD, ...; // 第3⾏行 ... ...
- 24. Base64 VLQ解码 KAUYM,GAKoEF >> [10, 0, 20, 24, 12], [6, 0, 10, 40, 4, 5]
- 25. Base64 VLQ解码 KAUYM,GAKoEF >> [10, 0, 20, 24, 12], [6, 0, 10, 40, 4, 5] >> [001010, 000000, 010100, 011000, 001100], [000110, 000000, 001010, 101000, 000100, 000101]
- 26. Base64 VLQ解码 KAUYM,GAKoEF >> [10, 0, 20, 24, 12], [6, 0, 10, 40, 4, 5] >> 最低N-‐1位为数据位 [001010, 000000, 010100, 011000, 001100], 01000, 00100 [000110, 000000, 001010, 101000, 000100, 000101] 最⾼高位表⽰示是否“连接后续数据”
- 27. Base64 VLQ解码 KAUYM,GAKoEF >> [10, 0, 20, 24, 12], [6, 0, 10, 40, 4, 5] >> 最低N-‐1位为数据位 [001010, 000000, 010100, 011000, 001100], 01000, 00100 [000110, 000000, 001010, 101000, 000100, 000101] 最⾼高位表⽰示是否“连接后续数据” >> [1010, 0, 10100, 11000, 1100], [110, 0, 1010, 10001000, 101]
- 28. 数据解码 [1010, 0, 10100, 11000, 1100], [110, 0, 1010, 10001000, 101]
- 29. 数据解码 [1010, 0, 10100, 11000, 1100], [110, 0, 1010, 10001000, 101] 最⾼高N-‐1位为数据位 最低位为符号位
- 30. 数据解码 [1010, 0, 10100, 11000, 1100], [110, 0, 1010, 10001000, 101] 最⾼高N-‐1位为数据位 最低位为符号位 >> [5, 0, 10, 12, 6], [3, 0, 5, 68, -‐2]
- 31. 数据解码 [1010, 0, 10100, 11000, 1100], [110, 0, 1010, 10001000, 101] 最⾼高N-‐1位为数据位 最低位为符号位 >> [5, 0, 10, 12, 6], [3, 0, 5, 68, -‐2] >> [5, 0, 10, 12, 6], [8, 0, 15, 80, 4]
- 32. 含义 // 已确定⾏行号 [ 5, // 列号 0, // 源⽂文件，从sources查找 10, // 源⽂文件内⾏行号 12, // 源⽂文件内列号 6 // 源⽂文件内标⽰示符，从names查找 ]
- 33. ⽆无需⼿手动分析 • Google Closure Compiler可以⽣生成V2版 Source Map格式，未编码的明⽂文数据 • 使⽤用Mozilla的SourceMap项⺫⽬目读取或⽣生成 Source Map⽂文件
- 34. 总结 • 使⽤用调试器辅助JavaScript开发 • 即使是eval⽣生成的代码也没有问题 • 使⽤用命名函数表达式来美化堆栈 • 使⽤用Source Map来调试混淆后的代码 • ⼿手动使⽤用Source Map亦不是问题
- 35. Q &A
- 36. 谢谢