Chrome JavaScript调试器断点什么都不做？

81

我似乎无法弄清楚Chrome调试工具。

我的Chrome版本为21.0.1180.60 m。

我采取的步骤：

  1. 我按ctrl-shift-i打开控制台。
  2. 单击“源”，然后选择我要调试的相关javascript文件。
  3. 通过在左侧行旁边的装订线中放置一个蓝色标签，在希望代码停止的位置设置断点。
  4. 我单击了网页（这是一个php呈现页面）上的按钮，该按钮启动了javascript代码。
  5. 代码成功运行，没有停止。

我还注意到，Watch Expressions也不起作用。它一直告诉我我要监视的变量未定义。

进一步的测试发现导致断点失败的是我的代码。似乎它在“ $（”＃frmVerification“）。submit（function（）{”行上失败。它没有进入该function（）内部的断点。

以下是：

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});
javascript  debugging  google-chrome 
— 追逐者
source
您在第2步中的“来源”应该是“资源”吗？
— 德庆2012年
我的镶边在面板中的顺序如下：元素，资源，网络，源，时间轴，配置文件，审核，控制台。但是，参考资料，不允许我添加断点。只有来源会。
— 追赶者2012年
您可以尝试使用简单的简单javascript来查看简单页面，以查看断点是否正常运行。通过此操作，您可以了解是否是Chrome 21.0.1180.60的问题
— Deqing
我还查看了许多在线说明，应该有一个“脚本”面板...但是我没有？
— 追赶者2012年
是。在我的chrome（20.0.1132.43）中，它具有：元素，资源，网络，脚本，时间轴，配置文件，审核，控制台。因此，似乎在Chrome 21中，他们将“脚本”更改为“源”
— Deqing 2012年

Answers:

160

我不确定为什么没有达到断点，但是进入代码的一种肯定的方法是键入

debugger;

您要暂停代码的位置，然后在chrome开发人员工具窗口打开的情况下再次运行。

仅需注意的一件事，请确保在完成操作后清理并删除调试器行。如果您曾经通过YUI压缩器运行JavaScript文件，则debugger;一行的存在将导致其出错。

— 亚当·拉基斯（Adam Rackis）
source
1
我将调试器放入jquery函数中，但它仍然没有介入。请查看我上传的代码。这是因为JQuery吗？
— 追赶者2012年
1
@chrolli-我没有看到任何调试器；在代码中，但是无论如何，它绝对应该与jQuery一起使用。而不是调试器；在其中发出警报以确保完全调用该代码
— Adam Rackis 2012年
1
@AdamRackis感谢您的调试器；小费。真的有用！！:)
— gsaslis 2012年
1
谢谢，这也对我有用，在删除该行之后，Chrome断点功能恢复了正常。
— Jeroen Rondeel 2014年
1
为了使调试器正常工作，需要在“网络”选项卡下设置“禁用缓存”，否则您将运行缓存的代码。选择此项，然后按Ctrl F5重新加载。
— CYoung
20

这是一个较晚的答案，但是我遇到了同样的问题，但是答案却有所不同。

就我而言，我的代码中有一个sourceURL参考：

//@ sourceURL=/Scripts/test.js

当浏览器缩小并加载此Javascript文件时，通常会告诉Chrome Dev Tools未缩小的版本在哪里。

但是，如果您要调试的是最小版本，并且此行存在，则Chrome开发工具会映射到该sourceURL路径，而不是“常规”路径。

例如，如果您在Web服务器上本地工作，则在Chrome开发工具的“源”标签中，给定JS文件的路径将为 http://localhost/Scripts/test.js

如果test.js在底部

//@ sourceURL=/Scripts/test.js

那么断点仅在文件路径为/Scripts/test.js而不是的标准URL时才有效http://localhost/Scripts/test.js

在Chrome 38中，按照我上面的示例，如果您查看Sources选项卡，则每个文件都会运行http://localhost/，因此，当您单击test.js时，Chrome就会加载http://localhost/Scripts/test.js

您可以将所有所需的断点放在此文件中，而Chrome绝不会命中任何一个。如果您在JS上调用断点，然后再调用test.js中的任何函数，然后进入该函数，则会看到Chrome打开了一个新标签，其路径为/Scripts/test.js。在该文件中放置断点将停止程序流。

当我摆脱@ sourceURL了JS文件中的这一行时，一切都再次正常运行（即您期望的方式）。

— 史提芬
source
9

我遇到了类似的问题。除非我使用过，否则断点不起作用debugger;。我通过“恢复默认值并重新加载”解决了断点问题。它位于Chrome开发者工具，设置，还原默认设置并重新加载。

— 用户名
source
1
那对我有用。附：我不需要使用“调试器”。对于在58.0.3029.110左右版本中寻找它的任何人，请单击3个垂直点，设置（F1），并且“还原默认值并重新加载”是底部的按钮。
— www-0av-Com
5

确保脚本带有“调试器”；Chrome中未对其中的语句进行黑匣子处理。您可以转到“源”选项卡进行检查并关闭黑匣子。

编辑：添加了屏幕截图。

如何关闭黑匣子。

— 约翰·亚历山大
source
该功能位于哪里？屏幕截图？
— oldwizard
我拒绝投票时没有“停止黑匣子”功能的屏幕截图。答案无济于事，因为人们不得不开始谷歌搜索“停止黑匣子”功能。答案有所改善。删除downvote。
— oldwizard
这就是我想要的。感谢花花公子的答案。
— Kishan Patel
4

我遇到了几次，起初它在本地主机上运行良好，突然，断点不起作用，我切换到127.0.0.1，然后再次起作用。希望会有所帮助。

— son子
source
2

我可能在chrome和firefox中都遇到过类似的问题，尽管它可能无法解决您的问题。我在这里分享是希望对他人有所帮助。我之前在其他无关的项目中曾遇到过这种情况，但是直到今天再次出现时，我才明白为什么。

场景：

我有一个页面使用来自相同来源的两个引导程序模式和一组javascript文件（blueimp的超赞jquery fileupload）。

  • BS Modal 1在页面加载时渲染（通过php），并且始终显示在页面上。它用于添加新的相关记录。（CakePHP。...认为SalesForcey类型的东西）

  • BS Modal 2用于编辑现有的相关记录，它的html内容从ajax调用中提取并通过jQuery附加到DOM。

  • 支持通过标准html<script>标签包含的两种模式的Javascript 。

我注意到断点仅在Modal 1上触发。即使在代码确实正在评估和运行的情况下，在动态添加的Modal 2上执行代码时，断点也不起作用。弹出警报框，执行代码类型的事情，并按照代码中阐明的逻辑进行输出。

由于时间紧迫，我没有进一步深入研究，但希望将其分发出去并回馈社区。

PS：我一直都在用SO，但这是我的第一篇文章，所以对我轻松一点:-)

— Mikey4骰子
source
2

确保您使用的网址与设置映射时使用的主机相同。例如，如果您是在http://127.0.0.1/my-app设置和映射工作空间时所在的，那么如果您通过来查看页面，则断点将不起作用http://localhost/my-app。另外，感谢您阅读本文。在这里查看我对Chromium问题的回答。

— 大卫·吉尔伯森
source
2

确保您已在Chrome窗口中打开了JavaScript控制台（或源代码）。否则它将永远不会达到断点。您可以通过右上角的选项按钮打开javascript控制台->工具-> javascript控制台。

— 提拉克
source
2

我遇到了一个问题，即Chrome的断点没有触发任何操作。当我尝试在代码中使用“调试器”时，我只能单步执行代码的VM版本中的代码。我的问题是我错误地映射了资源。重新映射解决了我的问题。

— 丹·爱德华
source
2

我的解决方案是从“应用程序”选项卡中清除“本地存储”，“会话存储”和“ Cookie”。之后，Chrome会在Sources中定义的断点处暂停脚本执行。

  1. 点击Google Chrome浏览器的“应用程序”标签
  2. 右键单击每个文件夹下的URL>清除

屏幕截图：“应用程序”选项卡

