翻译 [翻译] JavaScript 与 Ruby 的调试技术

ashley · 2015年11月13日 · 最后由 heliang7 回复于 2015年12月11日 · 2229 次阅读

原文链接:https://eliotsykes.com/debug-js

这是一篇简短但是却很实用的指引,为 Ruby 爱好者总结和演译了与常规 Ruby 调试相对应的在 JavaScript 中的调试技术。

调试断点

# In Ruby
binding.pry
byebug

// In JavaScript
debugger;

当 JavaScript 遇上关键字 debugger,且你的浏览器调试器选项卡处于开启状态时,执行将会暂停,JavaScript 源将会在 debugger 断点处展示出来。 正如 Pry 和 Byebug 一样,你可以用控制台在暂停行上检查可用变量以及与其互动(按下 Escape 按钮切换到控制台的快速通道)。 如想恢复执行,点击在调试器标签上的播放(三角图标)按钮。 一个替代关键字 debugger 的方法是,在调试器标签上查看 JS 源,点击行沟从而为特定的代码行设置一个断点。

记录

# In Ruby
puts x.inspect
p x
puts "The value of x is #{x}"
logger.info "The value of x is #{x}"

// In JavaScript
console.log(x);
console.log("The value of x is", x);

console.log() 的每个参数将会被输出到浏览器控制台。点击输出的参数从而能更深入地检查它们。 console.log() 的一个方便的功能是它能接受多个参数 – 可接受 console.log(x, y, z),同时输出 x,y,z 的值到控制台。

优质输出

# In Ruby
pp some_obj # Ruby Std-lib PP
ap some_obj # Using awesome_print gem

# In Rails view templates
<%= debug some_obj %>

// In JavaScript
console.dir(someObj);

在你的浏览器控制台试着运行 console.dir(document) 。点击结果从而进一步研究 document 对象。

输出堆栈跟踪

# In Ruby
puts caller

// In JavaScript
console.trace();

堆栈跟踪展示了函数调用的序列,引出正在执行的当前行。

探索

你已经了解了如何借鉴 Ruby 的调试技巧来更有效地调试 JavaScript。 继续尝试和点击浏览器开发工具,特别是调试器标签,去发现更多可用功能。 阅读浏览器厂商 Firefox 和 Chrome 提高的相关文档,了解更先进的调试功能。

ES · SEPTEMBER 24, 2015

+1,不错,学习了。尤其是: console.dir(someObj)

+1 学习了,之前只关注过 console.log。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册