Подробный гайд по отладке кода на JavaScript в Chrome Devtools. Подсказки к переменным
Firebug содержит мощный avaScript отладчик, который дает Вам возможность приостановить выполнение в любой момент и просмотреть каждую переменную на этот момент. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.
Находите скрипты с легкостьюМногие веб-вриложения состоят из большого числа файлов, и найти тот, который нужно отлаживать может быть рутинной и скучной задачей. Меню для выбора скриптов в Firebug сортирует и организует файлы в четкий и понятный список, который поможет Вам найти любой файл одним щелчком пальца.
Firebug позволяет Вам устанавливать брейкпойнты, которые говорят отладчику приостановить выполнение скрипта, когда он дойдет до определенной строки. Пока выполнение приостановлено, Вы можете смотреть значения любых переменных и инспектировать объекты.
Чтобы установить брейкпойнт, кликните на номере любой строки, и там появится красная точка, обозначающая, что брейкпойнт установлен. Кликните на красной точке еще раз, чтобы убрать брейкпойнт.
Брейкпойнты могут создать проблемы, если срабатывают слишком часто. Иногда мы хотим приостанавливать выполнение только при выполнении определенных условий. Firebug позволяет Вам устанавливать "условные" брейпкойнты. Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.
Чтобы установить условный брейкпойнт, просто кликните правой кнопкой на любом номере строки. Появится пузырь с приглашением ввести javascript-выражение. Вы можете сделать правый клик еще раз в любое время, чтобы сменить выражение, или левый клик, чтобы избавиться от брейкпойнта.
Когда отладчик приостановил выполнение, Вы можете продолжать скрипт по одному шагу. Это позволяет Вам четко видеть, как выполнение конкретной строчки влияет на переменные и объекты.
Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки "Run to this Line", чтобы продолжить выполнение до этой строчки.
Не всегда Вы выбираете отладчик... Иногда отладчик выбирает Вас.. Firebug дает Вам возможность заходить в отладчик автоматически, когда происходит ошибка, так что Вы можете исследовать условия, при которых возникла проблема.
Когда отладчик приостанавливает выполнение, Firebug показывает Вам стек вызова, т.е набор вложенных вызовов функций, которые сейчас запущены и ждут возврата.
Стек вызовов представлен компактной полоской кнопок в панели, каждая - с именем функции в стеке. Вы можете кликнуть любую кнопку, чтобы перепрыгнуть на строку, где функция приостановлена и взглянуть на значения локальных переменных изнутри функции.
Во время отладки, часто хочется видеть значение сложных выражений или объектов, которые закопаны в DOM. Firebug позволяет печатать произвольное javascript-выражение, значение которого будет обновляться на каждом шаге отладчика.
Печатая выражения, не забывайте, что можно использовать клавишу Tab для автодополнения свойств объектов.
Пока выполнение приостановлено, Вы можете перемещать мышь над любыми переменными текущей функции, просматривая всплывающие подсказки со значениями. Это замечательный способ не отрывать глаз от кода и получать ответы прямо во время чтения.
Ваше веб-приложение почти совершенно. Вы проработали все ошибки, сделан стильный дизайн и пользователям оно нравится. Только одна проблема - некоторые возможности подтормаживают, и Вы не уверены, почему..
С Firebug Вам больше не придется удивляться, почему код работает медленно. Используя профилировщик Firebug, Вы можете отделить мух от котлет буквально за секунды.
Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку "Profile". Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните "Profile" еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.
Иногда проблемная функция вызывается так много раз, что Вы не можете каждый раз заходить в отладчик. Вы просто хотите знать, когда она вызвана и с какими параметрами.
Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите "Log calls to "имя функции"". Затем перейдите в консоль и смотрите, как в лог вплывают вызовы...
Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.
Время от времени разработчики совершают ошибки при кодировании. Ошибка в программе или скрипте называется ошибкой.
Процесс поиска и исправления ошибок называется отладкой и является нормальной частью процесса разработки. В этом разделе рассматриваются инструменты и методы, которые могут помочь вам в отладке задач.
Сообщения об ошибках в IEСамый простой способ отслеживания ошибок - включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.
Двойной щелчок по этому значку приведет вас к диалоговому окну, отображающему информацию о конкретной ошибке.
Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.
Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже -
Другие браузеры, такие как Firefox, Netscape и Mozilla, отправляют сообщения об ошибках в специальное окно, называемое Консоль JavaScript или Консоль ошибок. Чтобы просмотреть консоль, выберите « Инструменты» → « Консоль ошибок» или «Веб-разработка».
К сожалению, поскольку эти браузеры не дают визуальной информации при возникновении ошибки, вы должны держать консоль открытой и следить за ошибками по мере выполнения вашего скрипта.
Уведомления об ошибках, отображаемые в консоли или через диалоговые окна Internet Explorer, являются результатом как синтаксиса, так и ошибок времени выполнения. Эти уведомления об ошибках включают номер строки, в которой произошла ошибка.
Если вы используете Firefox, вы можете нажать на ошибку, доступную в консоли ошибок, чтобы перейти к точной строке в скрипте с ошибкой.
Как отлаживать скриптСуществуют различные способы отладки вашего JavaScript - Использовать JavaScript Validator
Один из способов проверить код JavaScript для странных ошибок - запустить его через программу, которая проверяет ее, чтобы убедиться, что она действительна и что она соответствует официальным синтаксическим правилам языка. Эти программы называются синтаксическими анализаторами или просто валидаторами для краткости и часто идут с коммерческими редакторами HTML и JavaScript.
Наиболее удобным валидатором для JavaScript является JavaScript Lint Дугласа Крокфорда, который доступен бесплатно в JavaScript Lint Дугласа Крокфорда.
Просто зайдите на эту веб-страницу, вставьте код JavaScript (только JavaScript) в предоставленную текстовую область и нажмите кнопку jslint. Эта программа будет анализировать ваш код JavaScript, гарантируя, что все определения переменных и функций следуют правильному синтаксису. Он также будет проверять инструкции JavaScript, такие как if и while, чтобы они также соответствовали правильному формату
Добавить код отладки в ваши программыВы можете использовать методы alert() или document.write() в своей программе для отладки вашего кода. Например, вы можете написать что-то следующее:
var debugging = true; var whichImage = "widget"; if(debugging) alert("Calls swapImage() with argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Exits swapImage() with swapStatus=" + swapStatus);
Изучая содержимое и порядок alert() по мере их появления, вы можете легко проверить работоспособность своей программы.
Как использовать отладчик JavaScriptОтладчик - это приложение, в котором все аспекты выполнения скрипта находятся под контролем программиста. Отладчики обеспечивают мелкомасштабный контроль над состоянием скрипта через интерфейс, который позволяет вам проверять и устанавливать значения, а также контролировать поток выполнения.
Как только сценарий загружен в отладчик, его можно запустить по одной строке за раз или дать указание остановиться на определенных контрольных точках. Когда выполнение остановлено, программист может проверить состояние скрипта и его переменных, чтобы определить, что-то не так. Вы также можете просматривать переменные для изменения их значений.
- Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
- Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
- Напишите модульный код. По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
- Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
- Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
- Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
- Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
- Следите за кавычками. Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
- Следите за своими равными знаками. Вы не должны использовать один = для целей сравнения.
- Явным образом объявляю переменные с помощью ключевого слова var.
От автора: console.log может много сказать о приложении, но с его помощью нельзя по-настоящему заниматься отладкой кода. Новый JS дебагер в Firefox поможет вам писать код быстрее и без багов. Статья про принцип работы этого отладчика.
В этом примере мы откроем очень простое приложение, с помощью которого легко делается отладка JavaScript. Само приложение работает на базовых open source JS фреймворках. Откройте его в последней версии Firefox Developer Edition и запустите debugger.html с помощью комбинации клавиш Option + Cmd + S на Mac или Shift + Ctrl + S на Windows. Отладчик разделен на 3 панели: панель со списком файлов, панель кода и панель инструментов.
Панель инструментов разделена на тулбар, выражения для отслеживания, точки останова, стек вызовов и области.
Нам хочется использовать console.log для отладки кода. Просто добавляем вызов в код, чтобы узнать значение переменной, и все, так ведь? Такой подход будет работать, но он громоздкий и долгий. В этом пример мы будем пошагово выполнять приложение с помощью debugger.html для поиска значения переменной.
С помощью debugger.html можно погружаться вглубь код, просто добавив точку останова на строке. Точки останова ставят отладчик на паузу, чтобы вы могли посмотреть код. В этом примере мы добавим точку останова на строку 13 файла app.js.
Теперь добавьте задачу в список. Код остановится на функции addTodo, и мы сможем посмотреть в коде значение поля. Наведите курсор на переменную, чтобы увидеть ее значение и т.д. Так можно посмотреть якоря, апплеты, дочерние элементы и т.д.:
Эту же информацию можно найти на панели Области.
Когда скрипт на паузе, можно пошагово выполнять его строки с помощью тулбара. Кнопки Возобновить/Пауза делают именно то, что написано. Кнопка Перешагнуть выполняет текущую строку кода, Зайти – заходит внутрь функции, Выйти – выполняет текущую функцию до выхода из ее вызова.
Следить за значением переменной моно также с помощью выражений для отслеживания. Просто введите выражение в поле Выражения для отслеживания, и отладчик будет следить за ним во время выполнения кода. В примере выше можно добавить выражения title и to-do, и отладчик разобьет значения, когда они будут доступны. Особенно полезно, когда:
Вы пошагово выполняете код и следите за изменением значения;
Вы отлаживаете один и тот же код много раз и хотите увидеть общие значения;
Вы пытаетесь понять, почему эта чертова кнопка не работает.
С помощью debugger.html также можно проводить отладку приложений React/Redux. Как это работает:
Перейдите к компоненту, который хотите отладить.
Смотрите схему компонента слева (функции в классе).
Добавьте точки останова в подходящие функции.
Нажмите паузу и следите за свойствами и состояниями компонента.
Стек вызова упрощен, поэтому вы видите код приложения в перемешку с фреймворком.
debugger.html позволяет смотреть запутанный или минифицированый код, который может вызывать ошибки. Особенно полезно при работе с общими фреймворками типа React/Redux. Дебагер знает о компоненте, на котором вы нажали паузу, и покажет упрощенный стек вызова, схему компонента и свойства. Ниже разработчик, Amit Zur объясняет, как он использует отладчик кода в Firefox на JS Kongress:
Если хотите подробно изучить новый debugger.html, зайдите на Mozilla Developer Playground . Мы создали серию уроков, чтобы помочь разработчикам научиться эффективно использовать инструмент для отладки кода.
Инструменты разработчика с открытым исходным кодомПроект debugger.html был запущен примерно 2 года назад вместе с полным пересмотром Firefox DevTools. Мы хотели перевести DevTools на современные технологии, открыть их разработчикам по всему миру. А так как технология открыта, она может свободно вырасти в то, что маленькая группа в Mozilla и не могла себе представить.
JS – основа любого продвинутого веб-приложения, поэтому мощный отладчик был основной частью набора инструментов. Мы хотели создать что-то быстрое, легкое в использовании, адаптирующееся – способное отлаживать любой новый JS фреймворк. Мы решили использовать популярные веб-технологии, так как хотели работать ближе к сообществу. Этот подход улучшил бы сам отладчик – если бы мы приняли Webpack и начали внутренне использовать билд инструмент и карты исходников, мы бы захотели улучшить сопоставление исходников и горячую перезагрузку.
debugger.html написан на React, Redux и Babel. Компоненты React легкие, тестируемые и легко проектируемые. Для быстрого прототипирования UI и документации общих компонентов мы используем React Storybook. Это упрощает работу с разными JS фреймворкам (типа React). Babel front-end позволяет делать такие вещи, как показывать класс Component и его функции в левом сайдбаре. Мы также можем устанавливать точки останова на функции, и они не сдвинутся, если вы измените код.
Действия Redux – это чистый API для UI. Однако их также можно использовать для создания независимого CLI JS Debugger. В хранилище Redux есть селекторы для запроса текущего состояния отладки. Наши юнит тесты запускают действия Redux и имитируют ответы браузера. Интеграционные тесты приводят браузер в действие с Redux действиями отладчика. Сама функциональная архитектура спроектирована для тестирования.
Мы полагались на сообщество разработчиков Mozilla на каждом шаге. Проект был выложен на GitHub , и наша команда достучалась до разработчиков по всему миру, и они откликнулись. В самом начале для сообщества были критичны автоматические тесты. Тесты проводили регресс и документировали поведение, которое легко можно не доглядеть. Именно поэтому один из первых шагов был – написание юнит тестов для действий Redux и типов Flow для хранилища Redux. Фактически, сообщество обеспечило, что покрытие Flow и Jest помогло убедиться в том, что каждый файл был написан и протестирован.
Как разработчики, мы считаем, что инструменты тем сильнее, чем больше вовлечено разработчиков. Наша основная команда всегда была маленькая (2 человека), но в среднем за неделю было 15 помощников. Сообщество дало нам разные точки зрения, что помогло нам предвидеть сложности и написать функции, о которых мы и не могли мечтать. Сейчас мы форматируем стеки вызовов под 24 библиотеки. О многих мы даже не знали. Мы также показываем карты Webpack и Angular в дереве исходников.
Мы планируем перенести все Firefox DevTools на GitHub, чтобы их могли использовать и улучшать больше людей. Мы с радостью примем вашу помощь. Можете перейти на страницу нашего проекта debugger.html на GitHub. Мы написали целый список инструкций по запуску отладчика на своей машине, где вы можете менять все, что хотите. Используйте его для отладки JS кода для чего угодно – браузеров, терминалов, серверов, телефонов, роботов. Если видите, что можно улучшить, пишите нам на GitHub.
В последние несколько лет благодаря появлению различных библиотек, таких как 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 , который выводит значения переменных на панель консоли:
Console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли
Метод можно использовать для вывода вычисленных значений:
Function calcPhotos() { total_photos_diff = total_photos - prev_total_photos; // Выводим значения переменных в консоль console.log(total_photos_diff); }
Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.
Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Выводим значения в консоль console.log(total_photos_diff); // Обновляем значения t = t*1.3; p = p*1.1; } setInterval(function() { calcPhotos(t,p); },100);
Выделение сообщенийВ выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.
console.info() : выводит иконку "информация" и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.
console.warn() : выводит иконку "предупреждение" и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.
console.error() : выводит иконку "ошибка" и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.
Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.
Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group() :
// Первая группа console.group("Photo calculation"); console.info("Total difference is now " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Вторая группа console.group("Incrementing variable"); console.log("Total photos is now: " + t); console.log("Prev total photos is now: " + p); console.groupEnd();
Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:
Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug .
Прерывание хода выполнения скриптаВывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.
Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.
Работаем с точками прерыванияДля установки точки прерывания нужно перейти на закладку "Scripts " и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации - появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:
Когда выполнение прервется, можно поместить курсор мыши над любой переменной и отладчик выведет подсказку со значением в текущий момент.
Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:
На боковой панели можно отслеживать изменение состояния кода, включая динамику локальных и глобальных переменных.
Условные точки прерыванияВ процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.
В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.
Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт "Edit Breakpoint" для вывода диалога редактирования условий формирования прерывания.
Установка точки прерывания в кодеНе всегда удобно устанавливать точки прерывания с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В примере, приведённом ниже, показано, как вы можете прервать выполнение кода при соблюдении определенных условий:
If (total_photos_diff > 300) { debugger; // запускаем отладчик и прерываем выполнение кода }
Другие способы прервать выполнение кодаКроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.
Остановка при изменении DOMЕсли вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.
На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.
Остановка при появлении всех или необрабатываемых исключенийБольшинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки "Pause " в нижней строке интерфейса.
Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:
Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Первая группа console.info("Total difference is now " + total_photos_diff); // Обновляем значения t = t+5; p = p+1; // Необрабатываемое исключение if (total_photos_diff > 300) { throw 0; } // Обрабатываемое исключение if (total_photos_diff > 200) { try { $$("#nonexistent-element").hide(); } catch(e) { console.error(e); } } } setInterval(function() { calcPhotos(t,p); },50);
Введение в стек вызововЕсли ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.
Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).
Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.
На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues() , что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.
Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.
При написании JavaScript, если никакой инструмент отладки не является очень болезненным.
отладка JavaScriptСредства отладки не трудно писать программы JavaScript.
Ваш код может содержать синтаксические ошибки, логические ошибки, если нет средств отладки, эти ошибки более трудно найти.
Как правило, если происходит ошибка JavaScript, не будет никаких запросов, так что вы не можете найти код совсем не то место.
средства отладки JavaScriptВ поисках ошибки в программном коде называется отладка.
Отладка трудно, но, к счастью, многие браузеры имеют встроенные средства отладки.
Встроенные средства отладки можно запустить или выключить, серьезное сообщение об ошибке будет отправлено пользователю.
С помощью инструментов отладки, мы можем установить точку останова (стоп позиции выполнения кода), и может обнаружить, когда переменная выполнение кода.
Браузер с поддержкой отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.
Если браузер поддерживает отладку, вы можете использовать console.log () метод выводит значение JavaScript в окне отладки:
примеров
Мой первый веб-страницы
а = 5;
б = 6;
с = а + Ь;
console.log (с);
В окне отладки вы можете установить точки останова JavaScript-код.
На каждой точки останова остановит выполнение кода JavaScript, чтобы проверить значение переменных в JavaScript мы.
После того, как проверка будет завершена, вы можете повторно запустить код (например, кнопка Play).
отладчик ключевых словотладчик ключевое слово, чтобы остановить выполнение JavaScript, и вызывать функции отладчика.
Это ключевое слово и установить точки останова в инструменте отладки, эффект тот же.
Если нет отладки имеется, отладчик оператор не будет работать.
Открытый отладчик, выполнение кода останавливается перед третьей линии.
Основные средства отладки браузераКак правило, браузеры позволяют средства отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.
Каждый браузер, выполните следующие действия:
браузер Chrome- Откройте свой браузер.
- Выберите Инструменты в меню.
- И, наконец, выберите Console.
- Откройте свой браузер.
- Перейти на страницу:
http://www.getfirebug.com. - Следуйте инструкциям:
Установить Firebug.
- Откройте свой браузер.
- Выберите Инструменты в меню.
- Выберите Инструменты Инструменты для разработчиков.
- И, наконец, выберите Console.
- Откройте свой браузер.
- Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
http://www.opera.com/dragonfly/.
- Откройте свой браузер.
- Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
- Выберите "Панель управления" в нижней части всплывающего окна.