如何调试挂起浏览器的JavaScript？

我正在开发一个相当大的富web页面JavaScript应用程序。出于某种原因，最近的一次更改导致它随机挂起浏览器

---

我怎样才能缩小问题的范围？由于浏览器没有响应，因此我看不到任何错误，也无法使用FireBug在下一个中中断。

要隔离问题，您可以从删除/禁用/注释代码的不同部分开始，直到您将代码缩小到一个小部分，这样您就可以找到错误。另一种可能是查看最近提交的不同更改的源代码管理签入历史记录。希望您能够理解问题的来源。

您可以添加

调试器JS代码中的任意位置手动设置断点。它将暂停执行并允许您恢复/检查代码（Firebug/FF）

Firebug Wiki页面：
根据我的经验，导致浏览器无响应的问题通常是无限循环之类的

作为一个起点，调查你的循环是否有愚蠢的事情，比如不增加你以后依赖的东西

正如早些时候的一张海报所说，除此之外，注释掉一些代码来隔离问题。你“可以”使用一种分而治之的方法，几乎逐字逐句地注释掉一半的页面，如果它处理了不同的错误，你可能已经找到了正确的一点

然后将其一分为二，以此类推，直到找到罪魁祸首。
您应该使用调试控制台日志，而不是对代码进行注释

您应该使用大多数现代浏览器提供的
console.log（）
功能，或者在使用不支持它的浏览器时模拟它

每次调用
console.log（'sometext'）
，都会在浏览器的调试控制台中创建一个带有指定文本的日志条目，后面通常是实际时间

您应该在应用程序流的每个关键部分之前设置一个日志条目，然后设置越来越多的日志条目，直到找到没有调用的日志。这意味着该日志之前的代码将挂起浏览器

您还可以编写自己的带有附加功能的个人日志函数，例如某些特定变量的状态，或包含程序流更详细方面的对象，等等

示例

console.log('step 1');

while(1) {}

console.log('step 2');

无限循环将停止程序，但您仍然可以看到控制台日志，其中记录了程序流，直到程序停止

因此，在本例中，您不会在控制台日志中看到“步骤2”，但会看到“步骤1”。这意味着程序在步骤1和步骤2之间暂停

然后，您可以在两个步骤之间的代码中添加额外的控制台日志，以深入搜索问题，直到找到为止。
安装GoogleChrome，转到您的页面，按f12，开发者控制台将弹出。然后选择脚本按钮，然后从控制台左上角的下拉列表中选择脚本（例如：myScript.js）。然后单击第一行（或您认为不挂起的行），将创建一个断点。javascript到达断点后，单击控制台右上角的一个按钮（您将看到一个类似暂停符号的按钮，然后是其他4个按钮）按下2º按钮（或暂停后跨过的按钮）或3º按钮（跨入）。把鼠标放在按钮上，它们会向你解释它们的意思。
然后像这样插入代码，直到它挂起，然后可以更好地调试它

Google Chrome调试器比firebug好得多，速度更快。我改变了firebug，这真是太棒了！；）
 我知道这很简单，但我喜欢在我的js代码中撒上“警报”，看看我的代码在出现问题之前能走多远。如果警报窗口太烦人，您可能会设置一个文本区域，可以在其中附加日志：

<textarea id='txtLog' ...></textarea>

<script>

...
function log(str) {
    $('#txtLog').append(str + '\n');
}
log("some message, like 'Executing Step #2'...");
...

</script>


...
函数日志（str）{
$（'#txtLog'）。追加（str+'\n'）；
}
日志（“一些消息，如‘执行步骤#2’…”）；
...
我知道这个问题很老，但在VS2013中，您可以按暂停按钮获得完整的JS堆栈跟踪。这让我抓狂，因为循环在角度内，所以我不能真正地输入警报、断点等，因为我不知道把它们放在哪里。我不知道它是否适用于免费的快速版，但值得一试

我还读到Chrome有一个暂停功能，所以这可能是一个选项，但我自己还没有尝试过。
我很惊讶这个问题还没有得到正确的回答，投票最多的答案基本上是“把控制台日志放在任何地方，直到你弄明白为止”，这并不是一个真正的解决方案，尤其是对于更大的应用程序，除非你真的想把所有的时间都花在复制粘贴“控制台日志”上

无论如何，您所需要的只是
调试器有人已经提到了这一点，但没有真正解释如何使用它：

在chrome（和大多数其他浏览器）中，
调试器
将停止执行，将您带到开发人员控制台，并在左侧显示当前正在执行的代码，在右侧显示堆栈跟踪。在控制台的右上角有一些箭头状的按钮。第一个是“恢复脚本执行”。我们想要的是下一个“跳过下一个函数调用”

基本上，您所需要做的就是在代码中的任何位置放置一个调试器，在您知道页面尚未冻结的位置，然后运行调试器，并反复单击“跳过下一个函数调用”，这看起来像一个箭头跳过一个圆。它将逐行、逐个调用地执行脚本，直到它挂起/陷入无限循环。在这一点上，您将能够准确地看到代码被卡住的地方，以及所有的问题
console.log(new Date() + " started Function Name or block of lines from # to #");

// functions or few lines of code

console.log(new Date() + " finished Function Name or block of lines from # to #")

function augment(withFn) {
    var name, fn;
    for (name in window) {
        fn = window[name];
        if (typeof fn === 'function') {
            window[name] = (function(name, fn) {
                var args = arguments;
                return function() {
                    withFn.apply(this, args);
                    return fn.apply(this, arguments);

                }
            })(name, fn);
        }
    }
}

augment(function(name, fn) {
    console.log("calling " + name);
});