Sdscompany.ru

Компьютерный журнал
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Console log javascript что это

Отладка в браузере Chrome

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

Мы будем использовать браузер Chrome, так как у него достаточно возможностей, в большинстве других браузеров процесс будет схожим.

Панель «Исходный код» («Sources»)

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

  • Работая в Chrome, откройте тестовую страницу.
  • Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I ).
  • Щёлкните по панели sources («исходный код»).

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Кликните на неё и выберите hello.js . Вот что появится:

Интерфейс состоит из трёх зон:

  1. В зоне Resources (Ресурсы) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
  2. Зона Source показывает исходный код.
  3. Наконец, зона Information and control (Сведения и контроль) отведена для отладки, вскоре мы к ней вернёмся.

Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

При нажатии на клавишу Esc в нижней части экрана вызывается консоль, где можно вводить команды и выполнять их клавишей Enter .

Результат выполнения инструкций сразу же отображается в консоли.

Например, результатом 1+2 будет 3 , а инструкция hello(«debugger») ничего не возвращает, так что получаем undefined :

Точки останова (breakpoints)

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните по строчке номер 4 . Да, щёлкайте именно по самой цифре, не по коду.

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, одним словом, мы выполняем отладку кода.

В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:

  • Быстро переместиться к любой точке останова в коде – нужно щёлкнуть по точке в правой части экрана.
  • Временно деактивировать точку – в общем списке снимите галочку напротив ненужной в данный момент точки.
  • Удалить точку – щёлкните по ней правой кнопкой мыши и выберите Remove (Удалить).
  • …и так далее.

Можно задать и так называемую условную точку останова – щёлкните правой кнопкой мыши по номеру строки в коде. Если задать выражение, то именно при его истинности выполнение кода будет приостановлено.

Этот метод используется, когда выполнение кода нужно остановить при присвоении определённого выражения какой-либо переменной или при определённых параметрах функции.

Команда Debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:

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

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке:

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:

Watch показывает текущие значения выражений.

Нажмите на + и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.

Call Stack показывает последовательность вызовов функций.

В нашем примере отладчик работает с функцией hello() , вызванной скриптом из файла index.html (там нет функции, поэтому вызов «анонимный»).

При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

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

В Global перечисляются глобальные переменные (т.е. объявленные за пределами функций).

Не обращайте пока внимание на ключевое слово this – его мы изучим чуть позже.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему коду.

В правой части панели для этого есть несколько кнопок. Рассмотрим их.

– продолжить выполнение. Быстрая клавиша – F8 .

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

Вот, что мы увидим, кликнув на неё:

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции say() .

– сделать шаг (выполнить следующую команду), не заходя в функцию. Быстрая клавиша – F10 .

Если мы нажмём на неё – будет вызван alert . Важно: на месте alert может быть любая другая функция, выполнение просто перешагнёт через неё, полностью игнорируя её содержимое.

– сделать шаг. Быстрая клавиша – F11 .

В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту.

– продолжить выполнение до завершения текущей функции. Быстрая клавиша – Shift + F11 .

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

– активировать/деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– разрешить/запретить остановку выполнения в случае возникновения ошибки.

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

Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).

Этот метод используется, когда нам нужно продвинуться на несколько шагов вперёд до нужной строки, но лень выставлять точки останова.

Логирование

Если нужно что-то вывести в консоль из кода, применяется функция console.log .

К примеру, выведем в консоль значения от нуля до четырёх:

Обычный пользователь сайта не увидит такой вывод, так как он в консоли. Напомним, что консоль можно открыть через инструменты разработчика – выберите вкладку «Консоль» или нажмите Esc , находясь в другой вкладке – консоль откроется в нижней части интерфейса.

Если правильно выстроить логирование в приложении, то можно и без отладчика разобраться, что происходит в коде.

Итого

Приостановить выполнение скрипта можно тремя способами:

  1. Точками останова.
  2. Использованием в коде команды debugger .
  3. При ошибке (если инструменты разработчика открыты и опция включена).

При остановке мы можем отлаживать – проанализировать переменные и пошагово пройти по процессу, что поможет отыскать проблему.

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

Для простой отладки вполне достаточно сведений из этой главы, но в дальнейшем рекомендуем вам изучить официальное руководство, если вы собираетесь разрабатывать для браузеров.

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

Отладка JavaScript для начинающих

В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.

Результатом увеличения сложности приложений является необходимость в наличии мощных инструментов для отладки, которые позволяют быстро и эффективно найти источник ошибки. Простой вывод значений переменных с помощью функции alert() потерял свою актуальность.

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Читать еще:  Java concurrent set

Консоль — общий взгляд

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

  • в браузере Chrome и Dragonfly для Opera – Ctrl + Shift + I
  • Firebug — F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

Метод можно использовать для вывода вычисленных значений:

Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение» и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Группировка вызовов метода .log()

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group():

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

Для установки точки прерывания нужно перейти на закладку ‘ Scripts ‘ и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации — появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:

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

Затем можно продолжить выполнение кода с помощью специальных кнопок , которые располагаются вверху боковой панели:

  • “Continue”: продолжает выполнение кода до следующей точки прерывания.

  • “Step Over”: выполняет следующую строку кода. Если код вызывает другую функцию, то отладчик не будет «погружаться» в ее код.

  • “Step Into”: похоже на «Step over», за исключение того, что при вызове функции, отладчик переходит к первой строке внутри кода функции.

  • «Step Out»: если вы вошли в код функции с помощью кнопки «Step Into», то нажатие кнопки «Step out» вызовет выполнение кода функции до конца и переход к родительской функции.

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

Условные точки прерывания

В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.

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

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

Другие способы прервать выполнение кода

Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.

Остановка при изменении DOM

Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘ Pause ‘ в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Введение в стек вызовов

Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues(), что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netmagazine.com/tutorials/javascript-debugging-beginners
Перевел: Сергей Фастунов
Урок создан: 26 Марта 2012
Просмотров: 187899
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Методы консоли в JavaScript

Методы для работы с консолью. Какие есть методы и примеры их применения. Как вывести стилизованные сообщения в консоль, в табличном виде, в виде js-объекта.

Читать еще:  Метод гаусса java

Консоль браузера — это инструмент значительно облегчающий работу, отладку и поиск ошибок в языке JavaScript. В самом же JS специально для работы с консолью есть объект console.

Любой новичок изучающий JavaScript знает метод console.log() . А знаете ли Вы, что для консоли в JavaScript есть целая группа методов для объекта console, а не только метод console.log?

Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.

Методы Console

Самый простой и самый распространённый способ для вывода чего-либо в консоль в JS — это вызов метода

В методы для консоли можно передавать неограниченное число аргументов, разделённых запятыми:

В результате в консоли все эти аргументы будут объеденены в одну строку через пробелы:
Ещё вариант простого сообщения 1 2 3 4

Так же в console.log можно использовать маркер строковой интерполяции %s , их ещё называют подстановочные символы (маски).

Первым аргументом идёт сообщение с символами, которое будет выведено в консоли, а все остальные аргументы (второй, третьий и т.д.) — будут заменять маркеры %s в соответствующем порядке (второй аргумент заменит первый маркер, третьий аргумент — второй маркер и т.д.).

console.dir() — вывод элемента в консоль в виде объекта

console.log выводит DOM-элементы в консоль как HTML. Чтобы вывести DOM-элемент в консоль в виде объекта используем метод dir()

Форматированные сообщения консоли

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

console.info()

Выводит информационное сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

console.warn()

Выводит предупреждающее сообщение. Для форматирования можно использовать подстановочные символы (маски) с дополнительными параметрами.

console.error()

Выводит сообщение об ошибке. Для форматирования вы можете использовать подстановочные символы (маски) с дополнительными параметрами.

В консоли браузера Google Crome эти сообщения будут выглядеть так:

А вот так это же выглядит в браузере Mozilla Firefox, где видно что в мазиле для info есть иконка:

console.time()

Метод time() для объекта консоли, выводит время выполняемого фрагмента кода.

Особенностью этого метода является то, что обязательно в конце фрагмента кода для которого измеряем время выполнения должен быть вызов timeEnd() , а аргументом и для time, и для timeEnd должно быть передано название измеряющего таймера. Так определяется начало и конец куска кода для которого установлен таймер замера.

Таймеров может быть установлено неограниченное количество, главное не забывать в конце фрагмента кода ставить console.timeEnd(‘Name’)

console.group()

Создает новую группу сообщений в веб-консоли. После вызова последующие сообщения, выводимые в консоль, будут иметь дополнительный уровень отступа, до тех пор пока не будет вызван метод console.groupEnd() .

Пример — чтобы было понятнее, я пробелами и табами разделю на группы:

Теперь в консоли можно сворачивать сообщения согласно их групп. При этом поддерживается вложенность:

console.table()

Метод console.table() позволяет вывести данные в консоль в виде таблицы. Эта возможность не является стандартной и стандартизировать её пока никто не собирается. И хоть метод не стандартизированный, он поддерживается в браузерах Crome, Firefox и многих других.

Имеет следующий синтаксис:

При выводе данных в консоль в виде таблицы, у таблицы всегда будет первым столбиком индексовая колонка.

Как пример использования метода console.table(); , выведу две таблицы в консоль.

  • Первая — выводит квадрат числа из генерируемого через цикл for массива.
  • Вторая — выводит в отдельных колонках имя и фамилию известных героев из Чапаева.

