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

Визуальная отладка

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

Консоль API – это объект (console), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug

Как отслеживать события

Firefox - Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

Тормозит - вне работы выключать

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

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

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

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

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

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

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

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

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

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

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

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

Точки останова

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

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

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

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

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

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

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

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

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

• Правый клик на номере строки pow.js позволит вам создать так называемую условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

Остановиться и осмотреться

Поскольку наша функция выполняется одновременно с загрузкой страницы, то самый простой способ активировать отладчик JavaScript – это перезагрузить её. Для этого нажмите F5. И при этом выполнения скрипта будет остановлено на 6-й строке.

Обратите внимание на информационные вкладки:

• Watch Expressions – здесь можно увидеть текущее значение переменных, которые вы отслеживаете в скрипте.
• Call Stack – показывает стек вызовов — это все вызовы приведшие к этой строке кода.
• Scope Variables – показывает переменные. Причем показывает как глобальные так и локальные переменные.

Управление выполнением

А теперь давайте «погоняем » скрипт и отследим его работу. Обратите внимание на панель сверху там находятся 6 кнопок работу которых мы и рассмотрим.

– продолжить выполнение, или можно нажать на клавишу F8. Эта кнопка продолжает выполнение скрипта. Таким образом мы можем пошагово проходить наш сценарий как будто он запускается в браузере. – сделать шаг, не заходя в функции, или клавиша F10.

Выполнить один шаг скрипта не заходя при этом внутрь функции.

– сделать шаг внутрь функции, клавиша F11. Выполняет один шаг скрипта и при этом заходит внутрь функции. – выполнять до выхода из текущей функции, клавиша Shift+F11.

выполняет полностью код, находящийся в функции.

– отключить/включить все точки останова. Эта кнопка просто отключает и при повторном нажатии включает все точки останова. – включить/отключить автоматическую остановку при ошибке. Данная кнопка весьма полезна при отладке и позволяет включать и отключать автоматическую остановку при ошибке.

Сам процесс отладки заключается в пошаговом прохождении программы и в наблюдении за значениями переменных.

Консоль браузера

При отладке кода скрипта бывает полезным перейти на вкладку Console и посмотреть нет ли там ошибок также можно выводить информацию в консоль с помощью console.log().

Например:

// результат будет виден в консоли for (var i = 0; i < 6; i++) { console.log("значение", i); }

Консоль доступна в любом браузере

Ошибки в консоли

Ошибки JavaScript скриптов можно посмотреть в консоли.

В консоли вы можете увидеть:

Красная строка – это собственно сообщение об ошибке.

Итого

Отладчик вам позволяет:

• Останавливаться на отмеченном месте (точка останова) или по команде debugger.
• Выполнять код – отлаживать программу по одной строке или до определённого места.
• Отслеживать переменные, выполнять команды в консоли и т.п.

В инструментах разработчика есть и другие вкладки как Elements позволяет смотреть HTML-код страницы, Timeline показывает сколько файлов загружает браузер и сколько времени у него на это уходит. Но нам пока эт вкладки не очень интересны.

Опубликовано: 26 марта 2013

Chrome Developer Tools — на мой взгляд, самый удобный инструмент веб-разработки. Он содержит в себе весь необходимый функционал для создания и отладки полноценных веб-приложений. Но с ним, как и с любым другим инструментом, нужно научиться работать. Начнем с основ.

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

Консоль дает разработчику доступ к ряду удобных и полезных функций. Рассмотрим основные из них:

console.log() , console.error() , console.warn() и console.debug()

Базовые функции вывода в консоль, позволяют выводить в консоль произвольные сообщения. Отличаются классификацией выводимых сообщений: error() помечает сообщения как ошибки, warn() помечает сообщения как предупреждения, debug() помечает сообщения как отладочные.

Эти функции принимают неограниченное количество параметров, что позволяет выводить несколько переменных подряд и даже склеивать их в целые предложения:

Console.log("Время регистрации:", 1121102802);

Также есть поддержка форматирования:

Console.log("Время регистрации: %d", 1121102802);

Поддерживаемые указатели формата:

// %s — строка console.log("%s", "Привет"); // %d, %i — целое число console.log("%d", 1337 / 42); // %f — число с плавающей запятой console.log("%f", 1337 / 42); // %o — элемент DOM console.log("%o", document.body); // либо console.dirxml(document.body); // %O — элемент JavaScript console.log("%O", document.body); // либо console.dir(document.body); // %c — вывод с заданием CSS стилей console.log("%cпривет %cмир", "color: red", "color: blue");

console.trace()

Выводит стек вызовов из точки в коде, где был вызван метод. Стек вызовов включает имена файлов и номера строк плюс счетчик вызовов метода trace() из одной и той-же точки.

console.assert()

Функция assert проверяет выражение, переданное первым параметром, и если выражение ложно, записывает в консоль ошибку вместе со стеком вызовов:

Var two = 3; var three = 2; console.assert(two < three, "два меньше трех");

console.group() , console.groupCollapsed() и console.groupEnd()

Функции для группировки вывода. Функция group() открывает группу сообщений, в качестве параметра принимает название группы (поддерживается форматирование, как в console.log()), а функция groupEnd() закрывает последнюю открытую группу. Функция groupCollapsed() аналогична функции group() , но создаваемая группа сообщений свернута по умолчанию.

console.time() и console.timeEnd()

Функции для вычисления времени исполнения кода. Функция time() запускает таймер, а функция timeEnd() останавливает таймер и выводит его значение. Обе функции принимают название таймера в качестве обязательного параметра.

Фильтр сообщений

В правом нижнем углу на вкладке консоли расположен фильтр сообщений по типу. All соответствует всем сообщениям, Errors — ошибкам и выводу функции console.error() , Warnings — предупреждениям и выводу функции console.warn() , Logs — выводу функции console.log() , Debug — выводу функций console.debug() , console.timeEnd() и прочей информации.

Взаимодействие с другими вкладками

debugger;

Когда браузер достигает строчки debugger; в любом коде, он автоматически останавливает выполнение скрипта в этой точке и переходит на вкладку Скриптов (Sources).

$() , $$() и $x()

Функции, упрощающие выборку элементов, работают только в консоли. Функция $() возвращает первый элемент, соответствующий переданному селектору. Вторым параметром можно передать контекст поиска:

$("head") // возвращает элемент head $("head", document.body) // возвращает null, потому что body не содержит элементов head

Функция $$() аналогична $() , но возвращает все найденные элементы:

$$("script") // возвращает все элементы script $$("script", document.body) // возвращает все элементы script, содержащиеся в body

Функция $x() возвращает все элементы, соответствующие выражению XPath. Вторым параметром можно передать контекст:

$x("//script") // возвращает все элементы script $x("script", document.body); // возвращает все элементы script, содержащиеся непосредственно в body

Многие JavaScript фреймворки определяют свою функцию $() , в связи с чем значение функций в консоли также меняется.

$0 — $4

Консоль хранит в памяти ссылки на последние пять элементов, выделенных во вкладке Элементов (Elements). Для доступа к ним используются переменные $0 , $1 , $2 , $3 и $4 . $0 хранит ссылку на текущий выделенный элемент, $1 — на предыдущий и так далее.

$_

Переменная $_ хранит результат отработки последней команды в консоли. Это позволяет использовать результат выполнения одной команды в другой команде. Попробуйте выполнить эти команды по очереди:

1337 / 42; console.log("%d", $_);

inspect()

Функция inspect() открывает переданный объект или элемент на соответствующей ему вкладке:

Inspect($("head script")) // откроет вкладку Elements и выделит первый тег script найденный внутри head

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

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

В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.

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

Шаг 1: Воспроизведите баг

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

Чтобы самому проделать действия из этого туториала, сделайте следующее:

• Вот веб-страница , с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
• Введите число 5 в поле «Number 1»;
• Введите число 1 в поле «Number 2»;
• Кликните на кнопку «Add»;
• Посмотрите, вам говорят, что 5+1=51;

