在Chrome开发人员工具上测试jQuery / JS输出

Question

我有一个方法可以创建2个带数据的数组。我希望能够将这些数组包含在JSON中。这是我的代码：

$(document).ready(function() {
    $("button").click(function(){
        var configs = [];
        var testPages = [];
        $(".test input:checked").each(function() {
            testPages.push($(this).attr('id'));
        });
        $(".config input:checked").each(function() {
            configs.push($(this).attr('id'));
        });
        //console.log(configs);
        //console.log(testPages);

        var testJson = new Object();
        testJson.testpages = testPages;
        testJson.configurations = configs;
        var runTestJson = JSON.stringify(testJson);
        return runTestJson;
    });
});

我希望能够针对我的页面对此进行测试，但我不熟悉jQuery，Javascript以及使用Chrome开发人员工具。我不确定如何在Chrome控制台中对此进行测试。

显示了注释部分（console.log()s），但是当我键入configs或testPages以尝试查看数组时，我会收到错误，指出它们未定义。如何测试我是否在Chrome开发人员工具上为我的代码获取了正确的输出？

Answer 1

您需要将这两个变量设为全局变量。请注意，不建议不必要地污染全局范围。但如果它只是用于测试，那么我认为它没问题。

// global scope
var configs = [];
var testPages = [];
$(document).ready(function() {
    $("button").click(function(){
        $(".test input:checked").each(function() {
            testPages.push($(this).attr('id'));
        });
        $(".config input:checked").each(function() {
            configs.push($(this).attr('id'));
        });
        //console.log(configs);
        //console.log(testPages);

        var testJson = new Object();
        testJson.testpages = testPages;
        testJson.configurations = configs;
        var runTestJson = JSON.stringify(testJson);
        return runTestJson;
    });
});

Answer 2

您可以在不填充全局空间的情况下调试JavaScript，如下所示（基于chrome的说明，但在主要浏览器中类似）：

• 打开开发者控制台 F12
• 转到Sources标签
• 打开脚本文件（ Ctrl + o 并输入文件名）
• 点击要调试的行号
来设置断点
• 刷新页面，执行将在该行停止

。您可以进一步使用调试工具栏中的可用控件： <子>

按照您的意愿继续执行，每个控件都有自我描述性的工具提示。您可以通过将变量悬停在变量上或手动选择它们来查看变量中的值。