ChatGPT解决这个技术问题 Extra ChatGPT

如何在 Google Chrome 的内联 Javascript 中设置断点?

当我在 Google Chrome 中打开开发人员工具时,我看到了各种功能,例如配置文件、时间线和审核,但是缺少基本功能,例如能够在 js 文件和 html 和 javascript 代码中设置断点!我尝试使用 javascript 控制台,它本身就有问题 - 例如,一旦遇到 JS 错误,除非我刷新整个页面,否则我无法摆脱它。有人可以帮忙吗?

我放弃了 Chrome。尝试使用 Firefox 并在几秒钟内击中我的断点。使用 Chrome 可能是可能的,但具体方法肯定不明显!
@OliverP 我还建议在 Chrome 有时无法正常工作时尝试 Firefox。我在 .php 文件中有一些内联脚本,Chrome 无法在 Chrome devtool 的 Source 选项卡中显示源文件。我尝试了 Firefox,一切都按预期工作。

M
Matt Ball

您是在谈论 <script> 标记中的代码还是 HTML 标记属性中的代码,像这样?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

无论哪种方式,这样的 the debugger keyword 都会起作用:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

注意如果开发工具未打开,Chrome 将不会在 debuggers 暂停。

您还可以在 JS 文件和 <script> 标签中设置属性断点:

单击 Sources 选项卡 单击 Show Navigator 图标并选择文件 双击左边空白处的 a 行号。相应的行将添加到断点面板 (4)。

https://i.stack.imgur.com/gAp7V.png


没有脚本选项卡。我看到这张图片中的所有其他选项卡,但没有脚本选项卡!。
我的意思是能够在 html 的脚本标签内设置断点。我也尝试过使用调试器;关键字,但它不起作用。 Chrome 不会在此设置断点,但可以在 Firefox 中使用。我正在寻找不基于调试器关键字的断点解决方案,这不方便在代码中放置很多地方然后不得不删除。
在“脚本”选项卡下的下拉列表中,我只看到列出的 JS 文件,但没有看到包含我要调试的