Отладка javascript в firefox

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

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

Пользовательский интерфейс

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

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

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

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

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

В большинстве программ для разработчиков самым лучшим другом программиста будет консоль . Многоцелевая панель используется для журналирования сообщений об ошибках, проверки 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).

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

Читайте также:  Oracle округление в меньшую сторону

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск по форумуРасширенный поискК странице.

Без этих инструментов лучше даже не начинать программировать на javascript. Хотя люди и без этого живут, но уж очень они полезны.

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

Как-то так получилось, что попользовав обширную пачку редакторов для javascript-проектов, я остановился на нескольких основных.

Два из них — тяжелые, это Komodo и Eclipse и два — легкие: vim (Linux) и SciTe.

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

Самый лучший на текущий момент многоцелевой отладчик/инспектор для Firefox, который умеет массу полезного. Обязательный помощник в разработке.

• Инспекция DOM/HTML

• выбор элемента кликом мыши дает полную информацию по нему

Работа с CSS

• покажет полную box-модель элемента

читать дальше »

Плагин стоит у меня давно, хотя и не всегда включен.

Возможностей у него много:



.. Но как-то сложилось, что из 12 основных секций очень полезными для меня явились три: читать дальше »

Internet Explorer Developer Toolbar предоставляет часть функционала, который есть в Firebug для Firefox, плюс ряд ценных возможностей, которые есть Web Developer Toolbar для Firefox.

• просматривать и модифицировать живой HTML, DOM, CSS
• выбирать элемент кликом: «Inspect element»
• очищать кеш браузера/cookie (меню cache)
• масштабировать окно (tools)
• выделять различные элементы, показывать размеры картинок, линейку и т.п.
• отключать настройки IE

читать дальше »

Конечно, это далеко не Firebug.
Но умеет делать две приятные вещи под IE.

1. Выдает javascript-ошибки, показывает строку скрипта
2. Дает javascript-консоль
3. Простейшие возможности Firebug Console API типа console.log

читать дальше »

Существует много инструментов для отладки javascript. Эта статья посвящена отладке на платформе Windows под Internet Explorer.

Есть два основных отладчика:

Microsoft Script Editor поставляется вместе с Microsoft Office. Есть бесплатная версия — это не то. Нужна именно та, которая в поставке Microsoft Office, причем она не ставится по умолчанию. Для установки нужно найти и включить соответствующий пункт в меню.

Microsoft Visual Studio — среда для разработки продуктов на самых разных языках. Она также позволяет отлаживать javascript-сценарии, как, впрочем, и многое другое. читать дальше »

Читайте также:  Бп asus atx 500h rev w00 схема

Эта статья посвящена особенностям тестирования в нескольких версиях Internet Explorer одновременно: 5.5-8

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

В результате — код, работающий под Internet Explorer и Firefox, как правило, работает и в Opera.

Но иногда происходит что-то странное, и хочется иметь инструмент вроде Firebug, чтобы разобраться. Этот инструмент есть: Opera Developer Tools. читать дальше »

• 

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

P.S.Хотя я сравнительно недавно блуждаю по WWW и больше интересуюсь софтом, это пожалуй наилучший сайт, посвященный знакомству с языком программировани и подсказки с чего начинать и чем пользоваться. За это отдельное спасибо.

Пожалуйста, обсуждайте вопросы такого рода на форуме.

еще есть отличная прога PSPad правда она только под Windows

Я давно использую AkelPad, редактор на сегодняшний день активно развивается и описывать его возможности, глупое занятие.
Качайте здесь:
http://akelpad.sf.net/

AkelPad очень уступает редактору EmEditor, который более функционален. К сожалению, ссылки на него у меня нет, но найти в интернете не проблема =)

а я на ActiveState Komodo сижу уже второй год. И еще полвека на нем просижу
честно говоря, я с ним разленился. пишешь fun а он уже предлагает function. поначалу даже слегка раздражало, а сейчас без этого — как без рук. особенно важно когда подзабыл полное имя метода или функции.
а еще он переменные так подставляет
———————
админу — зачет за сайт на Друпале ))

как включить этот скрипт на компьютере

Я уже несклолько лет пользуюсь 1st JavaScript Editor.
Очень удобен. Интелисенс просто превосходен. Все за тебя делает.
Много всяких фишек. Пробовал пользоваться другими яваскрипт редакторами, но после этого остальное полная ерунда.

как можно в FireFox запустить отладку скрипта, подключенного через greasemonkey ?

GreaseMonkey умеет прекрасную функцию GM_log();
очень рекомендую, хотя это и не отладка.

еще, мне кажется, HTMLPad вполне неплохой вариант. только платный зараза

phpDesigner — удобная штука, с подсветкой синтаксиса.
Но привык все делать в Notepad++

Кстати, Developer Tools в Хроме ну очень удобная штука, всем советую

google chrome (ctrl+shift+j) , notepad++ (знать будете больше)

Для начала хочу поблагодарить за отличный ресурс, очень помогает в изучении Web разработки.
По поводу редакторов, раньше пользовался Komodo edit, но с тех пор как познакомился с Php Designer 7 использую только его.
Плюсы: Отличная подсветка кода, работа с проектами содержащими скрипты на разных языках, отладка на лету, автоподстановка свойств и методов, интеграция с SVN, очень понятный и легкий интерфейс.
Минусы: нет возможности сворачивать блоки кода (как в Komodo edit), и зачастую если код длинный то без комментариев бывает трудно найти нужную часть кода.

хочу обратить внимание на Aptana замечательная программа для JS имеет отладчик скриптов

Хотелось бы увидеть, как работает эта отладка в Aptana 3.0.6, а она такую ошибку выдаёт:
Socket connection error. Please try shutting down and restarting your web browser, and then run ‘debug’ again.
Accept timed out

Как в мобильной мине опере сделать так чтобы выбранная страничка обновлялась автоматически .

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

Так во всех актуальных браузерах так. Даже в ИЕ.
Только в Опере и Сафари запускается не F12, но сама среда в общем подобная.

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

Привет, после прочтения этого удивительного произведения я очень рад поделиться своими знаниями с коллегами. euchre online free