Chrome javascript调试器断点不做任何事情？

时间：2012-08-03 01:30:28

标签： javascript debugging google-chrome

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

我的镀铬版本为21.0.1180.60米。

我采取的步骤：

  1. 我按下了ctrl-shift-i来调出控制台。
  2. 点击Sources然后选择我想要调试的相关javascript文件。
  3. 我设置了断点，我想通过在左边的行旁边的装订线上放置一个蓝色标记来停止代码。
  4. 我点击了我的网页上的按钮（这是一个php呈现的页面），它启动了javascript代码。
  5. 代码成功运行而不停止。

    6. 我也注意到Watch Expressions也不起作用。它一直告诉我，我想看的变量是未定义的。

    进一步测试发现，我的代码导致断点失败。它似乎失败了＆＃34; $（＆＃34;＃frmVerification＆＃34;）。submit（function（）{＆＃34; line。它没有进入该函数内的断点（ ）。

    以下是：

    //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;
    });
});

21 个答案:

答案 0 :(得分：131)

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

debugger;

您希望代码暂停，然后在Chrome开发人员工具窗口打开的情况下再次运行。

只需注意一件小事，确保在完成后清理并删除调试器行。如果您通过YUI压缩器运行JavaScript文件，debugger;行的存在将导致它出错。

答案 1 :(得分：20)

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

就我而言，我的代码中有一个sourceURL引用：

//@ sourceURL=/Scripts/test.js

当浏览器缩小并加载此Javascript文件时，它通常会告知Chrome开发工具未公开的版本。

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

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

如果test.js在底部有

//@ sourceURL=/Scripts/test.js

然后断点只有在文件路径为/Scripts/test.js时才有效，而不是http://localhost/Scripts/test.js的完全限定网址

在Chrome 38中，继续上面的示例，如果查看“来源”标签，则每个文件都会运行http://localhost/，因此当您点击test.js时，Chrome会加载http://localhost/Scripts/test.js

您可以将所需的所有断点放在此文件中，Chrome也不会触及其中任何一个断点。如果在调用test.js中的任何函数之前在JS中放置断点然后进入该函数，您将看到Chrome打开一个新选项卡，其路径为/Scripts/test.js。将断点放在此文件中将停止程序流。

当我从JS文件中删除@ sourceURL行时，一切都正常工作（即你期望的方式）。

答案 2 :(得分：9)

可能是这个错误 https://code.google.com/p/chromium/issues/detail?id=278361

这是在Linux上使用我的Chrome 31.0.1650.57（官方版本235101）复制的。

我正在重启浏览器以修复它。

答案 3 :(得分：7)

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

答案 4 :(得分：3)

确保脚本带有“debugger;”其中的声明不是Chrome的黑盒子。如果是这样，您可以转到“来源”选项卡检查并关闭黑盒子。

编辑：添加了屏幕截图。

How to turn off blackboxing.

答案 5 :(得分：3)

我多次遇到过这种情况，起初它很好地被localhost使用，突然，断点不起作用，我切换到127.0.0.1，然后再次工作。希望有所帮助。

答案 6 :(得分：2)

我有一个缩小器，正在剥离debugger条陈述__（ツ）_ /

答案 7 :(得分：2)

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

答案 8 :(得分：2)

确保您在Chrome窗口中打开了javascript控制台（或多个来源）。否则它永远不会到达断点。 你可以通过右上角的选项按钮打开javascript控制台 - ＆gt;工具 - ＆gt; javascript控制台。

答案 9 :(得分：2)

确保您在设置映射时使用的URL中使用相同的主机。例如。如果您在设置和映射工作区时处于http://127.0.0.1/my-app，那么如果您通过http://localhost/my-app查看页面，则断点将无效。 另外，感谢您阅读这篇文章。请参阅我对Chromium问题here的回答。

答案 10 :(得分：2)

我在chrome和firefox中遇到过类似的问题，虽然它可能不是你问题的解决方案。我在这里分享，希望它可以帮助别人。我之前在其他不相关的项目中遇到过这种情况，但直到今天再次出现之前，我才明白为什么。

<强>情境：

我有一个页面使用两个来自同一个源和一组javascript文件的引导模式（blueimp＆＃39; s awesome jquery fileupload）。

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

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

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

我注意到断点只在Modal 1上触发。它们在动态添加的Modal 2上执行代码时不起作用，即使很明显代码确实正在被评估和运行。弹出警报框，执行代码类型的操作，输出遵循代码中规定的逻辑。

我没有深入研究进一步调查，因为我时间紧迫，但想把它放在那里并回馈社区。

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

答案 11 :(得分：1)

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

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

Screenshot: Applications tab

答案 12 :(得分：1)

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

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

答案 13 :(得分：0)

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

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

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

答案 14 :(得分：0)

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

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

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

要确定它不是浏览器，还应尝试在Firefox中对其进行调试。

答案 15 :(得分：0)

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

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

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

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

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

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

答案 16 :(得分：0)

正如我对chrome的经验，我们需要打开浏览器控制台，以便在加载页面时运行调试器。

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

debugger

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

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

enter image description here

答案 17 :(得分：0)

答案很晚，但以上都不对我的情况有所帮助，与众不同

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

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

下面的一个工作，断点达到预期的水平

 <script  src="ab.js" type="text/javascript"></script>

答案 18 :(得分：0)

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

答案 19 :(得分：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")

答案 20 :(得分：-1)

我在10K行文件中遇到了同样的问题。断点被忽略了，
硬编码的_debugger语句有效，但它们无法切换，并且在放入循环时可能会很烦人。 我的解决方案，这有点像黑客，但它的工作原理是将以下内容添加到文件的顶部：

    function uploadToLocationUrl(locationUrl, fileData,arrayBuffer)
   {


        var contentType = fileData.type || 'application/octet-stream';

        var requestPost = gapi.client.request({
            'path' : locationUrl,
            'method' : 'PUT',
            'headers' : {
                'Content-Type': contentType,
                "Content-Length": arrayBuffer.byteLength,

            },
            'data' : arrayBuffer
          });
        console.log(requestPost);

        requestPost.execute(function(resp, raw_resp) {
          console.log(resp);
        });



    }

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

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

相关问题
最新问题