您可以通过在 chrome 开发工具（控制台）中创建的功能吗？

Posted 2023-03-07

【中文标题】您可以通过在 chrome 开发工具（控制台）中创建的功能吗？

【英文标题】：Can youstep through a function created in chrome dev tools (console)?

【发布时间】：2017-02-22 08:42:34

【问题描述】：

您可以使用 chrome 的开发工具单步执行和编辑 js 文件中的一些代码。

您还可以在开发工具中添加和运行一个函数，只需将其输入控制台即可。

如果您输入如下无效代码，控制台将抛出错误并使用该代码创建一个 VM### 文件，并告诉您错误发生在哪一行。

function a() 
  console.log(v);


Uncaught ReferenceError: v is not defined
at a (<anonymous>:2:15)
a @ VM243:2

如果您单击 VM243:2，它将带您进入 VM 文件，您可以在其中单步执行代码，但不允许您对其进行编辑（而js文件，你可以编辑它）

是否可以使用您可以编辑的代码手动创建一个 VM 文件，以便您可以在控制台中快速测试和单步执行您的代码？

或者，如果我以错误的方式处理此问题，是否有一种简单的方法可以单步执行您的代码？ （将js文件添加到chrome并以某种方式执行功能）

【参考方案1】：

您可以创建一个snippet 来执行此操作。

看起来默认情况下，在 sn-ps 中发生的异常被捕获，尽管它们仍然出现在控制台中。但是，您可以在 sn-p 中启用“中断捕获的异常”。

【讨论】：

提示：使用Ctrl-Enter执行当前打开的sn-p。

【参考方案2】：

是的，你可以：

function a() 
  debugger
  console.log(v);

debugger 在您的代码中创建一个断点。从这里您可以轻松地单步执行您的代码。