В консоли мы увидим такую картину:

При этом если кликнуть на название колонки, то будет выполнена сортировка элементов.

Отладка в браузере Chrome

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

Мы будем использовать браузер Chrome, так как у него достаточно возможностей, в большинстве других браузеров процесс будет схожим.

Панель «Исходный код» («Sources»)

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

  • Работая в Chrome, откройте тестовую страницу.
  • Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I ).
  • Щёлкните по панели sources («исходный код»).

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Кликните на неё и выберите hello.js . Вот что появится:

Интерфейс состоит из трёх зон:

  1. В зоне Resources (Ресурсы) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
  2. Зона Source показывает исходный код.
  3. Наконец, зона Information and control (Сведения и контроль) отведена для отладки, вскоре мы к ней вернёмся.

Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

При нажатии на клавишу Esc в нижней части экрана вызывается консоль, где можно вводить команды и выполнять их клавишей Enter .

Результат выполнения инструкций сразу же отображается в консоли.

Например, результатом 1+2 будет 3 , а инструкция hello(«debugger») ничего не возвращает, так что получаем undefined :

Точки останова (breakpoints)

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните по строчке номер 4 . Да, щёлкайте именно по самой цифре, не по коду.

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, одним словом, мы выполняем отладку кода.

В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:

  • Быстро переместиться к любой точке останова в коде – нужно щёлкнуть по точке в правой части экрана.
  • Временно деактивировать точку – в общем списке снимите галочку напротив ненужной в данный момент точки.
  • Удалить точку – щёлкните по ней правой кнопкой мыши и выберите Remove (Удалить).
  • …и так далее.

Можно задать и так называемую условную точку останова – щёлкните правой кнопкой мыши по номеру строки в коде. Если задать выражение, то именно при его истинности выполнение кода будет приостановлено.

Этот метод используется, когда выполнение кода нужно остановить при присвоении определённого выражения какой-либо переменной или при определённых параметрах функции.

Команда Debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:

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

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке:

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:

Watch показывает текущие значения выражений.

Нажмите на + и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.

Call Stack показывает последовательность вызовов функций.

В нашем примере отладчик работает с функцией hello() , вызванной скриптом из файла index.html (там нет функции, поэтому вызов «анонимный»).

При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

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

В Global перечисляются глобальные переменные (т.е. объявленные за пределами функций).

Не обращайте пока внимание на ключевое слово this – его мы изучим чуть позже.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему коду.

В правой части панели для этого есть несколько кнопок. Рассмотрим их.

– продолжить выполнение. Быстрая клавиша – F8 .

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

Читать еще:  Ошибка 30068 39

Вот, что мы увидим, кликнув на неё:

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции say() .

– сделать шаг (выполнить следующую команду), не заходя в функцию. Быстрая клавиша – F10 .

Если мы нажмём на неё – будет вызван alert . Важно: на месте alert может быть любая другая функция, выполнение просто перешагнёт через неё, полностью игнорируя её содержимое.

– сделать шаг. Быстрая клавиша – F11 .

В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту.

– продолжить выполнение до завершения текущей функции. Быстрая клавиша – Shift + F11 .

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

– активировать/деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– разрешить/запретить остановку выполнения в случае возникновения ошибки.

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

Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).

Этот метод используется, когда нам нужно продвинуться на несколько шагов вперёд до нужной строки, но лень выставлять точки останова.

Логирование

Если нужно что-то вывести в консоль из кода, применяется функция console.log .

К примеру, выведем в консоль значения от нуля до четырёх:

Обычный пользователь сайта не увидит такой вывод, так как он в консоли. Напомним, что консоль можно открыть через инструменты разработчика – выберите вкладку «Консоль» или нажмите Esc , находясь в другой вкладке – консоль откроется в нижней части интерфейса.

Если правильно выстроить логирование в приложении, то можно и без отладчика разобраться, что происходит в коде.

Итого

Приостановить выполнение скрипта можно тремя способами:

  1. Точками останова.
  2. Использованием в коде команды debugger .
  3. При ошибке (если инструменты разработчика открыты и опция включена).

При остановке мы можем отлаживать – проанализировать переменные и пошагово пройти по процессу, что поможет отыскать проблему.

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

Для простой отладки вполне достаточно сведений из этой главы, но в дальнейшем рекомендуем вам изучить официальное руководство, если вы собираетесь разрабатывать для браузеров.

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

Отладка JavaScript

Знакомство с консолью

Общаясь недавно со своими коллегами, я был удивлен тем, что многие ни разу не использовали в своей работе встроенные в браузер отладчик консоли для JavaScript. К сожалению, один из них работает в моей фирме, не буду оглашать его имени.
Для тех из вас, кто пока не знаком с консолью браузера API, и написана эта статья.

