Как пользоваться отладчиком html js

Настоящий отладчик в JavaScript? Легко!

22.05.2018

541

Рейтинг: 5 . Проголосовало: 2
Вы проголосовали:
Для голосования нужно авторизироваться

Об авторе

Дастин Драйвер – журналист и технический писатель, который съел кошку в газетном бизнесе и web-игровой разработке.

Вступление

Конечно, console.log может рассказать вам о многом, но все же сказать, что это отладчик, все равно что сказать, что Канада – это США. Для полноценной отладки вам необходимо отдельное специализированное полнофункциональное приложение. Новый отладчик Firefox позволит вам легко писать быстрый, стабильный код. Вот как это работает.

В этом примере мы отладим очень простое приложение. Здесь вы можете найти приложение на базе фрейморков с открытым исходным кодом. Откройте его в последней версии Firefox Developer Edition, запустите debugger.html при помощи Option + Cmd + S на Маке или Shift + Ctrl + S на Винде. Отладчик разделен на три функциональные области: навигация по проекту (Source List Pane), код (Source pane) и панель инструментов (tool pane).

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

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

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

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

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

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

Тема связана со специальностями:

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

Теперь, когда скрипт остановлен, мы можем «пройтись» по нему, используя панель инструментов. Клавиши play/pause делают ровно то, что мы ожидаем от них, исходя из названия. Step over переходит на следующую строчку кода, исполняя текущую. Step in – проникает внутрь вызова функции. Ну и step out выполняет текущий скрипт целиком и останавливается на следующей точке, если она существует.

Мы также можем использовать панель просмотра выражений, чтобы следить за состоянием переменной. Просто введите выражение в специальное поле и отладчик будет уведомлять вас о состоянии объекта во время всего выполнения кода. В примере вы также можете добавить выражение “title” или “to-do”, и отладчик покажет вам эти значения, если они будут доступными. Это особенно полезно, когда:

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

Также вы можете использовать debugger.html, чтобы отладить React/Redux-приложение. Вот как это работает:

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

И, наконец-то, debugger.html позволит вам увидеть скрытый и минимизированный код для отлавливания ошибок, что, как правило, может быть полезным, когда мы имеем дело с такими общими фрейморками, как React/Redux. Отладчик осведомлен о компонентах, которые вы рассматриваете, и с радостью покажет все в упрощенном стеке вызовов – свойства и прочее. Здесь вы можете увидеть (английским), как использовать отладчик Firefox на примере такого разработчика, как Amit Zur.

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

Инструменты с открытым исходным кодом

Debugger.html был запущен около 2 лет назад – вместе с полной переработкой всех инструментов разработчика. Мы хотели перестроить DevTools при помощи современных веб-технологий, чтобы сделать их доступными для разработчиков всего мира. И когда у технологии открытый исходный код, любой, кто только пожелает, может принять участие в ее разработке.

Видео курсы по схожей тематике:

Автоматизация сборки проектов с помощью Apache Maven

Unit тестирование в Java с JUnit

How to Java Стартовый

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

Debugger.html встроен также и в React, Redux, Babel. Компоненты React легковесны, они тестируемы и просты в проектировании. Для быстрого создание ui-элементов мы используем React Storybook. Наши компоненты были оттестированы при помощи Jest и Enzyme, что значительно упростило работу с визуальными интерфейсами. Это также упрощает и работу с различными JavaScript – фреймворками (наподобие React). Наш Babel front-end позволяет совершать отображение классов-компонентов и их функции в левой панели отладчика. Также мы можем делать такие классные вещи, как фиксация точек остановки в функциях, так что они не исчезнут при модификации самой функции.

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

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

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

Бесплатные вебинары по схожей тематике:

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

Кто есть кто в IT компании. Структуры и роли

Управление памятью в Java.

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

Загрузить последнюю версию Firefox вы можете здесь.

Автор перевода: Евгений Лукашук

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

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

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

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

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

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

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

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

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

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

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

В зоне File Navigator (панель для навигации файлов) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
Зона Code Editor (редактор кода) показывает исходный код.
Наконец, зона JavaScript Debugging (панель отладки JavaScript) отведена для отладки, скоро мы к ней вернёмся.

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

Консоль

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Команда debugger

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

function hello(name) < let phrase = `Привет, $!`; debugger; //

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

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

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

Выполнение прервётся на четвёртой строчке (где находится точка останова):

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

Watch – показывает текущие значения для любых выражений. Вы можете нажать на + и ввести выражение. Отладчик покажет его значение, автоматически пересчитывая его в процессе выполнения.
Call Stack – показывает цепочку вложенных вызовов. В текущий момент отладчик находится внутри вызова hello() , вызываемого скриптом в index.html (там нет функции, поэтому она называется “анонимной”). Если вы нажмёте на элемент стека (например, «anonymous»), отладчик перейдёт к соответствующему коду, и нам представляется возможность его проанализировать.
Scope показывает текущие переменные. Local показывает локальные переменные функций, а их значения подсвечены прямо в исходном коде. В Global перечисляются глобальные переменные (то есть вне каких-либо функций). Там также есть ключевое слово this , которое мы ещё не изучали, но скоро изучим.

