Отладка кода с помощью Firebug


Содержание

Руководство по FireBug для веб-мастеров

Дата публикации 28 Апрель 2015 . Опубликовано в Полезные программы

Firebug – бесплатный плагин для браузера Mozilla Firefox, одной из функций которого является работа с исходным кодом веб-страницы. С помощью расширения FireBug можно просматривать код страницы, редактировать или удалять элементы и атрибуты «на лету», при этом Вы можете просматривать результаты изменений на веб-странице в реальном времени. Т.е. при внесении изменения в код, страница браузера немедленно обновляется, отображая эти изменения в окне браузера. Бывает, что вам понравилось то или иное решение веб-мастера на чужом ресурсе, FireBug вам поможет подсмотреть как это работает и реализовать эти стили на своем сайте.

Установка расширения FireBug

Щелкните левой клавишей мышки в браузере Mozilla Firefox значок «Инструменты» и в выпадающем окне выберите «Дополнения», затем в поисковом окошке введите «FireBug» и нажмите клавишу «Enter». Найдите в появившемся списке расширений плагин Firebug и кликните большую зеленую кнопку «Add to Firefox».
После установки плагина Firebug в верхнем углу браузера Mozilla Firefox появится значок в виде жучка, а это значит, что данное дополнение успешно установилось.

Как запустить Firebug

Если щелкнуть правой кнопкой мышки по интересующему месту веб-страницы и выбрать из контекстного меню «Инспектировать элемент с помощью Firebug», то перед вами откроется участок кода страницы, который отвечает за формирование того элемента, который Вы выбрали.

Код интересующего нас элемента будет виден в открывшемся внизу страницы окне, при этом участок кода, который отвечает за выбранный элемент веб-страницы, будет подсвечен синим цветом.
Запустить Firebug можно также с помощью комбинации клавиш «Ctrl» + «F12» либо щелкнув по жучку в правом верхнем углу экрана. А если нажать клавишу «F12», то Firebug откроется в новом окне браузера.

Редактирование HTML- кода в FireBug

В левой половине окна плагина FireBug отображаются HTML — теги открытой в браузере веб-страницы. Здесь можно просматривать вложенность друг в друга тех или иных контейнеров, д ля открытия содержимого контейнера нужно нажать на плюсик рядом с ним, а также можно свернуть его, щёлкнув ещё раз. Для удобства перемещения по элементам можно использовать стрелки навигации на клавиатуре (смещает синее выделение элемента).

Если Вы подведете мышку к div- контейнеру в левой части окна Firebug, то сможете видеть, какие элементы открытой веб-страницы входят в этот div-контейнер.

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

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

Хочу обратить Ваше внимание на то, что когда Вы кликаете мышкой по элементу в панели HTML-кода, то во второй строке сверху панели плагина отображается порядок вложения элементов HTML. По этой строке можно прослеживать наследование CSS-свойств.

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

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

Внимание! Firebug выводит в панель HTML не только тот код, который хранится у Вас на сайте в HTML — файлах, но также и сгенерированный php-код.

Дело в том, что в отличие от обычного исходного HTML- кода, плагин Firebug учитывает все изменения в коде после его преобразования через JavaScript. Вероятнее всего, искомый Вами файл будет иметь расширение «php», и этот участок в нем может выглядеть совсем не так, как в исходном коде веб-страницы. Как же найти в каком файле формируется нужный нам фрагмент веб-страницы? Внимательно изучив нужный участок веб-страницы с помощью плагина Firebug, подищите какой-нибудь ID или CSS-класс, которые прописаны в контейнере с требуемым элементом веб-страницы. А далее с помощью программы Total commander осуществите поиск тех файлов, в которых присутствует данный класс или ID. Возможно Вам сразу не удастся найти нужный участок HTML- кода, тогда повторите поиск взяв за основу какой-нибудь другой маячок для поиска.

Редактирование стилей CSS

В левой панели расширения Firebug по умолчанию отображается HTML — код, а в правой CSS-стиль выбранного элемента. Эти CSS свойства определяют внешний вид выбранного HTML блока. В панели CSS отображаются селекторы, которые относятся к выбранному элементу, название CSS-файла и номер строки, в которой эти селекторы описаны

