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

ashley · 发布于 2015年11月13日 · 最后由 heliang7 回复于 2015年12月11日 · 1086 次阅读
20998

原文链接: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

共收到 2 条回复
3790

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

1959

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

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