Отладка серверного скрипта
-
Открыв проект в Visual Studio, откройте файл JavaScript с серверным скриптом (например, server.js) и щелкните в области слева, чтобы задать точку останова:
Точки останова — это один из самых простых и важных компонентов надежной отладки. Точка останова указывает, где Visual Studio следует приостановить выполнение кода, чтобы вы могли проверить значения переменных или поведение памяти либо выполнение ветви кода.
-
Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка > Начать отладку).
Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные и Контрольные значения.
-
Чтобы продолжить выполнение приложения, нажмите клавишу F5.
-
Если вы хотите использовать Средства Chrome для разработчиков (средства F12), нажмите клавишу F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением с помощью консоли JavaScript.
Ссылки [ править ]
- Санджив Кумар Аггарвал; М. Сарат Кумар (2003). «Отладчики языков программирования». В Ю.Н. Сриканте; Прити Шанкар (ред.). Справочник по проектированию компиляторов: Оптимизация и создание машинного кода . Бока-Ратон, Флорида: CRC Press . С. 295–327. ISBN 978-0-8493-1240-3.
- Джонатан Б. Розенберг (1996). . Джон Вили и сыновья . ISBN 0-471-14966-7.
Цитаты править
- Аггарвал и Кумар, стр. 302.
- Аггарваль и Kumar 2003, стр. 301.
- Аггарваль и Кумар, стр. 307-312.
- О’Каллахан, Роберт; Джонс, Крис; Фройд, Натан; Хьюи, Кайл; Нолл, Альберт; Партуш, Нимрод (2017). «Техническая запись и воспроизведение расширенного технического отчета о возможности развертывания». arXiv
- Филип Клэссен; Отменить программное обеспечение. . Обмен стеком программистов . Стек биржа, Inc . Проверено 12 апреля 2015 года .
- Аггарваль и Kumar 2003, стр. 299-301.
- . IBM . Проверено 7 мая 2015 .
- . Проверено 29 мая 2015 .
3 Исходная панель
Наиболее важной панелью для отладки является панель «Источник», в которой мы сосредоточимся на функциях этой панели. Откройте панель Source, мы увидим следующий интерфейс: Существует три области: область ресурсов, рабочая область и консоль, которые представлены отдельно
3.1 Область ресурсов
【Page】: Отображение файлов ресурсов (рисунки, таблицы стилей CSS, сценарии JS и т. Д.), Содержащихся на текущей веб-странице. Изменения кода в рабочей области здесь не сохраняются и будут сброшены при обновлении страницы.
【Filesystem】: Когда наша веб-страница является локальной, мы можем добавить локальную папку проекта в рабочую область DevTools через вкладку Файловая система, чтобы напрямую сохранить модификацию страницы в локальной, а также обеспечить управление локальными файлами (добавить Файлы, удалять файлы, изменять файлы и т. Д.). Таким образом, он позволяет нам изменять исходный код во время отладки без необходимости переключаться между DevTools локально.
【Overrides】: Когда наша веб-страница находится на удаленном сервере, а локальный исходный код проекта отсутствует, мы также можем выбрать каталог на вкладке «Переопределения» и позволить DevTools создать папку для сохранения всех изменений на удаленной веб-странице. После завершения изменения используйте эти файлы для прямой перезаписи исходного файла на удаленном сервере, чтобы завершить изменение страницы.
【Content script】: Он используется для хранения независимого пространства JS-скрипта «внедренной» страницы расширения Chrome (здесь JS-скрипт разделяет DOM и механизм сообщений страницы, а JS-скрипт страницы не знает о существовании друг друга и не может получить доступ к переменным и функциям друг друга ).
【Snippets】: Translated — это фрагмент, вы можете создать здесь фрагмент кода, запускать и отлаживать его независимо, обновление страницы не будет потеряно.
3.2 Рабочая зона
Щелкните номер строки, чтобы добавить / удалить точки останова, открыть контекстное меню, вызываемое правой кнопкой мыши, чтобы отключить точку останова, и установить условия запуска точки останова для редактирования (например, вы можете указать, сколько раз точка останова будет срабатывать после цикла программы). Меню правой кнопки мыши в этой области предоставит множество функций, попробуйте сами!
3.3 Зона контроля
Имеются кнопки операций отладки и отображение некоторой информации об отладке.
Кнопки вверху являются основными кнопками для отладки кода.Для студентов, которые использовали другие IDE, им легко пользоваться, и о них не так много говорить (если вы не знакомы с кодом отладки, ознакомьтесь со справочной ссылкой в конце статьи). Кнопка справа от значка паузы (Пауза при исключении), ее роль — приостановить выполнение кода после возникновения исключения.
【Watch】: Следуйте за переменной мониторинга, нажмите знак «+», чтобы добавить имя переменной.
【Call Stack】: Стек вызовов функций, показывающий путь выполнения.
【Scope】: Просмотр области атрибута.
【Beakpoints】: Здесь вы можете просмотреть все состояние и точку включения точки останова.
【XHR/fetch Breakpoints】: Точка останова срабатывает, когда URL-адрес XHR-запроса содержит определенную строку.
【DOM Breakpoints】: Точка останова срабатывает при изменении узла или его дочерних элементов.
【Global Listeners】: Глобальный слушатель, событие привязано к объекту окна.
【Event Listener Breakpoints】: Точка останова срабатывает при возникновении события.
Интерфейсы отладчика [ править ]
Некоторые из наиболее эффективных и популярных отладчиков реализуют только простой интерфейс командной строки (CLI) — часто для максимальной переносимости и минимизации потребления ресурсов. Разработчики обычно считают отладку с помощью графического пользовательского интерфейса (GUI) более простой и продуктивной. необходима цитата Это причина появления визуальных интерфейсов, которые позволяют пользователям контролировать и управлять подчиненными отладчиками, работающими только с интерфейсом командной строки, через графический пользовательский интерфейс . Некоторые интерфейсы отладчика с графическим интерфейсом пользователя разработаны для совместимости с различными отладчиками, работающими только с интерфейсом командной строки, в то время как другие ориентированы на один конкретный отладчик.
Отладка на мобильных устройствах
Тестирование и отладка мобильных веб-приложений возможны через симуляторы или эмуляторы. Но если в интерфейсе веб-приложения используются касания экрана, тогда отладку и тестирование лучше выполнять на реальных мобильных устройствах. Если определенная функция нормально работает на физических тестовых устройствах, то можно гарантировать, что она будет работоспособной и на других.
Но обычно я не использую для отладки мобильных приложений ни симуляторы, ни эмуляторы. Потому что симуляторам не доверяю, а эмуляторы замедляют работу компьютера. Вместо них применяю методику настройки процесса удаленной отладки через браузер Chrome. Подробнее об этом см. здесь: Как удаленно отлаживать сайты на Android с помощью Chrome DevTools.
Простая и быстрая эмуляция операций с битовыми строками Промо
Битовые строки могли бы упростить реализацию некоторых алгоритмов на языке платформы «1С: Предприятие 8». Но пока в платформе операций с битовыми строками нет. В то же время уже сделанные попытки смоделировать эти операции преобразованиями над числами опираются на циклы обработки отдельных битов, что плохо сказывается на скорости их работы. Предлагается новое простое решение, основанное на представлении битовых строк строками символов «0» и «1». Приводится примеры кода выполнения основных логических операций AND, OR, XOR, NO без использования циклов.
В качестве прикладной задачи рассмотрено получение последовательных значений кода Грэя, который можно использовать для ускорения перебора вариантов.
Контрольные точки
Когда браузер загружает страницу, код JavaScript выполняется до тех пор, пока не будет достигнута точка останова.
На этом этапе выполнение останавливается, и вы можете все проверить свою запущенную программу.
Вы можете проверить значения переменных и возобновить выполнение программы по одной строке за раз.
Но сначала, что такое точка останова? В своей простой форме точка останова — этоинструкция вставьте в свой код. Когда браузер встречает это, он останавливается.
Это хороший вариант при разработке. Другой вариант — открыть файл на панели «Источники» и щелкнуть число в строке, в которой вы хотите добавить точку останова:
Повторный щелчок по точке останова удалит ее.
После добавления точки останова вы можете перезагрузить страницу, и код остановится в этой точке выполнения, когда найдет точку останова.
Когда вы добавляете точку останова, вы можете видеть вКонтрольные точкипанель, котораяонлайнимеет точку останова. Вы можете увидеть все свои точки останова и временно отключить их.
Есть и другие типы точек останова:
- Точки останова XHR / выборки: срабатывает при отправке любого сетевого запроса
- Точки останова DOM: срабатывает при изменении элемента DOM
- Точки останова прослушивателя событий: срабатывает, когда происходит какое-то событие, например, щелчок мышью
Другие способы прервать выполнение кода
Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.
Остановка при изменении DOM
Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.
На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.
Остановка при появлении всех или необрабатываемых исключений
Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘Pause’ в нижней строке интерфейса.
Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:
var t = 3,
p = 1;
function calcPhotos(total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;
// Первая группа
console.info("Total difference is now " + total_photos_diff);
// Обновляем значения
t = t+5;
p = p+1;
// Необрабатываемое исключение
if (total_photos_diff > 300) {
throw 0;
}
// Обрабатываемое исключение
if (total_photos_diff > 200) {
try {
$$('#nonexistent-element').hide();
} catch(e) {
console.error(e);
}
}
}
setInterval(function() {
calcPhotos(t,p);
},50);
Советы по быстрому и грязному ведению журнала разработки с помощью console.log()
Не используйте console.log ().
Да все верно. Я не использую console.log(). Хорошо, хорошо, я пишу обертки, которые используют console.log() (подробнее об этом в разделе ведения журнала для производства), но если вы хотите что-то регистрировать в своем приложении, чтобы увидеть, что происходит, вместо этого используйте console.trace(). Помимо предоставления вам всего, что делает console.log(), он также выводит всю трассировку стека, чтобы вы знали, откуда именно было отправлено сообщение.
Это просто — используйте синтаксис вычисляемых свойств ES6 и заключите объекты, которые вы хотите регистрировать, в фигурные скобки внутри console.log(), то есть используйте console.log({user}) а не console.log(user). Это сделает вывод более аккуратно связанными с именем переменной, установленным в качестве ключа, и значением в качестве самого объекта. Это особенно полезно, когда вы спешите и хотите зарегистрировать несколько объектов одной командой console.log().
Используйте многоуровневые уровни журнала — error, warn, info
console.log(param) по умолчанию ведет журнал на уровне INFO — однако в вашем распоряжении также есть 3 других уровня ведения журнала, которые вы должны использовать — console.debug(), console.warn() и console.error()
Помимо различий в форматировании (обратите внимание на разные цвета!), Консоль разработчика браузера также позволяет легко фильтровать журналы на разных уровнях с помощью удобного раскрывающегося списка, чтобы очистить журналы
При регистрации списков элементов используйте console.table()
Эта функция не требует пояснений и является одной из моих любимых консольных функций — если вам когда-нибудь понадобится вывести список объектов, попробуйте console.table().
Быстрая отладка с помощью debugger
Хотите сэкономить несколько драгоценных секунд? Вместо того, чтобы находить свой файл в консоли разработчика для добавления точки останова, добавьте отладчик в свой код, чтобы остановить выполнение при выполнении строки. С этого момента вы можете выполнять отладку и переходить к функциям, как обычно.
Хотите профилировать точный поток пользователей в своем приложении, чтобы найти горячие точки? Запустите console.profile(profileName) в начале действия и console.profileEnd(profileName) в конце, чтобы проверить профиль ЦП для потока.
В связи с этим вы можете точно измерить, сколько времени занимает поток, запустив console.time(id) в начале потока и console.timeEnd(id) в конце.
Считайте отмеченные executions с помощью console.count()
Это одна из тех функций консоли, в которых я не нашел особого применения, но она тем не менее существует. console.count(label) может помочь вам точно узнать, сколько раз выполняется фрагмент кода, что может быть полезно для поиска и устранения условий гонки и других сценариев.
Сделайте ваш лог более красивым с помощью CSS
Это, безусловно, моя любимая функция консоли, и я широко использую ее в производственном журнале (подробнее об этом в разделе производственного журналирования). Вы можете использовать отформатированные строки для форматирования сообщений журнала. %с — это заполнитель для стилей CSS, а все, что находится после, — ваше сообщение.
Вы также можете стилизовать несколько элементов, расширив строку формата, включив %s для строковых параметров.
Поскольку я очень наглядный человек, мне нравится тратить время на то, чтобы моя информация и журналы отладки выглядели красиво и в то же время были полезными. Я широко использую эту функцию для ведения журналов в Firecode.io, что является отличным переходом к следующему разделу.
Сообщения об ошибках в IE
Самый простой способ отслеживания ошибок — включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.
Двойной щелчок по этому значку приведет вас к диалоговому окну, отображающему информацию о конкретной ошибке.
Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.
Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже —
Левая часть вкладки Элементы
Dom дерево
Прежде всего, можно проверить элементы DOM дерева. Чтобы развернуть, нажмите на треугольник слева.
Нажимая правую кнопку мыши, мы открываем некоторые дополнительные опции:
Добавить атрибут — добавить новый атрибут к выбранному элементуИзменить атрибут — отредактировать атрибут, доступный только при нажатии на атрибутРедактировать как HTML — выбрав это, вы можете редактировать весь элемент; также полезно скопировать часть элемента, который вы хотите использовать в другом месте
Копирование:
Copy outerHTML — копирует html, включая сам тег и дочерний элементCopy selector — копирует селектор CSS (div> span> #id)Copy XPath — копирует XPath // * / div / div / time, поясним дальшеCut element — вырезает элементCopy element — копирует элемент и дочерние элементыHide element — временно скрыть элемент, добавив display: none; (cmd + H / ctrl + H)Delete element — удалить элементы и дочерние элементы, можно изменить на cmd + zExpand all — развернуть все узлыCollapse all — свернуть все узлы:active — устанавливает элемент в активном состоянии:hover — устанавливает элемент в наведенном состоянии:focus — устанавливает фокус на элемент:visited — устанавливает элемент в посещенном состоянииScroll into view — сразу же попадает на выбранный элемент на веб-странице
Остановиться на:
модификация поддерева — установить точку останова при модификации поддеревамодификация атрибута — установить точку останова при изменении атрибутаудаление узла
Брейкпоинты — Практика
Понимание брейкпоинтов без практики может быть затруднительным, особенно если вы не сталкивались с ними раньше. Чтобы помочь вам в этом, я создал простой пример для вас, чтобы вы сами попробовали.
Инструкции находятся в файле HTML.
Если отладчик останавливается на jQuery, вы можете прменить blackbox библиотеки (рисунок ниже).
Выбор элементов в реальном времени
Нажмите этот значок, и вкладка «Элементы» будет следовать за вашим курсором на экране, выбрая узлы в реальном времени.
Делаем скриншот узла
Отличный трюк, который позволяет вам сделать png-файл с выбранным узлом:
- Выберите элемент, который вы хотите захватить, нажав левую кнопку мыши
- Откройте командное меню с помощью Cmd + Shift + P / Ctrl + Shift + P
- Введите node screenshot и выберите Capture node screenshot
Найти строку, селектор или XPath
Когда панель элементов открыта, нажмите cmd / ctrl + shift + F и получайте развлекайтесь с этим умельцем.
Как вы можете видеть на рисунке ниже, введите внутри любую строку, селектор CSS или XPath для поиска любого узла на вашей странице.
Аргументы командной строки
В следующей таблице перечислено влияние различных runtime флагов при отладке:
| Флаг | Значение |
|---|---|
| —inspect |
|
| —inspect= |
|
| —inspect-brk |
|
| —inspect-brk= |
|
|
Современная отладка JavaScript
Здравствуйте! В продолжении темы поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле — Chrome.
В принципе такие инструменты есть в любом браузере, а если учесть, что большая часть браузеров работает на одном движке, что и Chrome, то тут в принципе не будет особых различий. Также еще очень хорош Firefox со своим инструментом Firebug.
Общий вид панели Sources
Запустите браузер Chrome.
Нажмите F12, при этом запустятся Инструменты разработчика.
Перейдите на вкладку Source
Здесь можно выделить 3 зоны:
- Область исходных файлов. В ней находятся все файлы проекта
- Область текста. В этой области находятся текст файла
- Область информации и контроля. О ней разговор пойдет позже
Как правило при отладке область исходных файлов не нужна, поэтому ее можно скрыть кнопкой.
3 наиболее часто используемые кнопки управления:
Формат
Консоль
Окно
Точки останова
Рассмотрим на примере файла pow.js. Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.
Выглядеть это примерно так:
Еще точку останова называют брейкпойнт это больше жаргонизм, который ассимилировался в нашем языке и дословно тоже означает точка прерывания.
В коде, где вы сделали точку останова можно смотреть значения переменных на каждом шаге, в общем всячески его отслеживать.
Информация о точке останова появляется на вкладке Br
# Step 5: Set a line-of-code breakpoint
Line-of-code breakpoints are the most common type of breakpoint. When you’ve got a specific line of code that you want to pause on, use a line-of-code breakpoint:
-
Look at the last line of code in :
-
To the left of the code you can see the line number of this particular line of code, which is 32. Click on 32. DevTools puts a blue icon on top of 32. This means that there is a line-of-code breakpoint on this line. DevTools now always pauses before this line of code is executed.
-
Click Resume script execution . The script continues executing until it reaches line 32. On lines 29, 30, and 31, DevTools prints out the values of , , and to the right of each line’s semi-colon.
Figure 6. DevTools pauses on the line-of-code breakpoint on line 32
Повысьте конфиденциальность Firefox, изменив настройки
В жизни часто приходится идти на компромисс. Если вы готовы отказаться от некоторой степени удобства ради своей конфиденциальности и безопасности, вам придется отключить определенные функции программы.
Чтобы повысить конфиденциальность Firefox, мы сначала должны получить доступ к меню настроек, нажав на три горизонтальные линии в правом верхнем углу браузера.
В меню «Начало» снимите флажок у пункта «Страницы, сохранённые в Pocket». Это отключит сохранение веб-контента на всех ваших устройствах, подключенных к учетной записи Firefox.
В меню «Приватность и защита» вы увидите три уровня защиты: стандартная, строгая и персональная. Выберите вариант «строгой» защиты, чтобы запретить сторонним веб-сайтам отслеживать ваши действия.
Если «строгий» уровень защиты блокирует доступ к сайту, который вы хотите посетить, просто нажмите на значок щита рядом с адресом сайта и отключите усиленную защиту отслеживания.
Находясь в меню «Приватность и защита», прокрутите страницу вниз до раздела «История». В раскрывающемся меню выберите параметр «Будет использовать ваши настройки хранения истории».
Затем установите флажок у параметра «Всегда работать в режиме приватного просмотра». После этого потребуется перезагрузка браузера. С этого момента Firefox больше не будет сохранять историю посещенных вами страниц и загрузок, а также данные для автозаполнения строк. Таким образом, вы сможете удалить всю личную информацию, которая могла бы быть отслежена и проанализирована другими компаниями, такими как Amazon, Facebook, Google.
Стоит также удалить историю посещенных страниц за все время (если вы еще этого не сделали).
Прокрутите страницу дальше вниз до раздела «Разрешения». Настройте каждый элемент, установив флажок у пункта «Блокировать новые запросы» и нажав на кнопку «Сохранить изменения».
Далее следует раздел «Сбор и использование данных Firefox»: снимите здесь все галочки, чтобы убедиться, что взаимодействие между вашим браузером и компанией Mozilla остается минимальным. Это запретит браузеру отправлять любые телеметрические данные в Mozilla.
Теперь самое интересное. В разделе «Защита» есть пункт «Блокировать опасное и обманывающее содержимое». Не поддавайтесь соблазну оставить флажок рядом с этим параметром, ведь именно Google решает, какой именно контент следует заблокировать. Лучше отключить данную функцию.
Переходим в меню «Поиск». Для своего удобства лучше добавить панель поиска на панель инструментов и отделить ее от адресной строки.
Следует сделать DuckDuckGo поисковой системой по умолчанию вместо Google и снять флажок у параметра «Отображать поисковые предложения». Это еще больше сократит количество данных, известных о вас браузеру.
Помимо DuckDuckGo, вы также можете использовать конфиденциальную поисковую систему SearX.
Наконец-то переходим в меню «Синхронизация». Стоит отключить синхронизацию данных между устройствами и удалить свой личный аккаунт Firefox (предварительно скопировав всю нужную информацию). Это значительно повысит ваш уровень конфиденциальности.
Панель Console
Самая популярная вкладка тестировщиков, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде. Также данная панель отображает различного рода предупреждения и рекомендации (как на картинке выше). Все выводимые во вкладке сообщения можно фильтровать. В ошибке также отображается ее расположение и кликнув по нему вы переместитесь во вкладку Sources, где ошибка будет выведена в общей конструкции страницы.
Очистить поле вкладки Console (в случае, если вам требуется удалить сообщения о предыдущих ошибках) можно кликнув иконку перечеркнутого круга. Фильтровать сообщения в консоли можно по типу — ошибки, предупреждения, инфо, стандартный вывод, сообщения отладчика, исправленные — выбрав одну из доступных опций консоли.
Выделение сообщений
В приведенном выше примере цикл будет генерировать множество значений переменных на консоли. Однако часто бывает удобно визуально разделить разные данные, чтобы эффективно выделить области кода, требующие особого внимания. В консольном API есть несколько методов для выполнения этих задач.
console.info (): выводит значок «информация» и раскрашивает отображаемую информацию. Этот метод полезен для оповещения о различных событиях.
console.warn (): выводит значок предупреждения и раскрашивает информацию, которую он представляет. Удобно использовать для получения информации о параметрах, выходящих за пределы.
console.error (): выводит значок «ошибки» и раскрашивает информацию, которую он представляет. Удобно использовать для сообщения об ошибках и критических состояниях.
Примечание. Инструмент разработчика Chrome не позволяет по-другому отображать информацию в консоли.
Точки остановки (Break Points)
IDE позволяет вставлять в код специальные метки — точки останова. Когда программа, работающая в режиме отладки, достигает строки, отмеченной как точка останова, она останавливается.
Чтобы вставить точку останова в определенную строку, просто щелкните IDEA слева от этой строки. Пример:
В результате строка будет отмечена точкой останова, и Intellij IDEA выделит ее красным цветом:
Второй щелчок мышью на левой панели кода удалит установленную точку останова.
Также точку останова можно просто разместить в текущей строке с помощью комбинации горячих клавиш — Ctrl + F8. Повторное нажатие Ctrl + F8 на строке, которая уже имеет точку останова, удаляет ее.
Использование консоли
Если чтение кода вам ничего не говорит, следующий логический шаг — начать добавлять в код несколько строк, которые могут пролить свет.
В коде внешнего интерфейса JavaScript вы часто будете использоватьи(и его крутые друзья).
Рассмотрим эту строку:
Как-то неправильно рассчитывается результат, поэтому можно начать с добавленияиперед вычислением результата, и браузер откроет две панели предупреждений при выполнении кода.
Это отлично работает, если вы переходите кэто строка или число. Как только у вас есть массив или объект, все становится слишком сложно для, и вы можете использоватьКонсольный API. Начиная с:
Значение печатается в консоли JavaScript инструментов разработчика браузера. Для удобства я объясняю здесь отладку в Chrome DevTools, но общие концепции применимы ко всем браузерам с некоторыми различиями в плане поддерживаемых функций.