CSS-свойство одного и того же элемента может быть прописано несколько раз с разными значениями, тогда браузер учитывает только CSS-свойство с более высоким приоритетом – !important. . Если какая-то строка зачёркнута, значит у данного селектора специфичность ниже, чем у селектора с более высоким приоритетом. На рисунке видно, что у селектора .uk-article-title приоритет выше, чем у селекторов h1, .uk-h1 и h1, .uk-h1, поэтому свойства font-size:40px и color: #444444 не применяются.
Любое CSS-свойство отключается и включается вновь простым щелчком по пустому полю перед свойством. Вы можете подвести курсор мыши к стилевому правилу, рядом с этим свойством появится красный перечеркнутый кружочек. Щелкнув по нему мышью можно отключить это CSS- свойство и посмотреть на веб-страницу без него. Отключенные свойства отображаются серым цветом, рядом с ними выводится серый перечеркнутый кружочек.

Все значения и названия свойств можно легко изменять. Для этого достаточно щёлкнуть по свойству, и оно станет редактируемым. Очень удобно и то, что в плагине Firebug, как и в Notepad++, есть автодополнения.

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

  • Через контекстное меню можно скопировать объявление свойства, имя свойства или значение свойства в буфер обмена, а затем вставить в CSS-файл Вашего сайта.
  • Редактировать стиль элемента — установить встроенный стиль для элемента (устанавливается через атрибут style).
  • Добавить правило – добавить правило к данному элементу.
  • Новое свойство — добавить новое свойство и его значение текущему правилу.
  • Редактировать, удалить или выключить – действия с текущим свойством.
  • Обновить – обновить экран панели.
  • Инспектировать во вкладке CSS — перейти во вкладку CSS для изучения объекта там.
  • Инспектировать во вкладке DOM — перейти во вкладку DOM для изучения объекта там.

Во вкладке CSS доступен предосмотр цвета и изображений при наведении на свойство курсора

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

Вкладка «Скомпилированный стиль»

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

Вкладка «Макет»|Редактирование размеров в FireBug

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

Для просмотра размеров и их редактирования необходимо в режиме «Анализ» навести курсор мыши и щелкнуть на элементе с размерами которого мы желаем поработать.
Для редактирования размера поля достаточно щелкнуть на его числовом значении во вкладке «Макет». При этом на странице сайта будут подсвечиваться соответствующие поля: сам элемент – светло-голубым, margin – желтым, а padding – фиолетовым цветом.

После изменения числового значения к выделенному элементу автоматически добавляется тег «style», а при открытии вкладки «Стиль» появится селектор «element.style». К нему можно добавлять другие свойства CSS и менять их значения, как и для любых других селекторов.

Вкладка «DOM» (Document Object Model — объектная модель документа) используется JavaScript-разработчиками.

Вкладка «DOM» показывает список всех методов и свойств выбранного на данный момент элемента. При необходимости можно просматривать свойства объекта или изменять их, одновременно просматривая результаты таких изменений на веб-странице.

Вкладка «Сценарий» (Script)| Отладчик JavaScript

Вкладка «Сценарий» – это мощный отладчик JavaScript, который позволяет запускать скрипты, в любое время приостановить их выполнение и посмотреть, как выглядела каждая переменная в момент останова. В основном окне мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.

1. Кнопка с помощью которой можно выбрать файл скрипта, который вы хотите отладить. Вы также можете ввести фильтрацию для списка.
2. Функции отладки: Продолжить (F8), Шаг с заходом (F11), Шаг с обходом (F10), Шаг с выходом (Shift+F11) . Фунции действуют лишь тогда, когда выполнение кода достигает точки останова.
3. Вкладка «Наблюдение» даёт возможность просматривать переменные Javascript в текущем стеке.
4. Вкладка «Стек вызовов» показывает содержимое стека функций в реальном времени.
5. Вкладка «Точки останова» показывает список активных на данный момент точек останова. Отсюда можно только удалить точку останова.
Firebug позволяет устанавливать точки останова, которые сообщают отладчику о необходимости приостановить выполнение скрипта, когда он достигает определенной строки. Во время паузы, вы можете посмотреть значение любой переменной и обследовать объекты.
Для того чтобы установить точки останова, нажмите на любой номер строки и появится красная точка останова. Нажмите на красную точку ещё раз, чтобы её удалить.
После установки точки останова в нужном месте обновите страницу (F5) для срабатывания точки останова.

