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

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

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

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

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

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


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

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

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

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

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

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

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

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


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

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

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

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

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

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

    • Точку останова можно инициировать и напрямую из а скрипта, командой debugger: function pow(x, n) { ... debugger; // источник -> исходный код элемента со стилем" выводит в отдельном окне html код выделенного элемента вместе со всеми это css стилями. Это может быть особенно полезно, если Вам вдруг понадобится взять с другого сайта часть страницы вместе с сss стилями.
      К минусам можно отнести то, что в IE Developer Tools отсутствует панель для отслеживания запросов, поэтому отследить количество запросов и скорость загрузки не получится.
      Как известно, IE это самый отстающий от спецификаций браузер. При верстке дизайна IE больше всех требует внимания и поиска решений для правильного отображения элементов страницы. Поэтому к большому плюсу IE Developer Tools можно отнести возможность проверять совместимость страницы в IE 7.


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


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

      1074

      При написании 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/.
      сафари
      • Откройте свой браузер.
      • Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
      • Выберите "Панель управления" в нижней части всплывающего окна.