Визуальная отладка

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

Консоль API – это объект ( console ), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug

Лучшую консоль API (и руководство для нее, на русском) имеет Firebug, при этом пользоваться консолью можно не только в Firefox. Большинство современных браузеров имеют инструментарий, в состав которого входит вкладка консоль. В Chrome и Safari вывести его на экран можно, кликнув правой кнопкой мышки и выбрав ‛ Inspect Element ‛ ( Inspect Element ) в контекстном меню.

Простые примеры

console.log

Консоль имеет массу опций, однако вы, скорее всего, на постоянной основе будете использовать только 3-4. Основываясь на личном опыте, я могу сказать, что функция log() является наиболее полезной. Она создает сообщение в консоли, это сообщение может содержать обычный текст, элементы DOM или переменные. Ниже приведены примеры для наиболее распространенных функций.

В этом скрипте консоль выводит различные результаты, которые зависят от того, пуста ли переменная full_name или нет.

Варианты использования функции console.log()

Символ %s заменяется значением переменной family . Можно добавить несколько переменных, но не забудьте для каждой подключить %s .

Можно также использовать следующие комбинации: %d — для целых чисел, %f — для чисел с плавающей точкой (например, 1.3333)

console.trace()

console.dir()

Здесь по событию jQuery click консоль возвратит информацию об атрибутах элемента, по которому пользователь кликнул мышкой.

console.info()

Лучше понять работу с консолью поможет созданная мною демо-страница. Зайдите на нее, предварительно открыв свою консоль; чтобы получить дополнительные пояснения, просмотрите исходный код страницы.

Прямой ввод разрешен

Консоль – это нечто более, чем простой вывод информации, она также принимает и прямой ввод, подобно командной строке. Например, напечатайте ‛ document ‛ и нажмите enter, чтобы возвратить страницу.

Сохраняйте страницу чистой

Конечно, перед тем как выложить страницу в интернете методы объекта console лучше удалить, однако вы вполне можете их оставить, ведь пользователь их даже не заметит. В следующий раз при работе с JavaScript воспользуйтесь консолью. Это намного проще, чем создавать модальные окна при помощи команды alert() . Когда речь заходит о поиске и устранении неисправностей, ненавязчивость – это замечательно.

Отладка и точки прерывания

Чтобы отладить скрипт javascript вы можете использовать точки прерывания. Перейдите по вкладке «scripts» и выберите нужный скрипт. Далее ищите нужную строчку кода и помечаете ее щелчком мышью (левая сторона консоли) – этим вы создали точку останова. Обновите страницу, и выполнение кода прервется на заданной точке останова. Теперь вы можете навести курсор мышки на любую переменную, и вы получите ее значение. Справа можно увидеть изменении кода и изменение глобальных и локальных переменных.

Ход выполнение скрипта можно регулировать при помощи кнопок:

Шаг с обходом(2) — Выполняет текущую строку кода и переходит к следующей строчке кода, а затем ОСТАНАВЛМВАЕТСЯ, если на пути встречается какая-либо функция обходит ее стороной. Удобно использовать там где встречается селектор jQuery ( $ ), так как вы не попадете в недру библиотеки jQuery.

Шаг с заходом(1) – Похожа на предыдущую, но погружается внутрь встречаемой функции и останавливается на первой строчке кода ф-и. Также останавливается на каждой строке кода.

Шаг с выходом(3) – Если вы вошли при помощи Шаг с заходом(1) в какую-либо функцию, то нажатие по этой кнопке вызовет выполнение текущей функции до конца и перейдет к родительской функции. В отличие от двух предыдущих шагов отладчик не останавливается на каждой строке и возвращается на ту строку, из которой была вызвана изначально функция.

Наблюдение за сценарием

Окно «Watch» (наблюдение, в правой части firebug) предоставляет список переменных и функций в контексте текущей строки.

Поле «новое наблюдение» позволяет добавлять свои переменные и выражение, который вы хотите отследить и, соответственно, выполнить.

Точка останова в скрипте: debugger

Точку останова можно поставить непосредственно в скрипте, для этого существует специальная команда:

Прервет скрипт на той строке, где установлен debugger .

console.trace()

console.trace() — это вывод стека до текущего момента

Замер времени

Профилирование

Профилирование — сбор характеристик работы программы, таких как время выполнения отдельных фрагментов (обычно подпрограмм), число верно предсказанных условных переходов, число кэш-промахов и т. д. Инструмент, используемый для анализа работы, называют профилировщиком или профайлером (англ. profiler). Обычно выполняется совместно с оптимизацией программы.

Как отслеживать события

Firefox — Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

Ссылка на основную публикацию
Adblock
detector