Для пошаговой отладки скрипта используйте кнопки на панели инструментов Firebug:
— продолжить выполнение до следующей точки останова (F8);
— зайти внутрь блока или функции (Шаг с заходом)(F11);
— перейти к следующему оператору без захода внутрь блока (Шаг с обходом) (F10);
— выйти из блока или функции (Шаг с выходом) (Shift+F11).

Измерение скорости загрузки сайта с помощью Firebug

Интересует сколько времени заняла загрузка вашей страницы? Вкладка «Сеть» для каждого файла покажет процесс загрузки в виде полосок от начала и до окончания. На диаграммах загрузки четко видно, что javascript-файлы загружаются по очереди, и никогда — параллельно. Данный факт поможет Вам оптимизировать порядок загрузки файлов на странице, чтобы пользователь не проводил много времени в ожидании загрузки страницы. Жмем вкладку «Сеть» в окне Firebug и обновляем (F5) веб-страницу.

Илон Маск рекомендует:  Оценочная фyнкция для кpестиков ноликов (пять в pяд)

В нижний строке списка запросов представлен обобщенный подсчет: количество запросов, объем информации в MB, сколько из них закешировано и суммарное время выполнения всех запросов.
На второй строке Firebug можно включить фильтрацию этой информации, то есть, если Вас интересует конкретный тип файлов, например javascript, HTML запросы, CSS файлы или изображения — нажимайте кнопки в в меню плагина, чтобы фильтровать список по типам. Благодаря фильтрации можно вычислять общий размер и время загрузки для конкретного типа файлов.
Некоторые сетевые запросы загружаются из кеша браузера, а не из сети. Плагин выделяет запросы из кеша полосками светло-серого оттенка, благодаря чему Вы можете легко определить насколько эффективно Ваш сайт использует кеш для оптимизации времени загрузки веб-страницы.

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

На этом все. Надеюсь, урок для Вас был интересен и полезен. Удачи Вам!

Отладка 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

Отладчик

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

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

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

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

Отладка событий JavaScript с помощью Firebug

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

Возможно ли каким-либо образом установить точку останова, например, событие щелчка элемента с идентификатором registerButton или найти где-нибудь, какая функция привязана к этому событию?

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

Есть ли какой-нибудь отладчик, специально предназначенный для jQuery?

Кто-нибудь знает какой-нибудь инструмент, который превращает восстановленный JavaScript обратно в форматированный код, например, верните function() обратно в

8 ответов

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

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

Все связующие события jQuery передаются в «jQuery.event.add» (вот что он выглядит в незастроенном источнике), поэтому вы нужно найти этот метод и установить там точку останова.

Если вы дошли до этого, все, что вам нужно сделать, это проверить столбец в точке останова, чтобы узнать, кто его назвал. Обратите внимание: поскольку вы находитесь на внутреннем месте в библиотеке, вам нужно будет проверить несколько выходов (поскольку код, вызывающий «jQuery.event.add» , скорее всего, просто другие функции jQuery).

Обратите внимание, что 3) требует Firebug для FF3. Если вы похожи на меня и предпочитаете отлаживать Firebug для FF2, вы можете использовать вековой метод arguments.callee.caller.toString() для проверки стоп-кода, вставляя как можно больше «.caller «.

Возможно, вам удастся избежать:

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

Firebug – полезный инструмент для web-разработчика

Firebug – это многофункциональный плагин для браузера FireFox , который призван упростить процесс разработки и отладки web-страниц. Данное расширение позволяет в режиме реального времени инспектировать код страницы, выявлять в нем ошибки и тут же их исправлять.

Также плагин firebug предоставляет следующий функционал:

  • Инспектор ( Inspect )– функция, предназначенная для быстрого обнаружения тега и просмотра всех « привязанных » к нему свойств и стилей;
  • Возможность редактировать HTML -код и таблицы стилей CSS непосредственно в окне браузера. Можно вносить различные изменения в атрибуты тега и сразу же наблюдать результат. Это очень удобно для нахождения нужного оформления;
  • Возможность отладки JavaScript ;
  • Дополнительный функционал, который позволяет просмотреть процесс загрузки страницы.

