当前位置：theitroad>Chrome javascript 调试器断点不执行任何操作？

Chrome javascript 调试器断点不执行任何操作？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/11788081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-24 07:05:36 　来源:igfitidea点击:

Chrome javascript debugger breakpoints don't do anything?

javascriptdebugginggoogle-chrome

提问by chaser

I can't seem to figure out the Chrome debugging tool.

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

I have chrome version 21.0.1180.60 m.

我有 chrome 版本 21.0.1180.60 m。

Steps I took:

我采取的步骤：

  1. I pressed ctrl-shift-i to bring up the console.
  2. Clicked on Sources then select the relevant javascript file that I want to debug.
  3. I set breakpoints where I want the code to stop by putting a blue tag on the gutter next to the line on the left.
  4. I clicked on the button on my webpage (which is a php rendered page) that initiates the javascript code.
  5. The code ran successfully without stopping.
  1. 我按下 ctrl-shift-i 调出控制台。
  2. 单击 Sources，然后选择我要调试的相关 javascript 文件。
  3. 我在我希望代码停止的地方设置断点，方法是在左边的行旁边的排水沟上放置一个蓝色标签。
  4. 我点击了我的网页（这是一个 php 呈现的页面）上启动 javascript 代码的按钮。
  5. 代码成功运行，没有停止。

I also noticed that the Watch Expressions don't work either. It keeps telling me that the variable that I want to watch is undefined.

我还注意到 Watch Expressions 也不起作用。它一直告诉我我想观察的变量是未定义的。

Further testing found that it's my code that's causing the breakpoint to fail. It seems that it fails on the "$("#frmVerification").submit(function(){" line. It doesn't step into the breakpoints inside that function().

进一步测试发现是我的代码导致断点失败。似乎它在 "$("#frmVerification").submit(function(){" 行上失败了。它没有进入 function() 内的断点。

Below is the:

以下是：

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

回答by Adam Rackis

I'm not sure why your breakpoints aren't hitting, but one sure-fire way to step into your code is to type

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

debugger;

where you want the code to halt, and then run again with the chrome developer tools window open.

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

Just one small thing to be aware of, be sure to clean up after you done and remove the debugger lines. If you ever run JavaScript files through YUI compressor, the existence of a debugger;line will cause it to error out.

只需注意一件小事，请务必在完成后清理并删除调试器行。如果你曾经通过 YUI 压缩器运行 JavaScript 文件，debugger;一行的存在会导致它出错。

回答by Stephen

This is a late answer, but I had the same problem, but the answer was different.

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

In my case, there was a sourceURL reference in my code:

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

//@ sourceURL=/Scripts/test.js

When this Javascript file is minified and loaded by the browser, it normally tells Chrome Dev Tools where the unminified version is.

当这个 Javascript 文件被浏览器缩小并加载时，它通常会告诉 Chrome Dev Tools 未缩小版本的位置。

However, if you are debugging the unminified version and this line exists, Chrome Dev Tools maps to that sourceURL path instead of the "normal" path.

但是，如果您正在调试未缩小版本并且此行存在，则 Chrome Dev Tools 会映射到该 sourceURL 路径而不是“正常”路径。

For example, if you work locally on a web server, then in the Sources tab in Chrome Dev Tools, the path to a given JS file will be http://localhost/Scripts/test.js

例如，如果您在本地 Web 服务器上工作，那么在 Chrome Dev Tools 的 Sources 选项卡中，给定 JS 文件的路径将是 http://localhost/Scripts/test.js

If test.js has this at the bottom

如果 test.js 在底部有这个

//@ sourceURL=/Scripts/test.js

then breakpoints will only work if the file path is /Scripts/test.js, not the fully-qualified URL of http://localhost/Scripts/test.js

那么断点仅在文件路径为 时才起作用/Scripts/test.js，而不是完全限定的 URLhttp://localhost/Scripts/test.js

In Chrome 38, staying with my example above, if you look at the Sources tab, every file runs off http://localhost/, so when you click on test.js, Chrome loads up http://localhost/Scripts/test.js

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

You can put all the breakpoints you want in this file, and Chrome never hits any of them. If you put a breakpoint in your JS before it calls any function in test.js and then step into that function, you will see that Chrome opens a new tab whose path is /Scripts/test.js. Putting breakpoints in this file will stop the program flow.

你可以把所有你想要的断点放在这个文件中，Chrome 永远不会命中它们中的任何一个。如果在调用 test.js 中的任何函数之前在 JS 中放置一个断点，然后进入该函数，您将看到 Chrome 打开一个路径为/Scripts/test.js. 在此文件中放置断点将停止程序流程。