Читать:

Для чего нужна программа zoom

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

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

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

– «Resume»: продолжить выполнение, быстрая клавиша F8 .

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

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

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

– «Step»: выполнить следующую команду, быстрая клавиша F9 .

Выполняет следующую инструкцию. Если мы нажмём на неё сейчас, появится alert .

Нажатие на эту кнопку снова и снова приведёт к пошаговому выполнению всех инструкций скрипта одного за другим.

– «Step over»: выполнить следующую команду, но не заходя внутрь функции, быстрая клавиша F10 .

Работает аналогично предыдущей команде «Step», но ведёт себя по-другому, если следующая инструкция является вызовом функции (имеется ввиду: не встроенная, как alert , а объявленная нами функция).

Если сравнить, то команда «Step» переходит во вложенный вызов функцию и приостанавливает выполнение в первой строке, в то время как «Step over» выполняет вызов вложенной функции незаметно для нас, пропуская её внутренний код.

Затем выполнение приостанавливается сразу после вызова функции.

Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.

– «Step into», быстрая клавиша F11 .

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

На будущее просто помните, что команда «Step» игнорирует асинхронные действия, такие как setTimeout (вызов функции по расписанию), которые выполняются позже. «Step into» входит в их код, ожидая их, если это необходимо. См. DevTools manual для получения более подробной информации.

– «Step out»: продолжить выполнение до завершения текущей функции, быстрая клавиша Shift + F11 .

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

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

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

– включить/отключить автоматическую паузу в случае ошибки.

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

Continue to here

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

Это удобно, когда мы хотим перейти на несколько шагов вперёд к строке, но лень устанавливать точку останова (breakpoint).

Логирование

Чтобы вывести что-то на консоль из нашего кода, существует функция console.log .

Например, это выводит в консоль значения от 0 до 4 :

Отладка JavaScript программы в браузере. Инструменты Разработчика

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

В каждом современном браузере есть свои инструменты, и хотя они могут отличаться интерфейсом или некоторыми специфическими возможностями, основной функционал для отладки программы у них схожий. Поэтому понимание процесса отладки в рамках даже одного браузера позволит сформировать общее представление об отладке в других браузерах. Полную документацию по Инструментам Разработчика для браузера Firefox можно найти в документации MDN, а для браузера Chrome (на английском) в документации Chrome DevTools.

Поэтапный процесс отладки программы

Скачать архив с исходным кодом для его отладки можно по этой ссылке. В нём содержится несколько ошибок, которые нужно найти и исправить для корректной работы программы. После запуска страницы index.html в браузере (в этой статье для отладки программы будет использоваться Firefox), на ней отобразится заголовок “Страница с ошибкой в коде JavaScript”. Хотя при корректном выполнении кода, заголовок должен быть “Страница без ошибок. Спасибо!” и ниже должна появиться картинка.

Есть несколько способов открыть на странице Консоль Разработчика:

Клавиатура. Ctrl + Shift + I, кроме
- Internet Explorer. (клавиша - F12)
- Mac OS X. (сочетание клавиш - ⌘ + ⌥ + I )
В открывшейся Консоли есть набор вкладок, каждая из которых предоставляет определенный функционал. На начальном этапе достаточно иметь представление о следующих вкладках:
1. Первой является вкладка Инспектор (или Elements в браузере Chrome), где отображается разметка страницы и стили элементов справа. Эта панель имеет косвенное отношение к процессу отладки JavaScript, поэтому детально в этой статье разбираться не будет. Подробную информацию по ней лучше изучить в соответствующей документации.
2. Следующей вкладкой в Инструментах Разработчика является панель Консоль (или Console в браузере Chrome), которая отображает логи работы программы. Например, ошибки, предупреждения, и другую дополнительную информацию, которую генерирует программа JavaScript в ходе своего выполнения. А также эта панель позволяет непосредственно взаимодействовать с кодом JavaScript на странице. Все возникшие ошибки в JavaScript коде, выводятся в ней с указанием файла и конкретного места в нем, где произошла ошибка. Также консоль содержит ряд инструментов и настроек для фильтрации выводимых сообщений, очистки консоли и запрета очистки логов при перезагрузке страницы — Непрерывные логи. В текущем исходном коде используется метод console.log() , который выводит в консоль указанное в скобках сообщение. Таким образом, при корректной работе программы, в консоли должно быть выведено “Успешное начало программы”. Более полную информацию по методам консоли можно прочитать в соответствующей части документации MDN
3. Третьей вкладкой является панель Отладчик (или Sources в Chrome). Эта панель по сути представляет собой встроенную среду разработки кода, в которой можно получить доступ ко всем подключенным к странице файлам. Можно посмотреть их содержимое, отследить их выполнение, а в Chrome еще можно отредактировать код, скопировать его или сохранить изменения в новом файле. Также, для отладки кода в этой панели используются точки останова (брейкпоинты), которые позволяют приостановить выполнение кода на определенной строке. Поставить точку останова можно кликнув на номер соответствующей строки или написав в самом коде ключевое слово debugger; Управлять потоком выполнения программы после остановки на точке можно с помощью кнопок, расположенных справа в верхнем углу консоли. Которые позволяют возобновить выполнение ( F8 ), перешагнуть выполнение до следующей точки останова ( F10 ), зайти в функцию ( F11 ) или выйти из неё ( Shift F11 ). Крайняя кнопка, если её активировать, позволяет приостанавливаться на каждом непойманном исключении.
Воспроизведение и поиск ошибок

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