Упс, очевидно, что это неверно. Результатом должно быть число 6, эту ошибку и нужно исправлять.

Шаг 2: Приостановите выполнение с помощью точки останова

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

• Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
• Перейдите к вкладке «Sources»;
• Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
• Поставьте флажок в ячейке «click»;

• Вернувшись к странице, снова прибавьте «Number 1» и «Number 2». DevTools приостановит демонстрацию и выделит строку кода на панели «Sources». DevTools выделит эту строку кода:
  

  function onClick() {

  function onClick () {

  
  Почему так происходит?

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

  Шаг 3: Выполните пошаговую отладку

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

  • На панели «Sources» нажмите «Step into next function call button»

  Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

  if (inputsAreEmpty()) {

  if (inputsAreEmpty () ) {

  • Теперь нажмите кнопку «Step over next function call button»;

  Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

  Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.

  Шаг 4: Выберите другую точку останова

  Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:

  • Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
    

    label.textContent = addend1 + " + " + addend2 + " = " + sum;

    label . textContent = addend1 + " + " + addend2 + " = " + sum ;

  • Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
  • Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
  • Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.

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

  Шаг 5: Проверьте значения переменных

  Распространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.

  Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:

  • На панели «Sources» выберите вкладку «Watch»;
  • Затем нажмите «Add Expression»;
  • Введите typeof sum;
  • Нажмите enter. DevTools покажет typeof sum: «string». Это значение является результатом Watch Expression.

  

  Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.

  Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:

  
  

  Шаг 6: Внесите исправления

  Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:

  • В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
  • Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
  • Нажмите «Deactivate breakpoints»

  Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.

  • Нажмите «Resume script execution».

  Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!

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

  Мы составили список из 14 подсказок для отладки , о которых Вы могли не знать, но которые могут помочь Вам отладить JavaScript код.

  Большинство из этих подсказок для Chrome и Firefox, хотя, большинство из них работает и в средствах разработки для других браузеров.

  1. ‘debugger;’

  После console.log , ‘debugger; ‘ мой любимый быстрый и «грязный» инструмент для отладки. Как только Вы добавляете его в свой код, Chrome автоматически останавливает выполнение кода в этой точке. Вы можете даже обернуть его в условие, чтобы он срабатывал только тогда, когда Вам это необходимо.

  If (thisThing) { debugger; }

  2. Отображение объектов в виде таблиц

  Иногда у Вас есть сложный набор объектов, которые Вы хотите просмотреть. Вы можете использовать console.log для их отображения, а потом пролистывать огромный список, или использовать console.table . Так намного легче понять, с чем Вы имеете дело.

  Var animals = [ { animal: "Horse", name: "Henry", age: 43 }, { animal: "Dog", name: "Fred", age: 13 }, { animal: "Cat", name: "Frodo", age: 18 } ]; console.table(animals);

  3. Попробуйте посмотреть на разных разрешениях

  Было бы потрясающе, если бы на Вашем столе было любое мобильное устройство, однако в реальном мире это невозможно. Как изменить размер окна просмотра? Chrome предоставляет Вам все необходимое. Перейдите в инструменты разработчика, а затем нажмите кнопку «Режим переключения устройства». Посмотрите, как ваши медиа-выражения оживают!

  

  4. Быстрый поиск DOM-элементов

  Выберите DOM-элемент на панели элементов, а затем обращайтесь к нему в консоли. Инструменты разработчика в Chrome запоминают последние пять элементов: последний выбранный элемент $0, предпоследний выбранный элемент $1, и т.д.

  Если Вы выбирали следующие элементы в порядке ‘item-4’, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’, то Вы можете получить доступ к DOM-элементам, как показано в консоли:

  

  5. Замер времени выполнения кода с помощью console.time() и console.timeEnd()

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

  Console.time("Timer1"); var items = ; for(var i = 0; i < 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

  Этот код выдаст следующий результат:

  

  6. Получение стек-трейса для функции

  Вероятно Вы знаете, что в JavaScript-фреймворках очень много кода.

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

  Поскольку JavaScript не является сильно структурированным языком, иногда бывает полезно получить информацию о том, что и когда произошло. В этот момент на сцену выходит console.trace .

  Представьте, что Вы хотите увидеть весь стек вызовов для функции funcZ в экземпляре car на 33 строке.

  Var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’) } } func1(); var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’); } } func1();

  

  Теперь мы видим, что func1 вызывает func2 , которая вызывает func4 . Func4 создает экземпляр Car , а затем вызывает функцию car.funcX , и т.д.

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

  7. Форматирование минифицированного кода

  Иногда Вы можете столкнуться с проблемой прямо на продакшене, а ваших сурс-мапов нет на сервере. Ничего страшного . Chrome может отформатировать Ваши JavaScript-файлы, приведя их в более читаемый формат. Конечно, код будет не так информативен, как исходный код, но, по крайней мере, Вы можете понять что в нем происходит. Нажмите кнопку {} « Pretty Print «, расположенную под просмотрщиком кода в инспекторе.

  

  8. Быстрая отладка функции

  Предположим, Вы хотите добавить точку останова для функции.

  Есть два самых распространенных способа это сделать:

  1. Найти нужную строку в инпекторе и добавить точку останова
  2. Добавить debugger в Ваш скрипт

  Оба этих решения требуют поиска нужного файла и нужной строки, которую Вы хотите отладить.

  Использование консоли для этой цели, вероятно, менее распространено. Используйте debug(funcName) в консоли, и скрипт приостановит свое выполнение, когда достигнет нужной функции.

  Это очень быстрый способ, однако он не работает на закрытых и анонимных функциях. Но если у Вас другая ситуация, то это, вероятно, самый быстрый способ отладить функцию. (Прим. авт.: есть функция console.debug , которая нужна для другого.)

  Var func1 = function() { func2(); }; var Car = function() { this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car();

  
  

  9. Скрипты, не требующие отладки

  10. Найдите важные вещи с помощью более сложных способов отладки

  При более сложных сценариях отладки может потребоваться вывести много строк. Одним из способов структурирования выводимых данных является использования различных функций console. Например, console.log, console.debug, console.warn, console.info, console.error, и т.д. Затем Вы можете отфильтровать их в инспекторе. Но иногда это не совсем то, что Вам нужно при отладке. Теперь Вы можете проявить творческий подход, и создавать собственные форматы вывода данных в консоли с помощью CSS.

  Console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); } console.todo(“This is something that’ s need to be fixed”); console.important(‘This is an important message’);

  
  

  11. Отслеживайте вызовы функций и ее аргументы.

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

  Var func1 = function(x, y, z) { //.... };

  Это отличный способ увидеть, с какими аргументами вызывается функция. Но я должен сказать, что было бы неплохо, если бы консоль могла определить, сколько аргументов ожидать. В приведенном выше примере func1 ожидает три аргумента, но передается только два. Если это не обрабатывается в коде, то это может привести к ошибке.

  

  12. Быстрый доступ к элементам в консоли

  Более быстрый способ использовать querySelector в консоли — это использовать $. $(‘css-селектор’) — вернет первый подходящий элемент, а $$(‘css-селектор’) — вернет все подходящие элементы. Если Вы используете элемент больше одного раза, можно сохранить его в переменную.

  

  13. Postman великолепен (но Firefox быстрее)

  Многие разработчики, используют Postman для тестирования AJAX-запросов.

  Иногда, для этих целей проще использовать браузер.

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

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

  Ниже я привел пример запроса, который был отправлен несколько раз с разными параметрами:

  14. Точка останова в момент изменения DOM-элемента

  DOM может быть забавным. Иногда, элементы в нем меняются по непонятной для Вас причине. Однако, когда Вам нужно отлаживать JavaScript, Chrome позволяет Вам приостановить выполнение кода, при изменении DOM-элемента. Щелкните правой кнопкой мыши по интересующему элементу в инспекторе, и выберите условие остановки выполнения.