Это далеко не полный список функций, которые представляет плагин для web-разработчиков. Помимо всего прочего были созданы дополнения к firebug :

  • Firecookie — инструмент для просмотра и управления cookies ;
  • FirePHP — инструмент для отладки PHP -кода при помощи HTTP -заголовков;
  • FireRainbow — инструмент, который выделяет ( подсвечивает ) вставки JavaScript ;
  • Page speed firebug — дополнение, позволяющее измерить и оптимизировать скорость загрузки сайта.

Firebug для firefox

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

Если страница была открыта в Firefox , то при наведении курсора на ссылку с версией firebug отобразится предложение в виде кнопки с надписью « +Добавить в Firefox ». Для начала установки плагина необходимо кликнуть по данной кнопке, а после ее окончания перезагрузить браузер:

Использование firebug

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

На данном скриншоте видно, что в окне слева представлен HTML -код страницы, а справа – CSS стили выделенного фрагмента кода. Это ускоряет поиск и отладку. Также в меню присутствуют следующие разделы для обработки:

Редактирование HTML-кода

Для редактирования html -кода достаточно выделить нужный фрагмент и выбрать пункт « Редактировать ». Изменения сразу же отобразятся на web -странице. Если навести курсор на какой либо участок кода, то firebug выделит на странице элемент, описанный данным кодом, как показано на следующем скриншоте:

Редактирование CSS

CSS стили представлены в правой части окна firebug . В окно выводятся стили, отвечающие выделенным на данный момент фрагментам html -кода. Чтобы увидеть, как стиль изменяет внешний вид элементов страницы, можно « отключить » свойство, нажав на красный перечеркнутый кружок. Для возвращения к изначальному виду элемента, необходимо повторно кликнуть на кружок:

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

Page speed firebug

Рассмотрим важное дополнение к плагину firebug – page speed firebug . Этот инструмент предназначен для анализа загрузки веб-страницы. При правильном использовании полученных данных, можно повысить скорость загрузки сайта.

Это расширение для firebug можно найти, перейдя по следующей ссылке: https://developers.google.com/speed/pagespeed/?csw=1 . После установки и запуска нет никаких препятствий для того, чтобы начать анализ:

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

Илон Маск рекомендует:  form в HTML

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

Горячие клавиши firebug

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

Firebug для других браузеров

Чтобы установить firebug для chrome , нужно зайти в настройки браузера, выбрать вкладку « расширения », затем кликнуть на « еще расширения » и с помощью поиска найти плагин:

Установить плагин для opera можно на официальном сайте :

Firebug для safari и для IE можно найти на сайте . Нужно отметить, что версии для браузеров, отличных FireFox , имеют не полный функционал, а являются Lite -версиями плагина.

Firebug является прорывом в сфере web-конструирования. Это отличный инструмент, который дает возможность сделать работу верстальщика более приятной и увлекательной, а самое главное – более быстрой.

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

Отладка событий JavaScript с помощью Firebug

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

можно ли как-то установить точку останова, например, событие click на элемент с ID registerButton , или найти где-нибудь, какая функция связана с этим событием?

Я нашел дополнение Firefox Javascript Deobfuscator, который показывает выполняемый в настоящее время JavaScript, который приятно, но код, который мне нужно отладить, использует jQuery, поэтому есть множество вызовов функций даже на простейшем событии,поэтому я не могу использовать это.

есть ли отладчик специально для jQuery?

кто-нибудь знает какой-нибудь инструмент, который поворачивает уменьшенный JavaScript обратно в в формате код как включить function() обратно в

8 ответов

Ну, это может быть слишком много проблем, чем это стоит, но, похоже, у вас есть три вещи, чтобы сделать:

De-minify источник. Мне нравится этот онлайн-инструмент для быстрого и грязного. Просто вставьте код и нажмите кнопку. Никогда не подводил меня, даже на самом фанковом JavaScript.

все связыватели событий jQuery перенаправляются в «jQuery.event.add» (вот как это выглядит в unbuilt источник), поэтому вам нужно найти этот метод и установить там точку останова.