When I got rid of the @ sourceURLline from the JS file, everything works normally again (i.e. the way you would expect).

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

回答by gumkins

Probably this bug https://code.google.com/p/chromium/issues/detail?id=278361

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

This is reproduced with my Chrome 31.0.1650.57 (Official Build 235101) on Linux.

这是在 Linux 上用我的 Chrome 31.0.1650.57（官方版本 235101）重现的。

I'm restarting browser to fix it.

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

回答by user2274860

I got a similar problem. Breakpoints where not working unless I used debugger;. I fixed my breakpoints problem with "Restore defaults and reload". It's located in the Chrome Developer Tools, Settings, Restore defaults and reload.

我遇到了类似的问题。除非我使用debugger;. 我用“恢复默认值并重新加载”修复了我的断点问题。它位于 Chrome 开发者工具、设置、恢复默认值和重新加载中。

回答by John Alexander

Make sure the script with the "debugger;" statement in it is not blackboxed by Chrome. You can go to the Sources tab to check and turn off blackboxing if so.

确保脚本带有“调试器”；其中的声明没有被 Chrome 黑盒化。如果是这样，您可以转到“源”选项卡检查并关闭黑盒。

EDIT: Added screenshot.

编辑：添加了屏幕截图。

How to turn off blackboxing.

如何关闭黑盒。

回答by dasons

I met this several times, at first it works well by localhost, suddenly, the breakpoints don't work, i switch to 127.0.0.1, then it works again. Hope helps.

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

回答by Mikey4Dice

I encountered similar problems in both chrome and firefox though it may not be the solution for your issue. Am sharing here in the hopes it may help others. I have encountered this situation before in other unrelated projects but never understood why until it cropped up again today.

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

Scenario:

设想：

I have one page that uses two bootstrap modals that come from the same source and one set of javascript files (blueimp's awesome jquery fileupload).

我有一个页面使用来自同一来源的两个引导模式和一组 javascript 文件（blueimp 的很棒的 jquery 文件上传）。

  • BS Modal 1 is rendered on page load (via php) and is always present on the page. It is used for adding a new related record. (CakePHP....think SalesForcey type stuff)

  • BS Modal 2 is used for editing existing related records and it's html content is pulled in from an ajax call and appended to the DOM via jQuery.

  • Javascript supporting both modals included via standard html <script>tags.

  • BS Modal 1 在页面加载时呈现（通过 php）并且始终出现在页面上。它用于添加新的相关记录。（CakePHP ......想想 SalesForcey 类型的东西）

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

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

I noticed that breakpoints are only triggered on Modal 1. They do not work when the code is being executed on the dynamically added Modal 2, even though it is quite obvious that the code is indeed being evaluated and run. Alert boxes pop up, codey type things get executed and output follows the logic set forth in the code.

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

I have not dived deeper to investigate further because I'm pressed for time, but wanted to put it out there and give back to the community.

由于时间紧迫，我没有深入研究以进一步调查，但我想将其发布并回馈社区。

PS: I use SO all the time, but this is my first post, so go easy on me :-)

PS：我一直使用 SO，但这是我的第一篇文章，所以请放轻松 :-)

回答by David Gilbertson

Make sure that you're using the same host in the URL that you were when you set up the mapping. E.g. if you were at http://127.0.0.1/my-appwhen you set up and mapped the workspace then breakpoints won't work if you view the page via http://localhost/my-app. Also, thanks for reading this far. See my answer to the Chromium issue here.

确保您在 URL 中使用与设置映射时相同的主机。例如，如果您在http://127.0.0.1/my-app设置和映射工作区时在 ，那么如果您通过http://localhost/my-app. 另外，感谢您阅读到这里。在此处查看我对 Chromium 问题的回答。

回答by Thilak

make sure that you have opened javascript console(or sources) in your chrome window. otherwise it will never hit the breakpoint. you can open javascript console by option button in right upper corner-->tools-->javascript console.

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

回答by DaneEdw

I had an issue where Chrome's breakpoints weren't firing anything. When I tried to use 'debugger' in my code, I could only step through the code in the VM version of my code. My issue was that I was mapping the resources incorrectly. Re-mapping fixed my problem.

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

相关推荐

Javascript 如何在highcharts中设置动态数据

Javascript 如何在highcharts中设置动态数据

Javascript 在javascript中淡入淡出

Javascript 在javascript中淡入淡出

Javascript/Jquery 将字符串转换为数组

Javascript/Jquery 将字符串转换为数组

Javascript 之后用 PHP 函数确认

Javascript 之后用 PHP 函数确认

相关推荐
最近更新
标签