如何在Google Chrome浏览器的嵌入式Java脚本中设置断点?

2020/10/14 13:41 · javascript ·  · 0评论

当我在Google Chrome浏览器中打开开发人员工具时,我看到了各种功能,例如“个人资料”,“时间轴”和“审核”,但是基本功能(如能够在js文件中以及html和javascript代码中设置断点)丢失了!我尝试使用JavaScript控制台,该控制台本身是有问题的-例如,一旦遇到JS错误,除非刷新整个页面,否则我无法摆脱它。有人可以帮忙吗?

使用“源”选项卡,您可以在其中的JavaScript中设置断点。在其下方的目录树中(带有向上和向下箭头),可以选择要调试的文件。您可以通过按同一选项卡右侧的“恢复”来避免出现错误。

您是在谈论<script>标签还是HTML标签属性中的代码?

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

无论哪种方式,这样debugger关键字都可以使用:

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

NB Chrome不会在暂停debugger■如果开发者工具都打不开。


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

  1. 点击来源标签
  2. 单击显示导航器图标,然后选择一个文件
  3. 双击左边距中的行号。相应的行将添加到“断点”面板(4)。

在此处输入图片说明

您还可以为脚本命名:

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

当然,用一些名称替换“ somename”;),然后您将在chrome调试器中的“源>顶部>(无域)> somename.js”处将其作为普通脚本看到,并且您将能够像其他脚本一样对其进行调试

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

调试特别是由ajax返回的html内脚本的另一个直观的简单技巧是将console.log(“ test”)临时放在脚本内。

触发事件后,打开开发人员工具内的控制台选项卡。您将看到源文件链接显示在“测试”调试打印语句的右侧。只需单击源(类似于VM4xxx),即可设置断点。

PS:此外,如果您使用的是chrome,则可以考虑添加“ debugger”语句,例如@Matt Ball建议的内容

我的情况和解决方法:

我在HTML页面上包含一个javascript文件,如下所示:

页面名称: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调试器,然后点击脚本标签,然后如上图所示下拉列表。我可以清楚地看到脚本/ common.js不过我可以看当前HTML页面的test.html在下拉,所以我不能调试嵌入的JavaScript:

<script type="text/javascript">
  document.write("something");
</script>

那令人困惑。但是,当我从嵌入式脚本中删除过时的type =“ text / javascript”时

<script>
  document.write("something");
</script>

..并刷新/重新加载页面,瞧,它出现在下拉列表中,一切都恢复了。

我希望这对在调试html页面上的嵌入式javascript时遇到问题的人有所帮助。

debugger;在我的脚本上添加最适合我的脚本。

我也遇到了同样的问题,即如何调试<script>标记内的JavaScript 但是后来我在带有“”的“ Sources”选项卡下的“(index)”下找到了它。单击行号以设置断点。

在此处输入图片说明

这是Chrome 71。

如果看不到“脚本”标签,请确保使用正确的参数启动Chrome。当我启动Chrome浏览器以使用参数调试服务器端JavaScript时遇到了这个问题--remote-shell-port=9222如果我不带任何参数启动Chrome,就没有问题。

我遇到了这个问题,但是我的内联函数使用了angularJS视图。因此,在负载下,我无法访问嵌入式脚本来添加调试,因为在调试器的“源”选项卡中只有index.html可用。

这意味着当我使用内联打开特定视图时(对此没有选择),它不可访问。

我能够实现的唯一方法是将错误的函数放入内联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控制台中提示我。

Uncaught TypeError: undefined is not a function 

重要的是这的来源:VM5658:6单击此按钮使我可以逐步遍历内联并将断点保持在那里,以备后用。

达到这种目标的方式非常复杂。.但是,它可以工作,并且在处理动态加载视图的单页面应用程序时可能很有用。

VM[n]值无明显意义,且n开启等于脚本ID。此信息可以在这里找到:Chrome“ [VM]”

使用Visual Studio(2012),我遇到了同样的问题,切换到IIS Express可以解决该问题!

script标签的type属性都没有的因素进去。

由于某些原因,Visual Studio Development Server无法提供Chrome启用断点所需的一切。

我知道问题并不关乎,Firefox但我不想添加此问题的副本以自己回答。

对于Firefox,您需要添加 debugger;以能够执行针对标签的@ matt-ball建议的操作script

因此,在代码上,您debugger要在要调试的行上方添加,然后可以添加断点。如果只是在浏览器上设置断点,它将不会停止。

考虑到问题与Chrome有关,如果不是在此添加Firefox答案的地方。不要:(减去答案只是让我知道我应该在哪里发布它,我会很乐意将帖子移动。:)

这是Rian Schmits上面答案的扩展就我而言,我的JavaScript代码中嵌入了HTML代码,除了HTML代码之外,我什么都看不到。也许这些年来,Chrome调试已发生了变化,但是右键单击“源/源”选项卡向我显示了“将文件夹添加到工作区”我能够添加我的整个项目,这使我可以访问所有JavaScript。您可以在此链接中找到更多详细信息我希望这对某人有帮助。

本文地址:http://javascript.askforanswer.com/ruhezaigoogle-chromeliulanqideqianrushijavajiaobenzhongshezhiduandian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!