— Purple_Kitten
source
1
向上拖动控制台并键入；localStorage.clear（）＆输入，然后sessionStorage.clear（）＆enter。
— Paddymac '19
localStorage.clear(); sessionStorage.clear()
— zr0gravity7
2

我有一个缩小器，正在去除debugger语句__（ツ）_ /

— FreePender
source
1

确保将断点放在正确的源文件中。一些工具会创建代码的多个副本，我们尝试使用不同的源文件。

解决方案：不要使用快捷方式（例如Ctrl+P或Ctrl+R）打开文件，而是从“文件浏览器”中打开文件。在“源”选项卡中，左上方有一个图标。使用它，我们可以打开正确的源文件。

— Yuvraj Patil
source
0

因此，除了Adam Rackis的答案之外，如果您的JavaScript文件中的错误位于断点以上，那么无论您标记它还是放入都不会到达它debugger;。

这是一个例子：

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")
— JT。
source
1
@dckuehn仅在您告知时。开发工具中的一个选项是暂停错误。有时，这不切实际。例如，我研究在第三方网站上运行的库代码。如果我在使用库时将其打开，则无论站点是否与我的库相关，该站点每次出现错误都会暂停执行。如果您控制着它，那是您的网站，那是个不错的选择。对于某些类型的开发，可能会遇到障碍。
— JT。
0

正如我使用chrome所经历的那样，我们需要打开浏览器控制台以使调试器在加载页面时运行。

将此放置在要运行的javascript文件中

debugger

打开浏览器控制台并重新加载页面。

调试器将像下面的示例图像一样运行

在此处输入图片说明

— 三田
source
您在答案中添加了哪些新信息，而不是已经发布的答案之一？
— 摄
0

我不确定它是如何工作的，但是按F1进行设置，然后单击右下角的“还原默认值并重新加载”对我有用。

— 拔头
source
0

答案很晚，但是以上都不对我有帮助，与众不同

在我正在使用的旧版应用程序中缺少javascript文件type =“ text / javascript”的同时

<script  src="ab.js" ></script>

低于一个有效且断点达到预期

 <script  src="ab.js" type="text/javascript"></script>
— 秘鲁
source
0

我需要我该死的断点！非常奇怪的行为-Sources中通常出现的红色斑点是灰色；这些和debugger;断点似乎仍然会命中，但会显示在某些不可执行的HTML中。

经过几个小时的破解代码，最终正确地击中了断点，但是剩下的差不多相当于“ Hello World”。哈哈哈

因此，我在页面中输出了一些服务器端数据（以我的@razor语句为例），但是在任何类似情况下都将是相同的。

服务器输出中存在一些格式错误的0A / 0D字符-旧的回车符-导致Chrome混淆了自己的行号。

清理服务器注入的HTML，我得到了断点。

现在让我们看看我可以CTRL-Z返回多少代码...

— 本迪科
source
0

我将添加另一个随机答案，只是因为这个问题是针对我的几次搜索提出的。我有具有公共和私有方法的jQuery对象。模式是：

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

如果我在私有函数中的一行上放置一个断点，Chrome将不会对其进行调试，该行将移至return语句！因此要调试，我必须公开私有功能！今天早上对我来说这是新问题（2020年8月20日，版本84.0.4147.125（正式版本）（64位）），我不敢相信我已经三年没有碰到这个了。

— 用户名
source
0

这可能是Chrome错误。不幸的是，Chrome通常会中断调试。它通常会发生某种内存泄漏，并且每发布几个版本就会中断或更改一次。

目前，使用格式化源进行调试非常不可靠。

您可能还试图破坏无效代码。

为了确定它不是浏览器，您还应该尝试在firefox中对其进行调试。

— g
source
-1

我在1万行文件中遇到了同样的问题。断点被忽略，
硬编码的_debugger语句起作用，但是它们不能切换，当放在循环中时会很烦人。我的解决方案虽然有点破解，但可以解决的问题是在文件顶部添加以下内容：

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

然后添加一个myDebugger（）; 内联，我通常会使用断点。

打开调试我只需输入myDebuggerFlag = true; 在控制台行上。（当然，您必须首先退出myDebugger。

— 马克费
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.