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