если вы достигли этого, все, что вам нужно сделать, это проверить callstack в точке останова, чтобы увидеть, кто вызвал что. Обратите внимание, что поскольку вы находитесь во внутреннем месте в библиотеке, вам нужно будет проверить несколько прыжков (так как код вызывает «jQuery.event.add» скорее всего, просто другие функции jQuery).

обратите внимание, что 3) требуется Firebug для FF3. Если вы похожи на меня и предпочитаете отлаживать Firebug для FF2, вы можете использовать age-old arguments.callee.caller.toString() метод проверки callstack, вставляя столько «.caller » s по мере необходимости.

вы можете быть в состоянии уйти с:

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

сначала замените minified jquery или любой другой источник, который вы используете с formated. Еще один полезный трюк, который я нашел, — это использование profiler в firebug. Профайлер показывает, какие функции выполняются и вы можете нажать на одну и поехать туда, чтобы установить точку останова.

Google Chrome (the dev tools В) все точки останова, вместе с перерыв на событие.

все событий вместе с ориентация устройства изменения и таймеры

вы можете ознакомиться видео с презентацией всех возможностей от Google IO.

там также встроенный deminifier/ unminimizer/ prettifier который поможет вам установить точки останова вручную на сжатых файлах javascript.


Что вы можете сделать, это получить мини-код — у вас будет доступ к этому. Де-минимизировать код согласно Полумесяца свежее по (1) или любой метод вы предпочитаете.

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

затем с помощью Fiddler вы можете перехватить вызов браузера для minified.JS-файл с локальным unminified.js у вас есть на вашем местном диске.

Fiddler в основном перехватывает Ваш браузер запрос на определенный файл и может обслуживать другой файл в вашем браузере. Таким образом, теперь вы можете посмотреть на un-minified код.

другой вариант-использовать Firefox и установить на него отладчик Venkman — намного лучше, чем Firebug IMHO, — и отладчик Venkman имеет опцию «pretty print», которая может визуально уменьшать уменьшенный код во время выполнения. Придерживайтесь точки разрыва, где вы хотите сейчас.

другое обновление: теперь есть расширение firebug, которое украшает JavaScript:

Он отлично работает для меня в Firefox 12.0.

кредит на этот ответ для наблюдения за ним.

можно использовать debugger команда в любом месте файла javascript. Когда интерпретатор попадает в это состояние, если отладчик доступен (например, Firebug), то он запускается

найдите линию и поместите точку останова. Затем перезагрузите сайт / страницу. Затем firebug автоматически приостанавливает выполнение инструкции при попадании точки останова.

Руководство по Firebug для веб-разработчиков

Firebug – бесплатное расширение Mozilla Firefox для веб-разработок. Оно настолько полезно и популярно (используется также и в других браузерах, только с ограниченным функционалом), что имеет свои собственные расширения. Например, Pixel Perfect (выводит полупрозрачный макет страницы поверх верстки), Page Speed (тестирует скорость загрузки страницы с выдачей советов по оптимизации кода), Firefinder (ведет поиск по селекторам) и т.д.

C помощью Firebug можно добавлять/изменять CSS-свойства (сразу же видеть результат), устранять проблемы верстки, а также просматривать структуру и оформление других сайтов.

Прежде чем активно применять Firebug, следует изучить возможности этого инструмента. Данная статья, надеюсь, поможет вам в этом.

Для начала необходимо скачать и установить (если вы еще этого не сделали) браузер Mozilla Firefox, потом скачать и установить расширение Firefox – Firebug.

Вы выполнили все вышеперечисленное? Тогда Firebug готов к работе.

Как запустить Firebug

Когда Firebug запущен, то веб-страница выглядит следующим образом:

Запустить Firebug можно с помощью клавиши F12 (для Firebug есть и другие «горячие» клавиши) или через контекстное меню, которое открывается кликом правой кнопки мыши на страницу (или на конкретный HTML-элемент: гиперссылку, заголовок, картинку, кнопку и т.д.) –> «Инспектировать элемент с помощью Firebug».

Для быстрого запуска Firebugв Firefox предусмотрена иконка.

Firebug можно открыть в отдельном окне через «Открыть Firebug в отдельном окне».

Просмотр макета и разметки веб-страницы.

