Enviar pesquisa
Carregar
JavaScript现代化排错实践
•
6 gostaram
•
1,595 visualizações
J
jeffz
Seguir
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 36
Baixar agora
Baixar para ler offline
Recomendados
The Evolution of Async Programming (GZ TechParty C#)
The Evolution of Async Programming (GZ TechParty C#)
jeffz
Wind.js无障碍调试与排错
Wind.js无障碍调试与排错
jeffz
Javascript Training
Javascript Training
beijing.josh
Jscex:案例、经验、阻碍、展望
Jscex:案例、经验、阻碍、展望
jeffz
论 Python 与设计模式。
论 Python 与设计模式。
勇浩 赖
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
Justin Lin
页游开发中的 Python 组件与模式
页游开发中的 Python 组件与模式
勇浩 赖
Node way
Node way
Ethan Zhang
Mais conteúdo relacionado
Mais procurados
Jscex:案例、阻碍、体会、展望
Jscex:案例、阻碍、体会、展望
jeffz
在開始工作以前,我以為我會寫扣。
在開始工作以前,我以為我會寫扣。
Chih-Hsuan Kuo
Python 于 webgame 的应用
Python 于 webgame 的应用
勇浩 赖
nodeMCU IOT教學02 - Lua語言
nodeMCU IOT教學02 - Lua語言
吳錫修 (ShyiShiou Wu)
LazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHP
Lin Yo-An
Python learn guide
Python learn guide
robin yang
Sigreturn Oriented Programming
Sigreturn Oriented Programming
Angel Boy
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
zhangdaiping
Ian 20151002 es2015
Ian 20151002 es2015
LearningTech
Node.js开发体验
Node.js开发体验
QLeelulu
C程式-函式與巨集
C程式-函式與巨集
艾鍗科技
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇
Justin Lin
Talking about exploit writing
Talking about exploit writing
sbha0909
C程式-陣列與指標
C程式-陣列與指標
艾鍗科技
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
Justin Lin
Arduino應用系統設計 - Arduino程式快速入門
Arduino應用系統設計 - Arduino程式快速入門
吳錫修 (ShyiShiou Wu)
JavaScript 教程
JavaScript 教程
Bobby Zhou
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
彼得潘 Pan
PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术
hoopchina
改善程序设计技术的50个有效做法
改善程序设计技术的50个有效做法
crasysatan
Mais procurados
(20)
Jscex:案例、阻碍、体会、展望
Jscex:案例、阻碍、体会、展望
在開始工作以前,我以為我會寫扣。
在開始工作以前,我以為我會寫扣。
Python 于 webgame 的应用
Python 于 webgame 的应用
nodeMCU IOT教學02 - Lua語言
nodeMCU IOT教學02 - Lua語言
LazyRecord: The Fast ORM for PHP
LazyRecord: The Fast ORM for PHP
Python learn guide
Python learn guide
Sigreturn Oriented Programming
Sigreturn Oriented Programming
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
Ian 20151002 es2015
Ian 20151002 es2015
Node.js开发体验
Node.js开发体验
C程式-函式與巨集
C程式-函式與巨集
OpenEJB - 另一個選擇
OpenEJB - 另一個選擇
Talking about exploit writing
Talking about exploit writing
C程式-陣列與指標
C程式-陣列與指標
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
lambda/closure – JavaScript、Python、Scala 到 Java SE 7
Arduino應用系統設計 - Arduino程式快速入門
Arduino應用系統設計 - Arduino程式快速入門
JavaScript 教程
JavaScript 教程
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
Standford 2015 iOS讀書會 week2: 1. Applying MVC 2. More Swift and Foundation Fra...
PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术
改善程序设计技术的50个有效做法
改善程序设计技术的50个有效做法
Destaque
Ruby Past, Present, Future
Ruby Past, Present, Future
adamfine
大话程序员可用的算法
大话程序员可用的算法
jeffz
Web开发中的缓存
Web开发中的缓存
jeffz
LINQ Inside
LINQ Inside
jeffz
企业开发领域的语言特性
企业开发领域的语言特性
jeffz
分布式版本管理
分布式版本管理
jeffz
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Jack Yang
Rabbit mq簡介(上)
Rabbit mq簡介(上)
共和 薛
Storm特性
Storm特性
zyh
鐵道女孩向前衝-RubyKaigi心得分享
鐵道女孩向前衝-RubyKaigi心得分享
Yu-Chen Chen
LWC15 典藏數位化-張其昀先生相關資料數位化之應用 報告人:中國文化大學圖書館 吳瑞秀館長
LWC15 典藏數位化-張其昀先生相關資料數位化之應用 報告人:中國文化大學圖書館 吳瑞秀館長
International Federation for information integration
使用.NET构建轻量级分布式框架
使用.NET构建轻量级分布式框架
jeffz
臺北智慧城市專案辦公室公共住宅智慧社區服務說明書工作會議--智慧圖書館
臺北智慧城市專案辦公室公共住宅智慧社區服務說明書工作會議--智慧圖書館
Taipei Smart City PMO
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
Fred Chien
LWC14夢醒時分:圖書館建築構想書的實踐成果 以國立臺東大學圖書館為例。報告人:國立臺東大學圖書館 吳錦範組長
LWC14夢醒時分:圖書館建築構想書的實踐成果 以國立臺東大學圖書館為例。報告人:國立臺東大學圖書館 吳錦範組長
International Federation for information integration
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
Fred Chien
計概:Programming Paradigm
計概:Programming Paradigm
Rex Yuan
新時代圖書館大未來
新時代圖書館大未來
Ted Lin (林泰宏)
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
Fred Chien
試看VR的教育輕應用
試看VR的教育輕應用
Wayne Huang
Destaque
(20)
Ruby Past, Present, Future
Ruby Past, Present, Future
大话程序员可用的算法
大话程序员可用的算法
Web开发中的缓存
Web开发中的缓存
LINQ Inside
LINQ Inside
企业开发领域的语言特性
企业开发领域的语言特性
分布式版本管理
分布式版本管理
QML 與 C++ 的美麗邂逅
QML 與 C++ 的美麗邂逅
Rabbit mq簡介(上)
Rabbit mq簡介(上)
Storm特性
Storm特性
鐵道女孩向前衝-RubyKaigi心得分享
鐵道女孩向前衝-RubyKaigi心得分享
LWC15 典藏數位化-張其昀先生相關資料數位化之應用 報告人:中國文化大學圖書館 吳瑞秀館長
LWC15 典藏數位化-張其昀先生相關資料數位化之應用 報告人:中國文化大學圖書館 吳瑞秀館長
使用.NET构建轻量级分布式框架
使用.NET构建轻量级分布式框架
臺北智慧城市專案辦公室公共住宅智慧社區服務說明書工作會議--智慧圖書館
臺北智慧城市專案辦公室公共住宅智慧社區服務說明書工作會議--智慧圖書館
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
LWC14夢醒時分:圖書館建築構想書的實踐成果 以國立臺東大學圖書館為例。報告人:國立臺東大學圖書館 吳錦範組長
LWC14夢醒時分:圖書館建築構想書的實踐成果 以國立臺東大學圖書館為例。報告人:國立臺東大學圖書館 吳錦範組長
Brig:Node.js + QML 華麗大冒險
Brig:Node.js + QML 華麗大冒險
計概:Programming Paradigm
計概:Programming Paradigm
新時代圖書館大未來
新時代圖書館大未來
超酷炫科幻 UI:QML 入門
超酷炫科幻 UI:QML 入門
試看VR的教育輕應用
試看VR的教育輕應用
Semelhante a JavaScript现代化排错实践
Character Encoding and Database Transcoding Project
Character Encoding and Database Transcoding Project
Ho Kim
Mysql开发与优化
Mysql开发与优化
isnull
高性能远程调用解决方案
高性能远程调用解决方案
Ady Liu
Infiniflash benchmark
Infiniflash benchmark
Louis liu
淘宝前端优化
淘宝前端优化
锐 张
淘宝前台系统优化实践“吞吐量优化”-Qcon2011
淘宝前台系统优化实践“吞吐量优化”-Qcon2011
Yiwei Ma
Mysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimization
isnull
Myfox on NodeJS
Myfox on NodeJS
aleafs
Ch10 習題
Ch10 習題
hungchiayang1
淘宝数据魔方的系统架构 -长林
淘宝数据魔方的系统架构 -长林
Shaoning Pan
Baidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log Analysis
Xiaoming Chen
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
Python 温故
Python 温故
勇浩 赖
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC
Glider
Glider
windyrobin
基于Innodb开发的最佳实践
基于Innodb开发的最佳实践
wubx
基于嵌入式系统的Avs P10编码系统设计
基于嵌入式系统的Avs P10编码系统设计
Hengyi
Terracotta And Continuent Based Clustering Architecture
Terracotta And Continuent Based Clustering Architecture
Target Source
0416 Windows Server 2008 Native IPv6 新功能介紹
0416 Windows Server 2008 Native IPv6 新功能介紹
Timothy Chen
ES5 introduction
ES5 introduction
otakustay
Semelhante a JavaScript现代化排错实践
(20)
Character Encoding and Database Transcoding Project
Character Encoding and Database Transcoding Project
Mysql开发与优化
Mysql开发与优化
高性能远程调用解决方案
高性能远程调用解决方案
Infiniflash benchmark
Infiniflash benchmark
淘宝前端优化
淘宝前端优化
淘宝前台系统优化实践“吞吐量优化”-Qcon2011
淘宝前台系统优化实践“吞吐量优化”-Qcon2011
Mysql introduction-and-performance-optimization
Mysql introduction-and-performance-optimization
Myfox on NodeJS
Myfox on NodeJS
Ch10 習題
Ch10 習題
淘宝数据魔方的系统架构 -长林
淘宝数据魔方的系统架构 -长林
Baidu LSP and DISQL for Log Analysis
Baidu LSP and DISQL for Log Analysis
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Python 温故
Python 温故
twMVC#44 讓我們用 k6 來進行壓測吧
twMVC#44 讓我們用 k6 來進行壓測吧
Glider
Glider
基于Innodb开发的最佳实践
基于Innodb开发的最佳实践
基于嵌入式系统的Avs P10编码系统设计
基于嵌入式系统的Avs P10编码系统设计
Terracotta And Continuent Based Clustering Architecture
Terracotta And Continuent Based Clustering Architecture
0416 Windows Server 2008 Native IPv6 新功能介紹
0416 Windows Server 2008 Native IPv6 新功能介紹
ES5 introduction
ES5 introduction
Mais de jeffz
深入浅出Jscex
深入浅出Jscex
jeffz
Mono for .NET Developers
Mono for .NET Developers
jeffz
Javascript Uncommon Programming
Javascript Uncommon Programming
jeffz
Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)
jeffz
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScript
jeffz
单点登录解决方案的架构与实现
单点登录解决方案的架构与实现
jeffz
Documentation Insight技术架构与开发历程
Documentation Insight技术架构与开发历程
jeffz
Windows Phone应用开发心得
Windows Phone应用开发心得
jeffz
针对iPad平台的高性能网站架构
针对iPad平台的高性能网站架构
jeffz
The Evolution of Async-Programming on .NET Platform (TUP, Full)
The Evolution of Async-Programming on .NET Platform (TUP, Full)
jeffz
The Evolution of Async-Programming on .NET Platform (.Net China, C#)
The Evolution of Async-Programming on .NET Platform (.Net China, C#)
jeffz
The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)
jeffz
面向对象与生活
面向对象与生活
jeffz
Windows内核技术介绍
Windows内核技术介绍
jeffz
响应式编程及框架
响应式编程及框架
jeffz
F#语言对异步程序设计的支持
F#语言对异步程序设计的支持
jeffz
大众点评网的技术变迁之路
大众点评网的技术变迁之路
jeffz
Better Framework Better Life
Better Framework Better Life
jeffz
Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)
jeffz
如何成为一名优秀的博主
如何成为一名优秀的博主
jeffz
Mais de jeffz
(20)
深入浅出Jscex
深入浅出Jscex
Mono for .NET Developers
Mono for .NET Developers
Javascript Uncommon Programming
Javascript Uncommon Programming
Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScript
单点登录解决方案的架构与实现
单点登录解决方案的架构与实现
Documentation Insight技术架构与开发历程
Documentation Insight技术架构与开发历程
Windows Phone应用开发心得
Windows Phone应用开发心得
针对iPad平台的高性能网站架构
针对iPad平台的高性能网站架构
The Evolution of Async-Programming on .NET Platform (TUP, Full)
The Evolution of Async-Programming on .NET Platform (TUP, Full)
The Evolution of Async-Programming on .NET Platform (.Net China, C#)
The Evolution of Async-Programming on .NET Platform (.Net China, C#)
The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)
面向对象与生活
面向对象与生活
Windows内核技术介绍
Windows内核技术介绍
响应式编程及框架
响应式编程及框架
F#语言对异步程序设计的支持
F#语言对异步程序设计的支持
大众点评网的技术变迁之路
大众点评网的技术变迁之路
Better Framework Better Life
Better Framework Better Life
Why Java Sucks and C# Rocks (Final)
Why Java Sucks and C# Rocks (Final)
如何成为一名优秀的博主
如何成为一名优秀的博主
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时代开始便可以调试代码
6.
两个问题 • Node.js可以调试吗? • eval出来的代码可以调试吗?
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⾏行 ... ...
23.
Base64 VLQ解码 KAUYM,GAKoEF
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.
谢谢
Baixar agora