Современная отладка JavaScript. Пошаговая отладка JavaScript

Отладка js и CSS

Изначально эту статью я хотел посвятить только тому, что касается отладки js сценариев. Но после написания, оказалось что, вопрос CSS отладки очень сильно связан с этими же отладчиками, поэтому создавать отдельную статью про CSS отладку просто не имеет смысла.

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

CSS отладка - это важная составляющая кросс-браузерности вашего сайта. При верстке дизайна сайта верстальщики тестируют страницы в основных браузерах. Основная цель CSS отладки это одинаковое визуальное отображение страниц сайта во всех основных браузерах.

Под каждый браузер существуют специальные инструменты для отладки js сценариев и одновременно CSS отладки. Эти инструменты - специальные утилиты написанные под конкретный браузер. Поэтому отлаживать свои js скрипты Вам придется только под одним браузером, так как каждый браузер имеет свою утилиту.

Браузер	Инструменты для отладки js сценариев
	Firebug
	Firebug Lite, Dragonfly Opera 9.5 и выше
	Firebug Lite Существует, также, очень мощный инструмент для разработки и отладки MS Visual Studio , но этот инструмент очень притормаживает и может выдавать ошибку в течении 5-7 сек. IE 8 имеет встроенные Developer Tools (для отладки в IE 7 есть режим симуляции)

Самым популярным и удобным инструментом большинство считают Firebug для браузера Firefox. И в практической разработке js сценариев я тоже использую эту утилиту. Из всех представленных выше инструментов Firebug наиболее удобный в использовании и функциональней.

На изображение показана часть консоли Firebug"а.
Вкладка "Консоль " самая важная - на ней построчно отображаются ошибки выявленные во время выполнения js сценариев. В строке отображается причина ошибки, а справа название файла и номер строки. При нажатии на кнопку "Профилировать" она перейдет в нажатое состояние. Если Вы отожмете ее, появится таблица с перечнем функций которые выполняются браузером в реальном режиме. Будет показано названия функций, количество вызовов и время выполнения этих функций за промежуток пока было удержана кнопка "Профилировать ".
Второй по важности можно считать вкладку "Сценарий ". Здесь Вы можете увидеть внутренний код любого выбранного js файла. На вкладке, также доступны такие интересные параметры:

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

Вкладка "Сеть " отображает список загруженных скриптов. Если нажать на любой файл, то будет показана информация про обмен заголовками между браузером и сервером, а также содержимое js скрипта. В строке, также отображается размер и время загрузки скрипта.
Это может быть полезно не только при отладке сценариев, а и для ускорения загрузки страницы. Можно просматривать размеры рисунков, подгружаемых js сценариев и оценивать время затраченное на загрузку каждого элемента страницы. Цветовая гамма загрузки помимо отображения времени на загрузку элемента (страницы), времени DNS запроса и времени HTTP запроса, также показывает время ожидание ответа сервера. Или другими словами, время выполнения кода php.

Кроме всего, Firebug позволяет отслеживать ajax запросы, просматривать заголовки ответов и опять же оценивать время запросов.

Помимо всего Firebug имеет командную строку, которую при желании можно увеличить в окно произвольного размера и в нем вживую писать и сразу выполнять любой js код.
Разработчики Firebug создали специальную версию Firebug Lite, которая позволяет отлаживать js сценарии во всех других основных браузерах (Opera, IE, Safari). Правда эта версия немного урезана, но это все равно лучше чем ничего. Ну, и помимо самой отладки js сценариев, доступны также CSS отладка и структура DOM страницы. Выполнение js событий (onclick, onmousemove и т.д.) позволяет в реальном времени отслеживать изменения в HTML коде страницы и DOM документа. Измененные части html кода мгновенно подсвечиваются.
Если Вы выберите элемент страницы и нажмете на вкладку "Макет", то сможете увидеть как элемент позиционируется на странице, а вкладка "Стиль" отобразит все активные и переопределенные свойства элемента (перечеркнутое свойство).

Свойство переопределяется по последнему установленному значению по приоритетности места его назначения.

Opera Dragonfly

В целом Dragonfly тоже неплохой отладчик, но с первой попытки начать отладку у меня не получилось. При тестовой попытке отладить js сценарий, консоль ошибок почему-то упорно оставалась чистой, хотя в скрипте была допущена синтаксическая ошибка и, принудительно, отображалось окно "Консоль ошибок" с указание строки с ошибкой. Как оказалось, для каждой страницы необходимо было заново перезапускать Dragonfly.

