Тестирование вывода jQuery/JS в инструментах разработчика Chrome

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

Вы можете отлаживать JavaScript без заполнения глобального пространства следующим образом (Инструкцию на основе chrome, но похож в основных браузерах):

• консоль Открытого разработчика F12
• идет в Sources tab
• Откройте файл сценария (Ctrl + о и введите имя файла)
• Поместите контрольную точку, нажав на номер строки, который вы хотите отладить
• Обновить страницу казнь будет остановлен на этой линии

. Вы можете дополнительно использовать доступные элементы управления в панели инструментов отладки:

продолжить выполнение, как вы хотите, каждый из управления имеет самоописательные всплывающие подсказки. Вы можете видеть значения в переменных, зависая над ними или вручную их выбирать.

Answer 2

Вам нужно будет сделать эти две переменные глобальными. Просто будьте осторожны, что нежелательное загрязнение глобальной области не рекомендуется. Но если это просто для тестирования, то я полагаю, что все в порядке.

// 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; 
    }); 
});