Далее начинается поиск ошибки, перейдя в панель “Консоль” можно увидеть выведенное там сообщение о возникшем в коде исключении.
```
ReferenceError: assignment to undeclared variable undeclaredVariable 
```
В этом сообщении еще содержится метка с информацией о файле и номере строки, которая привела к исключению main.js:8:1 . Кликнув на эту метку произойдет переход в этот файл на указанную строку в панели Отладчик.

В данном случае исключение указывает на то, что используемая переменная не была объявлена. Чтобы исправить это, надо заменить в файле main.js строку
```
undeclaredVariable = "Успешное начало программы"; 
```
```
let undeclaredVariable = "Успешное начало программы"; 
```
После сохранения файла и обновления страницы index.html в браузере, при этом в Консоли должно пропасть сообщение об исключении и вместо него отобразиться сообщение "Успешное начало программы" , которое выводится с помощью метода console.log("Успешное начало программы");

Точки останова

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

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

Как говорилось выше есть два способа поставить точку останова: кликнув по номере строки в отладчике или написав на нужной строке в коде ключевое слово debugger; .

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

При этом в правой части панели в блоке “Области” можно отслеживать значения переменных. В данном случае в переменной param содержится значение "Show" , хотя в этой функции, для изменения содержимого страницы, этот параметр должен начинаться с маленькой буквы. Поэтому, для корректной работы программы, нужно изменить входной параметр в вызове функции на "show"
```
buggy("show"); 
```
После сохранения файла main.js с указанными изменения и обновления страницы в браузере должно корректно измениться её содержимое. А корректный код программы в итоге должен выглядеть так:
```
"use strict"; let undeclaredVariable = "Успешное начало программы"; console.log(undeclaredVariable); function buggy(param)  if (param === "show")  document.getElementById("content").innerHTML = ' '; document.getElementById("header").innerHTML = "Страница без ошибок. Спасибо!"; > > buggy("show"); 
```
Дата изменения: February 26, 2023

Поделиться

Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!

Отладка кода Javascript

Ошибки могут (будут) возникать, всякий раз, когда вы пишите новый программный код.

Отладка кода

Программный код может содержать синтаксические или логические ошибки.

Многие ошибки трудно диагностировать.

Часто бывает так, что в коде есть ошибки, но нет никаких проявлений. Нет никаких сообщений об ошибках, и нет никаких указаний на то, где эти ошибки искать.

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

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

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

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

Обычно, чтобы начать отладку, достаточно в браузере активировать встроенный отладчик нажав клавишу F12 и в меню отладчика выбрать пункт "Консоль" ("Console"). Ниже будут показаны другие способы включения отладчика в разных браузерах.

Метод console.log()

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

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

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

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

Ключевое слово debugger

Ключевое слово debugger останавливает выполнение скрипта JavaScript и вызывает (если есть) функцию отладки.

У этого ключевого слова то же действие, что и у точек остановки в окне отладчика.

Если отладка не доступна, то выражение debugger ничего не делает.

В следующем примере, если отладчик включен, то выполнение кода будет остановлено перед выполнением третьей строки:
```
 var x = 15 * 5; debugger; document.getElementById("demo").innerHTML = x; 
```
Инструменты отладки основных браузеров

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

Иначе, чтобы начать отладку, проделайте следующее:
- Запустите браузер.
- В меню, выберите Дополнительные инструменты.
- Затем выберите Инструменты разработчика.
- Наконец, выберите Console.
- Запустите браузер.
- Перейдите на страницу http://www.getfirebug.com
- В соответствии с инструкцией установите Firebug
- Запустите браузер.
- В меню, выберите Средства разработчика.
- Наконец, выберите Консоль.
- Запустите браузер.
- Перейдите на страницу http://dev.opera.com
- В соответствии с инструкцией установите кнопку Консоль разработчика (Developer Console) на панель инструментов.
- Запустите браузер.
- Перейдите на страницу http://safari-extensions.apple.com
- В соответствии с инструкцией установите Firebug Lite.