Chrome的JavaScriptdebugging器断点不做任何事情？

我似乎无法弄清楚Chromedebugging工具。

我有铬版本21.0.1180.60米。

我采取的步骤：

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

我也注意到Watchexpression式也不工作。 它一直告诉我，我想观看的variables是未定义的。

进一步的testing发现，这是我的代码导致断点失败。 它似乎失败了“$（”＃frmVerification“）。提交（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; }); }); 

Answer 1

我不确定为什么你的断点没有打到，但是一步一步进入你的代码的方法就是input

 debugger; 

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

---

只需要注意一件小事，确保在完成后清理并移除debugging器线。 如果您曾经通过YUI压缩debugger;运行JavaScript文件，则存在debugger; 行会导致错误。

Answer 2

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

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

 //@ sourceURL=/Scripts/test.js 

当这个Javascript文件被浏览器缩小并加载时，它通常会告诉Chrome开发工具的未修剪版本。

但是，如果您正在debuggingunminified版本并且存在此行，则Chrome开发工具将映射到该sourceURLpath而不是“正常”path。

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

如果test.js在底部有这个

 //@ sourceURL=/Scripts/test.js 

那么断点只有在文件path是/Scripts/test.js时才有效，而不是http://localhost/scripts/test.js的完全限定的URL

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

你可以把所有你想要的断点放在这个文件中，而Chrome从不会碰到任何断点。 如果您在调用test.js中的任何函数之前在JS中放置断点，然后进入该函数，您将看到Chrome打开一个新选项卡，其path为/Scripts/test.js 。 在这个文件中放置断点将停止程序stream程。

当我从JS文件中删除@ sourceURL行时，所有事情都可以正常工作（即您期望的方式）。

Answer 3

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

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

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

Answer 4

我有类似的问题。 断点不工作，除非我使用debugger; 。 我用“恢复默认值和重新加载”修复了我的断点问题。 它位于Chrome开发人员工具，设置，恢复默认值和重新加载。

Answer 5

确保您在设置映射时的URL中使用了相同的主机。 例如，如果您在设置和映射工作空间时位于http://127.0.0.1/my-app ，那么如果通过http://localhost/my-app查看页面，断点将不起作用。 另外，感谢您阅读这一点。 在这里看到我对Chromium问题的回答。

Answer 6

确保你已经在你的chrome窗口中打开了javascript控制台（或源代码）。 否则将永远不会到达断点。 您可以通过右上angular的选项button – >工具 – > JavaScript控制台打开JavaScript控制台。

Answer 7

我遇到过好几次，一开始本地主机运行良好，突然间，断点不起作用，我切换到127.0.0.1，然后再次工作。 希望有帮助。

Answer 8

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

Answer 9

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

场景：

我有一个页面，使用两个引导模式来自相同的来源和一组JavaScript文件（blueimp的真棒jQueryfile upload）。

• BS Modal 1在页面加载（通过php）呈现，并始终存在于页面上。 它用于添加新的相关logging。 （CakePHP ….认为SalesForceytypes的东西）

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

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

我注意到断点只是在Modal 1上触发的。当代码在dynamic添加的Modal 2上执行时，它们不起作用，即使很明显代码确实正在被评估和运行。 警报框popup，代码types的东西得到执行，输出遵循代码中提出的逻辑。

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

PS：我一直都在用，但是这是我的第一篇文章，所以在我身上很容易:-)

Answer 10

所以，除了Adam Rackis的回答之外，如果你的JavaScript文件在断点上面有错误，那么不pipe你标记它还是放入debugger; ，你都不会达到它debugger; 。

这是一个例子：

 if (nonExistentVar === "something") { console.log("this won't happen as the above errors out"); } debugger; console.log("this won't print either") 

Answer 11

就像我使用chrome所经历的那样，我们需要打开浏览器控制台，使得debugging器在加载页面时运行。

把这个地方放在你想运行的JavaScript文件中

 debugger 

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

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

Answer 12

我在10K行文件中遇到同样的问题。 断点被忽略，
硬编码的_debugger语句正常工作，但是它们不能被切换，并且在放入循环时可能会变得烦人。 我的解决scheme，这是一个黑客，但它的工作原理是将以下内容添加到文件的顶部：

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

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

打开我的debugging只需inputmyDebuggerFlag = true; 在控制台线上。 （当然，你必须先脱离我的debugging器。

Answer 13

确保使用“debugging器”的脚本 它的声明不是由Chrome黑盒子。 如果是的话，你可以去源选项卡检查并closures黑匣子。

编辑：添加了截图。