По сути отладка js сценариев в Dragonfly это всего лишь дублирование информации об ошибке в "Консоле ошибок" в консоли самого Dragonfly.

Помимо этого, Dragonfly представляет обширные возможности по CSS отладки страницы. Как по мне, то немного проще для восприятия, чем в Firebug. Помимо позиционирования элемента в странице, Dragonfly предлагает просмотр отдельную вкладку "Рассчитанный стиль" в которой отображается все существующие свойства элемента и вкладку "Стили" со свойствами элемента разбитыми по классам.

Тогда как, Firebug на вкладке "Показать вычисленный стиль" отображает все свойства без цветового оформления. Однако, по сравнению с Firebug, изменение CSS свойств и просмотр изменений в реальном времени в Dragonfly недоступно. Каких-либо особенностей Dragonfly в отличие Firebug по отладке js сценариев нет. Есть также отображение Ajax запросов, заголовки обмена данные между клиентом и сервером, время запроса. Однако указывается лишь полное время запроса без детализации. При работе с Dragonfly складывается впечатление, что он немного притормаживает. Сравнение быстродействия консолей, показало что Dragonfly таки напрягает процессор больше, хоть и незначительно.

К минусам можно отнести то, что для отладки js сценариев не предусмотрено профилирование.

IE Developer Tools

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

К особенностям, которых нет в других отладчиках, можно отнести:
- возможность изменять размер страницы под популярные расширения (1024х768, 1280х768б 1280х1024 и другие);
- при профилировании "Создание/Остановка профилей " названия функций, количество вызовов и время выполнения этих функций за промежуток можно вывести в виде дерева. Что позволяет удобно отследить очередность и вложенность вызовов функций. Firebug позволяет выводить только общий список вызванных функций;
- функция "вид -> источник -> исходный код элемента со стилем" выводит в отдельном окне html код выделенного элемента вместе со всеми это css стилями. Это может быть особенно полезно, если Вам вдруг понадобится взять с другого сайта часть страницы вместе с сss стилями.
К минусам можно отнести то, что в IE Developer Tools отсутствует панель для отслеживания запросов, поэтому отследить количество запросов и скорость загрузки не получится.
Как известно, IE это самый отстающий от спецификаций браузер. При верстке дизайна IE больше всех требует внимания и поиска решений для правильного отображения элементов страницы. Поэтому к большому плюсу IE Developer Tools можно отнести возможность проверять совместимость страницы в IE 7.

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

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

1074

Легко потеряться написания кода JavaScript без отладчика.

JavaScript Отладка

Трудно писать код JavaScript без отладчика.

Ваш код может содержать синтаксические ошибки или логические ошибки, которые трудно диагностировать.

Часто, когда JavaScript код содержит ошибки, ничего не произойдет. Там нет никаких сообщений об ошибках, и вы не получите никаких указаний, где искать ошибки.

Как правило, ошибки будут происходить, каждый раз, когда вы пытаетесь написать какой-то новый код JavaScript.

JavaScript Debuggers

Поиск ошибок в программном коде называется отладки кода.

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

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

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

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

console.log() Метод

Если ваш браузер поддерживает отладку, вы можете использовать console.log() для отображения значений JavaScript в окне отладчика:

пример

My First Web Page

a = 5;
b = 6;
c = a + b;
console.log(c);

Установка точек останова

В окне отладчика, вы можете установить точки останова в коде JavaScript.

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

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

Отладчик Ключевое слово

Отладчик ключевое слово останавливает выполнение JavaScript и вызовы (если таковые имеются) функции отладки.

Это имеет ту же функцию, установив точку останова в отладчике.

Если отладка не доступна, оператор отладчик не имеет никакого эффекта.

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

Основные браузеры "Инструменты отладки

Как правило, вы включите отладку в браузере с F12, и выберите "Консоль" в меню отладчика.

В противном случае выполните следующие действия:

Chrome

• Откройте браузер.
• В меню выберите инструменты.
• И, наконец, выберите Console.

Firefox Firebug

• Откройте браузер.
• Перейти на веб-странице:
  http://www.getfirebug.com
• Следуйте инструкциям, как:
  установить Firebug

Internet Explorer

