JavaScript控制台中的`binding.pry`?

Question

在Ruby中，我可以在代码的任何地方输入binding.pry，在执行到该点时，我的控制台将进入一个REPL环境，在此环境中我可以访问所有本地变量，进行更改并执行任意代码。

示例：

# foo.rb
require 'pry'
n = 5
binding.pry
puts "your number is #{n}"

当我运行它时：

$ ruby foo.rb

From: /Users/cgenco/Desktop/foo.rb @ line 4 :

    1: # foo.rb
    2: require 'pry'
    3: n = 5
 => 4: binding.pry
    5: puts "your  number is #{n}"

[1] pry(main)> n = 100
=> 100
[2] pry(main)> exit
your number is 100

这是一个令人难以置信的调试工具，尤其适用于需要复杂设置的情况：我只需在需要更多代码的位置键入binding.pry，然后进行实验、找出需要编写的代码，最后将优化过的代码添加到实际源代码中。

是否有类似于pry的工具可用于浏览器控制台中的JavaScript?

- cgenco

Answer 1

按照这个答案所建议的，在你的代码中使用debugger;。你必须打开浏览器的开发者工具。

- Pigueiras

---

啊，太完美了！这正是我在寻找的东西——简直不敢相信我之前竟然不知道它。 - cgenco

未来提醒自己：在节点脚本中添加“debugger”，然后使用“node inspect SCRIPT.js”运行它，然后键入“cont”并按回车键，当您的脚本到达“debugger”行时，它将停止。要进入REPL，请键入“repl”并按回车键。 - cgenco

Answer 2

大多数浏览器都有类似的开发者工具。

例如，在Chrome浏览器中，按下Ctrl+Shift+I可打开开发者工具面板。单击“Sources”选项卡，您可以浏览已加载的任何JavaScript文件。从这里，您可以通过在左侧行单击来设置断点。现在，当您重新加载页面时，JavaScript执行将在您指定的行处暂停。

在面板底部有一个“显示控制台”按钮，可以打开一个REPL（Read-Eval-Print Loop）以供您操作。

以下是一张说明上述内容的屏幕截图：

Firefox、IE、Safari和Opera等浏览器中也有类似的工具。只需搜索“开发者工具[您选择的浏览器]”即可了解更多信息。

- Dan Tao

---

太棒了，非常感谢！这是我第一次成功按照说明在JS中设置类似Pry的控制台，其他的都很令人困惑。 - Evgenia Karunus

Answer 3

我想提一下Node.js有一个很好的调试器功能。
超简短教程：

1. 使用以下命令运行您的应用程序：

node debug appname.js

2. 而不是通常的

node appname.js

请看这个网站: https://nodejs.org/api/debugger.html 我发布这篇文章是因为在发现调试工具之前，我找到了许多需要依赖的方法！

- zack999

Answer 4

9年后，我终于找到了我需要的东西：pryjs。

你可以使用import pry from "pryjs"或者const pry = require("pryjs")将其引入，然后用eval(pry.it)代替binding.pry来调用它。

它的使用方法和你期望的一样。

2023年更新：看起来pryjs已经好几年没有更新了，也无法正常工作。

- cgenco