如何调试 $(document).ready() 中包含的 javascript？答案

【问题标题】：How can I debug javascript contained in $(document).ready()?如何调试 $(document).ready() 中包含的 javascript？
【发布时间】：2013-03-11 09:58:02
【问题描述】：

我正在尝试在浏览器（特别是 Chrome）中调试一些 js。如何检查为 some_data 和 new_data 设置的值？

我意识到由于变量作用域仅限于函数，some_data 和 new_data 在文档 ready() 执行后不存在。

$(document).ready(function(){
   var some_data = [4, 8, 15, 16, 23, 42];
       var new_data = some_data * 2;
});

【问题讨论】：

console.dir(some_data); console.dir(new_data);
你有没有试过在 chrome 开发工具中设置断点。你也可以使用 conosle.log
您用答案标记了问题。在调试器中设置断点！
同意@NuclearGhost，设置断点会显示当前作用域内变量的值。
由于某种原因，我不允许添加答案，但 OP 正在提出的观点（“已回答”链接中以及这些答案中的任何一个都没有涵盖）是要想找到下断点的代码，必须先加载页面，也就是说document.ready事件已经处理过了，再下断点已经来不及了。我找到的解决方案（至少在 chrome 中）是加载页面，设置断点，然后重新加载页面。随着脚本重新加载，您上次放置的断点会重新建立，因此它们会再次触发。

标签： javascript jquery debugging google-chrome breakpoints

【解决方案1】：

使用开发者工具。如果您使用的是 chrome，请按 F12，转到源代码，找到您的 javascript 所在的文件，找到您的代码，设置断点（通过单击要设置断点的行的左侧），然后按 F10 执行逐行。您只需将鼠标悬停在变量名称上，它就会为您提供当前值。

【讨论】：

您也可以使用 F10 的逐个调用功能而无需断点。

【解决方案2】：

您可以在 IE、Chrome 中使用开发者工具栏。对于 Firefox 使用 Firebug，这是一个 Firefox 附加组件。对于 Safari 使用检查元素。所有大多数浏览器都支持以下键：

F10- execute line by line(step over next function call)
F11- (step into next function call)
F8- Pause script execution.

【讨论】：

【解决方案3】：

我的两分钱...

在代码中写下debugger这个词...会立即生成一个断点，如果你点击 (ctrl + i) 会显示调试器控件...

最好的

【讨论】：