在chrome控制台上调试javascript函数

Question

有关在chrome控制台中调试的两个问题：

1. 如何直接在chrome控制台中调试我正在编写的函数？ 例如

Public Class Foo  
    Public ReadOnly Property Value As Integer = 123
End Class  

我想设置断点等。

如何在控制台中进行缩进选项卡？

谢谢。

Answer 1

1.有人可能有更好的解决方案。尝试：

debugger;say()

在控制台中

，然后按F11两次，您将导航到VMxxxx选项卡，您可以在那里添加断点并保留它。

即。下次在控制台中运行say()时，将触发断点。

2.我也没想出办法，但是你可以尝试用Shift+Enter打开一个新行和用空格标识，或者从其他地方复制一个“标签”（文本编辑器） ）并将其粘贴在铬。

Answer 2

现在，您可以编写功能并直接在Chrome控制台中调试它们。

Chrome开发工具->源代码->内容脚本->新脚本

您可以在此处编写任何代码，设置断点并按Ctrl + Enter来运行它。

Answer 3

只是为了补充Kevin给出的答案，这是交易：

命令debugger;将触发暂停进入调试器源窗口。

您可以将功能更改为

function say(){
  debugger;
  console.log("hello");
  console.log("test");
}

下次您执行功能 say()时，它将在开始处暂停。

您也可以在控制台中键入debugger;say();，因为它会在调用函数say（）之前暂停，但是您必须按F11来设置为下一个函数

Answer 4

现在您可以使用debug()。

debug(say)

  

Console Utilities API Reference  |  Tools for Web Developers

Answer 5

代码段也可以用于此目的。尽管代码段在页面之间共享，并且从当前打开的页面的上下文中运行，但是也可以用于此目的。

https://developers.google.com/web/tools/chrome-devtools/snippets

Answer 6

您可以尝试使用此技巧，导航至以下

Chrome开发工具->源代码->代码段->新代码段

为代码段命名，然后将脚本添加到编辑器（右侧面板）中，然后使用CTRL + S保存。

现在添加了您的代码段，您可以右键单击在新添加的代码段上，然后单击->运行

添加断点并调用该方法，调试完成后就可以删除该代码段，以防万一，如果您在创建代码段时遇到困难，请选中此link