• Откройте браузер.
• В меню выберите инструменты.
• Из инструментов, выбрать инструменты для разработчиков.
• И, наконец, выберите Console.

Opera

• Откройте браузер.
• Перейти на веб-странице:
  http://dev.opera.com
• Следуйте инструкциям, как:
  добавить кнопку консоли разработчика на панель инструментов.

Safari Firebug

• Откройте браузер.
• Перейти на веб-странице:
  http://extensions.apple.com
• Следуйте инструкциям, как:
  установить Firebug Lite.

Safari Develop Menu

• Перейти к Safari, Настройки, Дополнительно в главном меню.
• Установите флажок "Включить Показать меню в строке меню Разрабатывать".
• Когда новая опция "Develop" появляется в меню:
  Выберите "Show Error Console".

От автора: console.log может много сказать о приложении, но с его помощью нельзя по-настоящему заниматься отладкой кода. Новый JS дебагер в Firefox поможет вам писать код быстрее и без багов. Статья про принцип работы этого отладчика.

В этом примере мы откроем очень простое приложение, с помощью которого легко делается отладка JavaScript. Само приложение работает на базовых open source JS фреймворках. Откройте его в последней версии Firefox Developer Edition и запустите debugger.html с помощью комбинации клавиш Option + Cmd + S на Mac или Shift + Ctrl + S на Windows. Отладчик разделен на 3 панели: панель со списком файлов, панель кода и панель инструментов.

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

Прекратите использовать console.log

Нам хочется использовать console.log для отладки кода. Просто добавляем вызов в код, чтобы узнать значение переменной, и все, так ведь? Такой подход будет работать, но он громоздкий и долгий. В этом пример мы будем пошагово выполнять приложение с помощью debugger.html для поиска значения переменной.

С помощью debugger.html можно погружаться вглубь код, просто добавив точку останова на строке. Точки останова ставят отладчик на паузу, чтобы вы могли посмотреть код. В этом примере мы добавим точку останова на строку 13 файла app.js.

Теперь добавьте задачу в список. Код остановится на функции addTodo, и мы сможем посмотреть в коде значение поля. Наведите курсор на переменную, чтобы увидеть ее значение и т.д. Так можно посмотреть якоря, апплеты, дочерние элементы и т.д.:

Эту же информацию можно найти на панели Области.

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

Следить за значением переменной моно также с помощью выражений для отслеживания. Просто введите выражение в поле Выражения для отслеживания, и отладчик будет следить за ним во время выполнения кода. В примере выше можно добавить выражения title и to-do, и отладчик разобьет значения, когда они будут доступны. Особенно полезно, когда:

Вы пошагово выполняете код и следите за изменением значения;

Вы отлаживаете один и тот же код много раз и хотите увидеть общие значения;

Вы пытаетесь понять, почему эта чертова кнопка не работает.

С помощью debugger.html также можно проводить отладку приложений React/Redux. Как это работает:

Перейдите к компоненту, который хотите отладить.

Смотрите схему компонента слева (функции в классе).

Добавьте точки останова в подходящие функции.

Нажмите паузу и следите за свойствами и состояниями компонента.

Стек вызова упрощен, поэтому вы видите код приложения в перемешку с фреймворком.

debugger.html позволяет смотреть запутанный или минифицированый код, который может вызывать ошибки. Особенно полезно при работе с общими фреймворками типа React/Redux. Дебагер знает о компоненте, на котором вы нажали паузу, и покажет упрощенный стек вызова, схему компонента и свойства. Ниже разработчик, Amit Zur объясняет, как он использует отладчик кода в Firefox на JS Kongress:

Если хотите подробно изучить новый debugger.html, зайдите на Mozilla Developer Playground . Мы создали серию уроков, чтобы помочь разработчикам научиться эффективно использовать инструмент для отладки кода.

Инструменты разработчика с открытым исходным кодом

Проект debugger.html был запущен примерно 2 года назад вместе с полным пересмотром Firefox DevTools. Мы хотели перевести DevTools на современные технологии, открыть их разработчикам по всему миру. А так как технология открыта, она может свободно вырасти в то, что маленькая группа в Mozilla и не могла себе представить.

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

