Question

我正在使用Chrome来调试我的网站。但是，有时我想出这样的错误：

错误

Uncaught TypeError: Cannot set property 'display' of undefined

堆栈跟踪

f.extend.ajax
ClassLoader.performLoadWave

所以，我知道这是我的Ajax调用中的一些东西，可能在我的成功函数中。但是，我的成功函数需要很多东西。

我并不是真的在寻找帮助我调试代码的人，而只是问我如何调试它。我使用了很多console.log（）;但他们并没有真正帮助，我怎样才能正确找到像这样的错误？

编辑

要添加到我的问题，在这个例子中，错误是在我的AJAX调用加载的文件中，因为dataType被设置为'script'，但我怎么能知道这个而不必挖掘几个小时？

代码

对于任何关心我的代码的人来说，这是：

$.ajax({
    url: filePath,
    async: false,
    cache: !Settings.debugging,
    dataType: 'script',
    error: function(httpRequest, message, errorThrown){
        if(errorThrown == 'Not Found')
        {
            throw 'Include cannot be found.';
        }
        else
        {
            throw errorThrown + ': ' + (message == 'parsererror' ? 'This doesn\'t look like JavaScript!' : message);
        }
    },
    success: function(){

        $.each(newNeedsLoading, function(index, element){

            if(element !== undefined)
            {

                var className = element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                className = 'Plugin_' + element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                className = 'Plugin_Administration_' + element.className;
                if(window[className] && window[className]['included'])
                {
                    window[className]['included']();
                }

                if(element.completed)
                {
                    element.completed();
                }

            }

        });

        ClassLoader.isLoading = false;

    }
});

Answer 1

经过一番研究，这个问题几乎与这个问题重复：

Debugging scripts added via jQuery getScript function

Answer 2

你尝试过使用过firebug吗？您可以通过CONSOLE选项卡查看各个AJAX请求，包括您发送的参数和从服务器返回的响应。

http://getfirebug.com/releases/lite/chrome/

在控制台选项卡中，您应该右键单击并选择记录XMLHttpRequests。然后，您可以使用“网络”选项卡查看每个请求加载的各个项目。 “标题”面板将显示您的参数。 “预览”面板将显示您的预览。 “响应”面板将显示从您的服务器返回的错误或成功与您返回的任何数据。

Answer 3

Chrome还提供了记录http请求的选项，开发人员工具中的网络标签非常有用。

Answer 4

您可以在javascript的success函数（或error或其他地方）中设置断点。有关信息和浏览器内教程，请参阅Chrome Developer Tools: Breakpoints。在您的情况下，请特别注意Breakpoints on XHR。

当您点击断点时，您可以查看范围内任何变量的值。您还可以使用javascript控制台输入任何javascript，它将在当前范围内执行。

正如@cockroachbill所说，您还可以查看网络选项卡以查看所有流量，包括XHR（XMLHttpRequest）及其返回的内容。我特别喜欢预览标签。

google-chrome google-chrome-devtools debugging

如何调试jQuery AJAX

4 个答案: