javascript - 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 for javascript 的工具可以在浏览器控制台中使用？

Answer 1

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

Answer 2

大多数浏览器都有与此非常相似的开发人员工具。

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

在面板的底部有一个“显示控制台”按钮，它会打开一个你可以玩的 REPL。

这是一个屏幕截图，说明了我刚才提到的所有内容：

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

Answer 3

我想提一下，Node.js 有一个好东西叫做 Debugger。

超短教程：

1. 是像这样运行您的应用程序：

node debug appname.js

2. 而不是通常的

node appname.js

帮自己一个忙，请参阅：https ://nodejs.org/api/debugger.html我发布了这个，因为在我找到调试器工具之前，我发现了很多需要依赖关系的方法！

Answer 4

在问了这个问题 9 年后，我偶然发现了我正在寻找的东西：pryjs。

包含它，import pry from "pryjs"或者const pryjs = require("pryjs")然后用eval(pry.it)而不是调用它binding.pry。

它按您的预期工作。