Как выполнить отладку JavaScript приложения

Скачать Viber 16.06.2019
Скачать Viber

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

отладка JavaScript

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

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

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

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

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

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

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

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

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

Метод console.log ()

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

примеров



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


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

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

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

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

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

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

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

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

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

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

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

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

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

браузер Chrome
  • Откройте свой браузер.
  • Выберите Инструменты в меню.
  • И, наконец, выберите Console.
Firefox браузер
  • Откройте свой браузер.
  • Перейти на страницу:
    http://www.getfirebug.com.
  • Следуйте инструкциям:
    Установить Firebug.
Браузер Internet Explorer.
  • Откройте свой браузер.
  • Выберите Инструменты в меню.
  • Выберите Инструменты Инструменты для разработчиков.
  • И, наконец, выберите Console.
опера
  • Откройте свой браузер.
  • Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
    http://www.opera.com/dragonfly/.
сафари
  • Откройте свой браузер.
  • Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
  • Выберите "Панель управления" в нижней части всплывающего окна.

Здравствуйте! В продолжении темы поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле — Chrome.

В принципе такие инструменты есть в любом браузере, а если учесть, что большая часть браузеров работает на одном движке, что и Chrome, то тут в принципе не будет особых различий. Также еще очень хорош Firefox со своим инструментом Firebug.

Общий вид панели Sources

Запустите браузер Chrome.

Нажмите F12, при этом запустятся Инструменты разработчика.

Перейдите на вкладку Source


Здесь можно выделить 3 зоны:

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

    Общие кнопки управления

    3 наиболее часто используемые кнопки управления:

    Формат Эта кнопка позволяет отформатировать код. Может вам понадобиться, если вы желаете отформатировать чужой код. Консоль Очень важная кнопка по нажатию на которой открывается консоль. В консоли можно вводить различные команды и операторы на JavaScript. Окно В случае с большим участком кода позволяет открыть код в отдельном окне. Точки останова

    Рассмотрим на примере файла pow.js. Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.

    Выглядеть это примерно так:


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

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

    Информация о точке останова появляется на вкладке Breakpoints.

    Вкладка Breakpoints очень полезна, когда код очень большой, она позволяет:

    • Быстро перейти на то место кода, где поставлен брейкпойнт простым кликом на текст.
    • Временно отключить точку останова кликом на чекбокс.
    • Быстро удалить точку останова правым кликом на текст и выбором Remove.

    Некоторые дополнительные возможности

    • Точку останова можно инициировать и напрямую из а скрипта, командой debugger: function pow(x, n) { ... debugger; //

    Рекомендуем почитать

    Наверх