debugger.html написан на React, Redux и Babel. Компоненты React легкие, тестируемые и легко проектируемые. Для быстрого прототипирования UI и документации общих компонентов мы используем React Storybook. Это упрощает работу с разными JS фреймворкам (типа React). Babel front-end позволяет делать такие вещи, как показывать класс Component и его функции в левом сайдбаре. Мы также можем устанавливать точки останова на функции, и они не сдвинутся, если вы измените код.

Действия Redux – это чистый API для UI. Однако их также можно использовать для создания независимого CLI JS Debugger. В хранилище Redux есть селекторы для запроса текущего состояния отладки. Наши юнит тесты запускают действия Redux и имитируют ответы браузера. Интеграционные тесты приводят браузер в действие с Redux действиями отладчика. Сама функциональная архитектура спроектирована для тестирования.

Мы полагались на сообщество разработчиков Mozilla на каждом шаге. Проект был выложен на GitHub , и наша команда достучалась до разработчиков по всему миру, и они откликнулись. В самом начале для сообщества были критичны автоматические тесты. Тесты проводили регресс и документировали поведение, которое легко можно не доглядеть. Именно поэтому один из первых шагов был – написание юнит тестов для действий Redux и типов Flow для хранилища Redux. Фактически, сообщество обеспечило, что покрытие Flow и Jest помогло убедиться в том, что каждый файл был написан и протестирован.

Как разработчики, мы считаем, что инструменты тем сильнее, чем больше вовлечено разработчиков. Наша основная команда всегда была маленькая (2 человека), но в среднем за неделю было 15 помощников. Сообщество дало нам разные точки зрения, что помогло нам предвидеть сложности и написать функции, о которых мы и не могли мечтать. Сейчас мы форматируем стеки вызовов под 24 библиотеки. О многих мы даже не знали. Мы также показываем карты Webpack и Angular в дереве исходников.

Мы планируем перенести все Firefox DevTools на GitHub, чтобы их могли использовать и улучшать больше людей. Мы с радостью примем вашу помощь. Можете перейти на страницу нашего проекта debugger.html на GitHub. Мы написали целый список инструкций по запуску отладчика на своей машине, где вы можете менять все, что хотите. Используйте его для отладки JS кода для чего угодно – браузеров, терминалов, серверов, телефонов, роботов. Если видите, что можно улучшить, пишите нам на GitHub.

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

отладка JavaScript

Средства отладки не трудно писать программы JavaScript.

Ваш код может содержать синтаксические ошибки, логические ошибки, если нет средств отладки, эти ошибки более трудно найти.

Как правило, если происходит ошибка JavaScript, не будет никаких запросов, так что вы не можете найти код совсем не то место.

средства отладки JavaScript

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

Отладка трудно, но, к счастью, многие браузеры имеют встроенные средства отладки.

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

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

Браузер с поддержкой отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.

Метод console.log ()

Если браузер поддерживает отладку, вы можете использовать console.log () метод выводит значение JavaScript в окне отладки:

примеров

Мой первый веб-страницы

а = 5;
б = 6;
с = а + Ь;
console.log (с);

Установить точку останова

В окне отладки вы можете установить точки останова JavaScript-код.

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

После того, как проверка будет завершена, вы можете повторно запустить код (например, кнопка Play).

отладчик ключевых слов

отладчик ключевое слово, чтобы остановить выполнение JavaScript, и вызывать функции отладчика.

Это ключевое слово и установить точки останова в инструменте отладки, эффект тот же.

Если нет отладки имеется, отладчик оператор не будет работать.

Открытый отладчик, выполнение кода останавливается перед третьей линии.

Основные средства отладки браузера

Как правило, браузеры позволяют средства отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.

Каждый браузер, выполните следующие действия:

браузер Chrome

• Откройте свой браузер.
• Выберите Инструменты в меню.
• И, наконец, выберите Console.

Firefox браузер

• Откройте свой браузер.
• Перейти на страницу:
  http://www.getfirebug.com.
• Следуйте инструкциям:
  Установить Firebug.

Браузер Internet Explorer.

• Откройте свой браузер.
• Выберите Инструменты в меню.
• Выберите Инструменты Инструменты для разработчиков.
• И, наконец, выберите Console.

опера

• Откройте свой браузер.
• Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
  http://www.opera.com/dragonfly/.

сафари

• Откройте свой браузер.
• Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
• Выберите "Панель управления" в нижней части всплывающего окна.

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

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

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

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

Отладка javascript firebug Как отслеживать события

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

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

Тормозит - вне работы выключать