Использование консоли Google Chrome
Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:
- в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
- оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.
В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.
- Базовые операции
- Открытие консоли
- Очистка консоли
- Настройки консоли
- Вывод в консоль
- Ошибки и предупреждения
- Проверки
- Фильтрация вывода в консоли
- Группирование вывода
- Замена строк и их форматирование
- Представление DOM-элементов как JavaScript-объекты
- Стилизация вывода консоли с помощью CSS
- Измерение временных затрат
- Корреляция с панелью Timeline
- Создание точек останова
- Выполнение выражений
- Выделение элементов
- Инспектирование DOM-элементов и JavaScript объектов
- Доступ к недавним элементам или объектам
- Отслеживание событий
- Контроль за CPU-профайлером
Базовые операции
Открытие консоли
Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.
Для того, чтобы открыть вкладку Console вы можете:
- использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
- выбрать пункт меню View > Developer > JavaScript Console.
Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.
Очистка консоли
Для очистки консоли:
- через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
- Введите clear() — команду из Command Line API в консоли.
- Вызовите console.clear() (команду из Console API) из скрипта.
- Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).
По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).
Настройки консоли
Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:
- Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
- Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.
Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.
Использование API консоли
Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.
Вывод в консоль
Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:
var a = document.createElement('p'); a.appendChild(document.createTextNode('foo')); a.appendChild(document.createTextNode('bar')); console.log("Количество дочерних элементов: " + a.childNodes.length);
Вместо того, чтобы конкатенировать параметры функции с помощью оператора + (как показано выше), вы можете ввести каждый параметр друг за другом через запятую и их значения будут выведены в одну строку, разделённые пробелом.
console.log("Количество дочерних элементов: ", a.childNodes.length, "; текущее время: ", Date.now() );
Ошибки и предупреждения
Метод console.error() выводит красную иконку рядом с сообщением красного цвета.
function connectToServer( ) < console.error("Ошибка: %s (%i)", "Сервер не отвечает",500); > connectToServer();
Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.
if(a.childNodes.length < 3 ) < console.warn('Внимание! Слишком мало дочерних элементов (%d)', a.childNodes.length); >
Проверки
Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.
console.assert(list.childNodes.length < 500, "Количество дочерних элементов >500");
Фильтрация вывода в консоли
Вы можете быстро фильтровать сообщения в консоли по их типу (уровню) — ошибки, предупреждения и стандартный лог — выбрав один из доступных опций внизу консоли:
- All — без фильтрации.
- Errors — сообщения console.error() .
- Warnings — сообщения console.warn() .
- Logs — сообщения console.log() , console.info() и console.debug() .
- Debug — сообщения console.timeEnd() и остальных функций консольного вывода.
Группирование вывода
Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().
var user = "Вася Пупкин", authenticated = false; console.group("Этап аутентификации"); console.log("Аутентификация пользователя '%s'", user); // Код авторизации… if (!authenticated) < console.log("Пользователь '%s' не был аутентифицирован.", user) > console.groupEnd();
Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.
var user = "Вася Пупкин", authenticated = true, authorized = true; // Внешняя группа console.group("Аутентификация пользователя '%s'", user); if (authenticated) < console.log("Пользователь '%s' был аутентифицирован.", user) // Начало вложенной группы console.group("Авторизация пользователя '%s'", user); if (authorized) < console.log("Пользователь '%s' был авторизован.", user) > // Конец вложенной группы console.groupEnd(); > // Конец внешней группы console.groupEnd(); console.log("Обычный вывод без групп.");
Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :
console.groupCollapsed("Аутентификация пользователя '%s'", user); if (authenticated) < //… >
Замена строк и их форматирование
Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.
В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.
console.log("%s купил %d бочонков мёда", "Саша", "100");Результатом будет «Саша купил 100 бочонков мёда».
Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:
Модификатор форматирования Описание %s Форматирует значение как строку. %d или %i Форматирует значение как целое число (decimal и integer). %f Форматирует объект как число с плавающей точкой. %o Форматирует значение как DOM-элемент (также как в панели Elements). %O Форматирует значение как JavaScript-объект. %c Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке. В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.
console.log("Количество дочерних элементов: %d; текущее время: %f", a.childNodes.length, Date.now() );Представление DOM-элементов как JavaScript-объекты
По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:
console.log(document.body.firstElementChild);
Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :
console.dir(document.body.firstElementChild);
Точно также вы можете использовать модификатор вывода %0 в методе console.log() :
console.log("%O", document.body.firstElementChild);Стилизация вывода консоли с помощью CSS
Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.
console.log("%cЭта надпись будет отформатирована крупным голубым текстом", "color: blue; font-size: x-large");
Измерение временных затрат
Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.
console.time("Инициализация массива"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) < array[i] = new Object(); >; console.timeEnd("Инициализация массива");
Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.
Корреляция с панелью Timeline
Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.
Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.
В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)
function AddResult(name, result) < console.timeStamp("Добавление результатов"); var text = name + ': ' + result; var results = document.getElementById("results"); results.innerHTML += (text + "
"); >Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:
- жёлтая вертикальная линия в панели Timeline.
- Запись добавлена в список записанных событий.
Создание точек останова
Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :
function brightness( ) < debugger; var r = Math.floor(this.red*255); var g = Math.floor(this.green*255); var b = Math.floor(this.blue*255); return (r * 77 + g * 150 + b * 29) >> 8; >
Использование Command Line API
Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:
- удобные функции для выделения DOM-элементов.
- Методы управления CPU-профайлером.
- Псевдонимы для некоторых методов Console API.
- Отслеживание событий.
- Просмотр обработчиков событий объекта.
Выполнение выражений
Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.
Для того, чтобы вводить многострочные JavaScript-выражения, используйте сочетание клавиш Shift+Enter для перевода строки.
Выделение элементов
Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».
$('#loginBtn');
Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:
$$('button.loginBtn');
И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы , являющиеся дочерними по отношению к элементу :
$x('/html/body/script');Инспектирование DOM-элементов и объектов
Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.
Доступ к недавно вызванным DOM-элементам или объектам
Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.
Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.
Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:
Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»
Отслеживание событий
Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.
monitorEvents(window, "resize");
Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body :
monitorEvents(document.body, ["mousedown", "mouseup"]);Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.
monitorEvents($('#scrollBar'), "touch");Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.
Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.
unmonitorEvents(window);Контроль за CPU-профайлером
С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.
Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:
Новый профиль появляется в панели Profiles с именем Profile 1:
Если вы обозначите имя для нового профиля, то оно будет использоваться в качестве его заголовка. Если вы создаете множество профилей с одинаковыми именами, то они группируются под одним заголовком:
Результат в панели Profiles:
Профили CPU могут быть вложенными, например:
profile("A");profile("B");profileEnd("B")profileEnd("A")Вызовы методов остановки и запуска профилирования не обязательно должны быть корректно вложены друг в друга. Например, этот пример будет работать так же, как и предыдущий:
profile("A");profile("B"); profileEnd("A");profileEnd("B");Консоль разработчика
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
- В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
- Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.
Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .
Многострочный ввод
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.
Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.
Итого
- Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).
Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.
Как запустить консоль (панель разработчика) в большинстве браузеров.
Консоль (панель разработчика) в браузере – это удобное средство, которое позволяет просматривать ошибки, которые возникли при загрузке страницы и взаимодействовать с этой страницей с помощью специальных команд.
Выглядит это примерно так:
Консоль очень помогает устранять ошибки при верстке сайтов, неполадки в работе скриптов на странице, выводит сводную информацию обо всем, что происходит на странице и может сэкономить вам кучу времени при веб-разработке.
Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»
Первый шаг в том, чтобы начать использовать консоль в свое работе, нужно научиться ее запускать. В разных браузерах это может делаться по разному.
Чаще всего, в Windows — это будет комбинация клавиш:
Ctrl + Shift + I
Для компьютеров на Mac OS подобная комбинация выглядит следующим образом:
⌥ + ⌘ + I (или Shift + Cmd + I)
Эта комбинация клавиш должна работать и для браузера Opera
И в браузере Firefox
Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.
Нужно просто запомнить эти комбинации клавиш.
Если у вас какой-то особенный браузер и эта комбинация не помогает, посмотрите в главном меню, может быть получиться запустить эту панель от туда или можно посмотреть информацию в документации.
Для тех, кто хочет посмотреть как эта панель помогает на практике, в веб-разработке, посмотрите этот курс «Консоль браузера. Эффективная работа.»
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Консоль браузера | Browser console
Некоторые тесты требуют открытия консоли. Веб-консоль является частью инструментов разработчика, предоставляемых вашим браузером. Он показывает информацию об обработке ошибок, которая была реализована самими разработчиками веб-сайта, или информацию, собранную вашим браузером, если проблема связана, например, с JavaScript. Это поможет клиенту — особенно разработчикам — определить, какая проблема вызывает ошибку.
Как открыть консоль, шаг за шагом будет объяснено для разных браузеров и операционных систем в следующей статье. Обратите внимание, что многие из шагов по настройке вашей системы должны быть выполнены только один раз, и что каждое последующее использование потребует меньше шагов.
Chrome на компьютерах
- Откройте веб-сайт для тестирования.
- Нажмите Ctrl + Shift + J (Windows)или Cmd + Opt + J (Mac).
Если вы хотите изменить местоположение наложения инструментов разработчика, нажмите кнопку «три точки» в правом верхнем углу наложения. Там вы можете выбрать вид «Причала»:
Chrome на Android
Невозможно отобразить консоль на самом мобильном устройстве, но ее можно отобразить на подключенном компьютере. Для этого необходимо включить параметры разработчика на вашем устройстве Android. Если это уже сделано, вы можете перейти к части 3 ниже.
Часть 1. Включите «Параметры разработчика» на вашем устройстве Android
• Для Android 4.1 и ниже опции разработчика включены по умолчанию.
Часть 2. Подготовка Chrome на вашем компьютере
- Откройте Google Chrome.
- Откройте окно инструментов разработчика(Ctrl + Shift + Jв Windows, Cmd + Opt + Jв Mac или с помощью кнопки с тремя точками в правом верхнем углу> Дополнительные инструменты> Инструменты разработчика).
- Нажмите на кнопку с тремя точками в правом верхнем углу окна инструментов разработчика.
- Выберите Дополнительные инструменты>Удаленные устройства(см. Первый снимок экрана ниже)> Новый вид меню открывается в нижней части окна инструментов разработчика.
- Если еще не выбран, откройтеНастройки.
- Убедитесь, что опция «Обнаружить USB-устройства» включена (см. Второй снимок экрана ниже).
Часть 3. Включите «Отладку по USB» в разделе «Параметры разработчика» на устройстве Android.
После начальной настройки этот шаг, к сожалению, необходимо выполнить на большинстве устройств снова, потому что настройка отладки USB сбрасывается после каждого перезапуска.
- Откройте приложение «Настройки»на устройстве Android.
- Для Android 8 и выше: выберите Система.
- Выберите «Параметры разработчика»(см. Скриншот ниже).
- Установите переключатель в положение «Включить отладку по USB», чтобы включить его.
Часть 4. Подключение Chrome на вашем компьютере к вашему устройству Android
1. Откройте Google Chrome на вашем компьютере.
2. Откройте инструменты разработчика (Ctrl + Shift + J в Windows или Cmd + Opt + J в Mac).
3. Нажмите на три точки в правом верхнем углу.
4. Выберите Дополнительные инструменты > Удаленные устройства (см. Первый снимок экрана ниже)> Новая маска откроется в нижней части окна инструментов разработчика.
5. Подключите устройство Android к компьютеру через USB-кабель.
6.Если отображается красная точка, а ваше устройство отображается как Неизвестное устройство, примите приглашение Разрешить отладку по USB на вашем устройстве Android. Зеленая точка означает, что все работает (см. Второй скриншот ниже).
7. Если устройство не обнаружено, это помогает отключить и снова подключить телефон и компьютер снова. Если это не поможет, вы можете найти советы по устранению неполадок в этом сообщении на форуме разработчиков Google.
Часть 5. Начать тестирование
- Откройте Google Chrome на устройстве Android и откройте веб-сайт, который вы хотите протестировать.
- На вашем компьютере щелкните вкладку с именем / моделью вашего устройства Android> Каждая вкладка, открытая в Chrome на вашем устройстве Android, будет отображена в списке.
- Нажмите «Проверить»рядом с веб-сайтом, который вы хотите протестировать.> Откроется новое окно, отображающее ваше зеркальное устройство Android и инструменты разработчика.
- Убедитесь, что вкладка Консольоткрыта в окне инструментов разработчика.
- Начните тестирование (скринкасты могут быть легко записаны на вашем компьютере).
Firefox на компьютерах
Эти ярлыки обеспечивают активацию вкладки «Консоль» в верхней части наложения инструментов разработчика. Если вы открываете его с помощью другого ярлыка или с помощью Inspect из контекстного меню, вам необходимо вручную открыть вкладку Console .
Если вы хотите изменить местоположение наложения инструментов разработчика, нажмите кнопку «три точки» в правом верхнем углу наложения. Там вы можете выбрать предпочитаемый вид.
Firefox на Android через USB
Невозможно отобразить консоль на самом мобильном устройстве, но ее можно отобразить на подключенном компьютере. Для этого некоторые настройки на вашем Android-устройстве и компьютере необходимо выполнить один раз. Если вы уже сделали их, вы можете продолжить с части 4.
Примечание. Эти инструкции работают только при использовании Firefox 36 и выше на вашем компьютере и Firefox 35 и выше на вашем Android-устройстве.
Часть 1: Подготовьте Firefox на вашем компьютере
- Откройте Mozilla Firefox (по крайней мере, версия 36) на вашем компьютере.
- Откройте Инструменты разработчика(Ctrl + Shift + Kили F12в Windows или Cmd + Opt + Kв Mac).
- Нажмите кнопку с тремя точками в правом верхнем углу наложения инструментов разработчика и выберите «Настройки» или нажмите «F1»в Windows.
- В разделе «Дополнительные настройки»установите флажок «Включить удаленную отладку».
- Закройте инструменты разработчика.
- Нажмите на кнопку три полосы в верхней правой части окна Firefox и выберите Web Developer>WebIDE, либо нажмите Shift + F8на Windows> открывается WebIDE.
- В разделе «USB-устройства»справа нажмите «Установить расширение ADB» (см. Первый снимок экрана ниже).
- Нажмите «Установить»на следующем экране (см. Второй скриншот ниже).
- Ваше устройство будет отображаться в разделе «Устройства USB»справа (см. Третий снимок экрана ниже).
Часть 2. Включите «Параметры разработчика» на вашем устройстве Android
• Для Android 4.1 и ниже опции разработчика включены по умолчанию.
Часть 3. Подготовьте Firefox на вашем Android-устройстве.
- Откройте Mozilla Firefox (по крайней мере, версия 35) на вашем Android-устройстве.
- Откройте меню в правом верхнем углу и выберите «Настройки»>«Дополнительно».
- Прокрутите вниз до раздела «Инструменты разработчика»и включите удаленную отладку по USB >. Может появиться подсказка о том, что вам нужно настроить переадресацию портов, но вы можете ее проигнорировать.
Часть 4. Подключите Firefox со своего компьютера к устройству Android.
1.Откройте Mozilla Firefox (по крайней мере, версия 36) на вашем компьютере.
2. Подключите устройство Android к компьютеру через USB-кабель.
3. Откройте меню и выберите Веб-разработчик > WebIDE > WebIDE откроется в новом окне.
4. На правой боковой панели под устройствами USB выберите ваше устройство Android> На вашем устройстве Android появится предупреждение.
5. Примите это предупреждение на устройстве Android с помощью OK.
6. Если у вас возникли проблемы с подключением вашего устройства, загляните в это сообщение на форуме разработчиков Mozilla .
Часть 5. Начало тестирования
1. Откройте Mozilla Firefox на вашем Android-устройстве и откройте веб-сайт, который вы хотите протестировать> Каждая открытая вкладка Firefox будет указана в пункте меню «Вкладки» на левой боковой панели.
2. Выберите вкладку веб-сайта, который вы собираетесь тестировать> Заголовок и URL-адрес веб-сайта отображаются в середине окна WebIDE.
3. Убедитесь, что вкладка Консоль открыта в окне инструментов разработчика.
4. Начать тестирование.
Firefox на Android через Wi-Fi
Невозможно отобразить консоль на самом мобильном устройстве, но ее можно отобразить на подключенном компьютере. Для этого некоторые настройки на вашем Android-устройстве и компьютере необходимо выполнить один раз. Если вы уже сделали их, вы можете продолжить с части 2.
Эти инструкции работают только при использовании Firefox 42 и выше на вашем компьютере и устройстве Android.
Часть 1. Подготовка Firefox на вашем Android-устройстве.
• Требуется сканер штрих-кода — установите его, если у вас его нет на устройстве Android.
Сделайте следующее:
- Откройте Mozilla Firefox (по крайней мере, версия 42) на вашем Android-устройстве.
- Откройте меню в правом верхнем углу и выберите «Настройки»>«Дополнительно».
- Прокрутите вниз до раздела инструментов разработчикаи включите удаленную отладку по WiFi.
Часть 2. Подключите Firefox на вашем компьютере с вашим устройством Android
1. Откройте Mozilla Firefox (по крайней мере, версия 42) на вашем компьютере.
2. Откройте меню и выберите Веб-разработчик > WebIDE > WebIDE откроется в новом окне.
3. На правой боковой панели под устройствами WiFi выберите ваше устройство Android> QR-код отображается в окне WebIDE, и на вашем Android-устройстве отображается предупреждение.
4. Нажмите на Scan или Scan and remember.
5. Сканирование QR-кода> QR-код исчезает, и значок устройства станет синим, что означает «подключен».
6. Если у вас возникли проблемы с подключением вашего устройства, загляните в это сообщение на форуме разработчиков Mozilla .
Часть 3. Начало тестирования
1. Откройте Mozilla Firefox на вашем Android-устройстве и откройте веб-сайт, который вы хотите протестировать> Каждая открытая вкладка Firefox будет указана в пункте меню «Вкладки» на левой боковой панели.
2. Выберите вкладку веб-сайта, который вы собираетесь тестировать> Заголовок и URL-адрес веб-сайта отображаются в середине окна WebIDE.
3. Убедитесь, что вкладка Консоль открыта в окне инструментов разработчика.
4. Начать тестирование.
Edge на компьютерах
- Откройте веб-сайт для тестирования.
- Нажмите F12 или щелкните правой кнопкой мыши и выберите «Проверить элемент».
- Переключитесь на вкладку Console.
К сожалению, в Edge нет ярлыка для непосредственного открытия консоли, поэтому убедитесь, что вы выбрали нужную вкладку вручную.
Если вы хотите изменить расположение оверлея инструментов разработчика, нажмите третью кнопку справа (квадрат с белой частью справа) рядом с кнопкой закрытия оверлея. Вы можете переключаться между стыковкой оверлея с нижней или правой кромкой экрана.
Internet Explorer 11 на компьютерах
- Откройте веб-сайт для тестирования.
- Нажмите F12 , или в качестве альтернативы щелкните правой кнопкой мыши и выберите Проверить элемент(см. первый скриншот ниже).
- Переключитесь на вкладку Console(см. Второй скриншот ниже).
К сожалению, в IE 11 нет ярлыка для прямого открытия консоли, поэтому убедитесь, что вы вручную выбрали нужную вкладку.