如何在Google Chrome中的内嵌Javascript中设置断点？-Java 学习之路

184

当我在谷歌浏览器中打开开发人员工具时，我会看到各种功能，如 Profiles ，时间轴和审核，但基本功能，如能够在js文件和html和javascript代码中设置断点！我试图使用javascript控制台，它本身就是错误的 - 例如，一旦遇到JS错误，除非我刷新整个页面，否则我无法摆脱它 . 有人可以帮忙吗？

12 回答

0

使用 Visual Studio （2012）我有同样的问题，切换到 IIS Express 解决了问题！

script 标记的 type 属性没有考虑到它 .

出于某种原因， Visual Studio Development Server 不提供Chrome启用断点所需的所有内容 .

回复于 2024-04-28T18:56:49+08:00
0

使用sources选项卡，您可以在JavaScript中设置断点 . 在其下面的目录树中（带有向上和向下箭头），您可以选择要调试的文件 . 您可以通过按相同选项卡右侧的“恢复”来解决错误 .

回复于 2024-04-28T18:56:49+08:00
0
您是在讨论 <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>
```
N.B. 如果开发工具未打开，Chrome将不会在 debugger 秒暂停 .

您还可以在JS文件和 <script> 标记中设置属性断点：
- 单击“源”选项卡
- 单击“显示导航器”图标，然后选择一个文件
- 双击左侧边距中的a行号 . 相应的行将添加到“断点”面板（4） .
回复于 2024-04-28T18:56:49+08:00
37

在脚本选项卡上打开开发人员工具时，刷新包含脚本的页面 . 这将在文件列表中添加一个（程序）条目，该条目显示包含脚本的页面的html . 从这里您可以添加断点 .

回复于 2024-04-28T18:56:49+08:00
10

您还可以为脚本命名：

<script> ... (your code here) //# sourceURL=somename.js </script>

ofcourse用某个名称替换“somename”;）然后你会在Chrome调试器的“Sources> top>（no domain）> somename.js”中看到它作为普通脚本，你可以像其他脚本一样调试它

回复于 2024-04-28T18:56:49+08:00
190

调试ajax返回的html中的脚本的另一个直观的简单技巧是临时将console.log（“test”）放入脚本中 .

触发事件后，打开开发人员工具中的控制台选项卡 . 您将看到“test”调试print语句右侧显示的源文件链接 . 只需单击源（类似于VM4xxx），您现在可以设置断点 .

P.S . ：另外，如果你使用chrome，你可以考虑使用“调试器”声明，就像@Matt Ball建议的那样

回复于 2024-04-28T18:56:49+08:00
2
我的情况和我做了什么来解决它：
我在HTML页面上包含一个javascript文件，如下所示：
Page Name: test.html
```
<!DOCTYPE html>
<html>
    <head>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
         <script type="text/javascript">
            document.write("something");
         </script>

        </div>
     </body>
</html>
```
现在，在Chrome中输入Javascript调试程序，单击“脚本”选项卡，然后如下所示下拉列表 . 我可以清楚地看到 scripts/common.js 但是我可以在下拉列表中查看当前的html页面 test.html ，因此我无法调试嵌入式javascript：
```
<script type="text/javascript">
  document.write("something");
</script>
```
那令人困惑 . 但是，当我从嵌入式脚本中删除过时的 type="text/javascript" 时：
```
<script>
  document.write("something");
</script>
```
..并刷新/重新加载页面，瞧，它出现在下拉列表中，一切都很好 .
我希望这对任何在html页面上调试嵌入式javascript问题的人都有帮助 .
回复于 2024-04-28T18:56:49+08:00
110

如果您看不到"Scripts"标签，请确保使用正确的参数启动Chrome . 当我使用参数 --remote-shell-port=9222 启动Chrome以调试服务器端JavaScript时，我遇到了这个问题 . 如果我在没有参数的情况下启动Chrome，我没有问题 .

回复于 2024-04-28T18:56:49+08:00
2
我遇到了这个问题，但是我的内联函数正在使用angularJS视图 . 因此在加载时我无法访问内联脚本来添加调试，因为只有index.html在调试器的sources选项卡中可用 .

这意味着当我用我的内联打开特定视图时（没有选择），它无法访问 .

我能够击中它的onlly方式是在内联JS函数中放置一个错误的函数或调用 .

我的解决方案包括
```
function doMyInline(data) {
        //Throw my undefined error here. 
        $("select.Sel").debug();

        //This is the real onclick i was passing to 
        angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
    }
```
这意味着当我点击我的按钮时，然后我会在chrome consolse中提示 .
```
Uncaught TypeError: undefined is not a function
```
这里重要的是这个的来源： VM5658:6 点击这个允许我逐步通过内联并在那里保留断点以供日后使用 .

达到它的极其复杂的方式..但它在处理动态加载您的视图的单页应用程序时起作用并且可能有用 .

VM[n] 没有重要值， n on等于脚本ID . 此信息可在此处找到：Chrome "[VM]"
回复于 2024-04-28T18:56:49+08:00
15

添加 debugger; 在我脚本的顶部为我工作 .

回复于 2024-04-28T18:56:49+08:00
25

这是上面Rian Schmits' answer的扩展 . 就我而言，我的JavaScript代码中嵌入了HTML代码，除了HTML代码之外，我看不到任何其他内容 . 也许Chrome调试已经发生了多年的变化，但是右键单击“源/源”选项卡会向我显示 Add folder to workspace . 我能够添加我的整个项目，这使我可以访问我的所有JavaScripts . 你可以找到更多细节in this link . 我希望这有助于某人 .

回复于 2024-04-28T18:56:49+08:00
1

我也有同样的问题，如何调试 <script> 标签内的JavaScript . 但后来我在Sources选项卡下找到它，名为"(index)"，带括号 . 单击行号以设置断点 .

这是Chrome 71 .

回复于 2024-04-28T18:56:49+08:00

如何在Google Chrome中的内嵌Javascript中设置断点？

12 回答

相关问题