Веб-разработчики, глядя на страницу, над которой работают, часто спрашивают себя: «Где же ошибка?». Firebug помогает разобраться в коде и ответить на этот вопрос. Сразу же при открытии Firebug перед вами появляется панель HTML-элементов веб-страницы (вкладка HTML).

В свою очередь HTML-панель разделяется на 2 панели: панель просмотра HTML-разметки и боковую – панель стилей. Панель HTML-разметки, которая находится слева, показывает сгенерированный исходный код страницы.

Если вам надо просмотреть, где на странице находится тот или иной HTML-элемент, то нужно просто навести мышь (или кликнуть) на HTML–код этого элемента в панели HTML-разметки. И тогда браузер подсветит нужный вам элемент. Функция подсветки элемента сама по себе интересна, потому что показывает то, как браузер обрабатывает HTML-элементы и где они находятся на веб-странице. Такая функция наглядно показывает все padding-и, margin-ы и т.п.

Обратите внимание, когда вы кликаете по HTML-элементу в панели HTML-разметки , то в верхней строке панели появляется порядок вложения HTML-элементов, такая подсказка нужна во избежание повторов CSS-свойств где-либо на вашем сайте. По этой строке также смотрят наследование CSS-свойств.

В правой части HTML-панели Firebug предусмотрена функция поиска HTML-элементов (найденные элементы в панели HTML-разметки будут подсвечиваться серым).

Боковая панель стилей показывает дополнительную информацию о выделенном элементе, состоит из 4-х вкладок:

1) Стиль – показывает CSS-свойства конкретного элемента, название документа, в котором прописаны эти свойства и номер строки;

2) Во вкладке «Скомпилированный стиль» показаны все CSS-свойства, которые применяются к данному элементу и не задаются явно через стили (этот стиль сгенерирован на основе внутренних значений браузера и стиле родительских элементов);

3) Макет – визуально показывает вам margin, border и padding выбранного элемента, значения можно изменять (дважды кликнув по ним);

4) Вкладка DOM (DocumentObjectModel) используется JavaScript-разработчиками.

Самая интересная особенность Firebug состоит в том, что не имея доступа к редактированию исходного кода, можно тем не менее изменять/добавлять значения как HTML-атрибутов, так и CSS-свойств. Все внесенные вами изменения никак не повлияют на исходный код, но вы получите возможность поэкспериментировать и изучить всевозможные вариации расположения и оформления элементов веб-страницы. Самые популярные манипуляции в Firebug:

  • добавление/удаление всех HTML-элементов;
  • добавление/удаление идентификаторов и классов CSS-элементов;
  • ввод длинного текста для проверки правильности переноса строк;
  • просмотр различных вариантов оформления того или иного элемента;

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

Рассмотрим более подробно устройство CSS-панели Firebug. CSS-стили элементов расположены в ней в алфавитном порядке, начиная с самых «свежих» свойств.

Иногда CSS-свойство одного элемента может быть прописано несколько раз с разными значениями, тогда браузер берет в рассмотрение только последнее CSS-свойство или CSS-свойство с более высоким приоритетом – !important. Отсюда и берутся зачеркнутые свойства в CSS-панели.

Редактировать CSS-свойства в Firebug – одно удовольствие. Все значения, названия свойств можно легко изменять «на лету». Очень удобно и то, что в Firebug есть автодополнения.

CSS-свойство можно отключить и посмотреть на веб-страницу без него.

С помощью клавиши Enter можно перемещаться по CSS-свойствам и их значениями, а также перейти на пустую строку для добавления нового CSS-свойства. Чтобы добавить CSS-свойство к элементу, у которого нет id или class, можно добавить новый атрибут в панели HTML-разметки во вкладке HTMLили CSS («Правка кода»).

Причуды и ограничения Firebug

Могут возникнуть сложности при редактировании HTML-элементов со свойствами :hover или JavaScript (например выпадающее меню), потому что панель HTML-разметки показывает свойства этих элементов только пока на них наведена мышь. Для решения этой проблемы можно прописать параметры видимости элемента в HTML-панели. Ниже рассмотрен пример выпадающего меню, где добавлен style=»display:block»:

Иногда CSS-панель не дает право редактировать свойства и выдает ошибку (особенно при проверке UserAgents). Для устранения ошибки нужно просто перезапустить браузер.

При работе с Firebug важно понимать, что этот инструмент выводит в панель HTML-разметки не только тот код, который хранится у вас в файлах HTML, но а также сгенерированный php-код.

Еще одна проблема, связанная с Firebug – это тот факт, что он создавался под Firefox, который может сам исправлять некоторый недочеты и ошибки в коде.

Например, в коде страницы есть такая вот строка:

В этой строке отсутствует закрывающий тег . Некоторые браузеры могут не понять, что это ошибка и ссылка окажется недееспособной. Firebug в таких случаях надеется на встроенный механизм Firefox, который выведет на деле отсутствующий тег (это называется сгенерированный код). При разработке сайта такую особенность надо держать в голове и проверять его работоспособность во всех остальных браузерах.

Итак, надеюсь, эта статья помогла вам понять основные принципы работы в такой замечательной программе как Firebug. Остальную информацию можно прочесть в официальной документации или проверить опытным путем. Удачи!

Понравилась статья? Сохраните себе на стену:

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

В последние несколько лет благодаря появлению различных библиотек, таких как 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).

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

Отладка событий JavaScript с помощью Firebug

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

Возможно ли каким-либо образом установить точку останова, например, событие щелчка элемента с идентификатором registerButton или найти где-нибудь, какая функция привязана к этому событию?

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

Есть ли какой-нибудь отладчик, специально предназначенный для jQuery?

Кто-нибудь знает какой-нибудь инструмент, который превращает восстановленный JavaScript обратно в форматированный код, например, верните function() обратно в

8 ответов

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

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

Все связующие события jQuery передаются в «jQuery.event.add» (вот что он выглядит в незастроенном источнике), поэтому вы нужно найти этот метод и установить там точку останова.

Если вы дошли до этого, все, что вам нужно сделать, это проверить столбец в точке останова, чтобы узнать, кто его назвал. Обратите внимание: поскольку вы находитесь на внутреннем месте в библиотеке, вам нужно будет проверить несколько выходов (поскольку код, вызывающий «jQuery.event.add» , скорее всего, просто другие функции jQuery).

Обратите внимание, что 3) требует Firebug для FF3. Если вы похожи на меня и предпочитаете отлаживать Firebug для FF2, вы можете использовать вековой метод arguments.callee.caller.toString() для проверки стоп-кода, вставляя как можно больше «.caller «.

Возможно, вам удастся избежать:

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

Форум

Справочник

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

Как смотреть ошибки. Firebug.

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

Firebug поможет с их отловом, покажет где и почему они произошли.
К сожалению, он работает только в Firefox (и других браузерах на движке Mozilla), но более удобного инструмента на текущий день нет.

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

Firebug-значок может иметь один из трех видов:

Галочка в зеленом кружке Все в порядке. Firebug работает, ошибок не замечено. Буква f в сером кружке Firebug отключен. Кликните по кружку правой кнопкой мыши и снимите галочку с Disable Firebug. Крестик в красном кружке Произошла ошибка javascript. Клик на кружке откроет консоль Firebug. Клик на ошибке в консоли переведет Вас на строку скрипта, где произошла ошибка.

Для эксперимента создадим функцию divide , которая делит свой аргумент на некое число, и назначим ее запуск по клику на кнопку:

Запишите этот код в файл divide.html и запустите. Нажатие на кнопку покажет ошибку при включенном Firebug:

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

У строчки с ошибкой «divisor not defined» Вы видите плюсик. Он раскрывает последовательность вложенных вызовов, которые привели к печальному результату.

Клик на строке с ошибкой переводит во вкладку Script, где можно увидеть сам скрипт:

Теперь понятно, что ошибка возникла потому, что переменная divisor не определена. Поправим функцию divide так, чтобы она спрашивала ее у посетителя:

Поправив код, обновите страничку. Сообщение об ошибке должно исчезнуть.

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

Вам откроется одна из особенностей языка javascript. Арифметические операции никогда не приводят к ошибкам. Можно делить на ноль, текстовую строку — на что угодно.

Подробнее об особенностях типов данных в javascript написано в статье Базовые типы javascript

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL