Как открыть инструмент разработчика на телефоне
Спасибо! Ваши отзывы помогают другим пользователям находить самую полезную информацию.
*Мы сожалеем, что это не было полезным для вас. Можем ли мы что-то улучшить? Введите здесь свой комментарий.
Устройства
- Общие сведения о компании
- ESG
- Инвестирование
- Политика конфиденциальности
- Безопасность продуктов
- Вакансии
© 2011-2023 HTC Corporation
Консоль браузера | 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 нет ярлыка для прямого открытия консоли, поэтому убедитесь, что вы вручную выбрали нужную вкладку.
Как включить режим разработчика в Google Chrome на Android

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

Откройте меню, нажав на три точки в правом верхнем углу.

В открывшемся меню выберите пункт «Настройки».

Прокрутите меню настроек в самый низ и нажмите на опцию «О браузере Chrome».

Нажмите на «Версия приложения» 7 раз пока не увидите всплывающее сообщение «Developer options are now enabled.».

Вернитесь в настройки и Вы увидите новый пункт «Developer options».

В данный момент в этом меню только одна опция «Tracing».

В трассировке доступны три раздела:
- Default categories: содержит 117 опций, и все они включены по умолчанию.
- Disabled-by-default categories: содержит 71 опцию, и все по умолчанию выключены.
- Tracing mode: по умолчанию для этого параметра установлено значение «Record until full». Вы можете изменить значение на «Record until full (large buffer)» или «Record continuously»

Вы также можете нажать на кнопку «Record trace», но учтите предупреждение: «Трассировки могут содержать данные пользователя или сайта, связанные с активным сеансом просмотра, включая вкладки инкогнито».
Если Вы нажмете кнопку «Record trace», Chrome начнет записывать трассировку, и на панели уведомлений будет отображаться уведомление о том, что трассировка Chrome записывается. Вы можете нажать на уведомление и нажать «Stop recording», чтобы остановить запись трассировки. В уведомлении будет отображаться ссылка «Share Trace», чтобы поделиться трассировкой с другими.
Как открыть инструмент разработчика на телефоне

В этой статье рассмотрим, какие инструменты предоставляют режимы разработчика на Android и iOS и чем они могут быть полезны во время тестирования. Материал подготовил Илья Прудников, участник программы бета-тестирования VK Testers.
Это возможность открыть новые функции в смартфоне
По умолчанию они скрыты от обычных пользователей, но разблокировав их, ты сможешь изменять параметры телефона, войти в инструменты для отладки и диагностики устройства.
Что это за режимы такие?
В операционных системах Android и iOS существует так называемый режим разработчика, по умолчанию скрытый от глаз простого пользователя. Однако разблокировать режимы несложно.
Доступ к ним даёт возможность использовать различные инструменты, полезные и для тестировщиков. Во время тестирования важно не только найти визуальные баги, но и подойти к делу с технической стороны, ведь могут встречаться проблемы производительности или краши. Для изучения таких багов необходима дополнительная информация, которую и можно получить при помощи описанных нами режимов.
В этом разделе говорим исключительно про Android
Разбираемся, как включить режим разработчика и какие из инструментов самые полезные для тестировщиков.
Режим разработчика Android
Разблокировка режима
Наверняка многие знают, как открыть панель «Для разработчиков» на Android. В этом нет ничего сложного, однако повторим:
Открываем «Настройки» — «Сведения о телефоне» («Об устройстве») — «Сведения о ПО» — «Номер сборки».
Нажимаем на строку «Номер сборки» несколько раз (в моём случае семь). Если система запрашивает пароль от устройства, вводим его.
Возвращаемся в «Настройки», открываем настройки системы и наблюдаем новую панель «Для разработчиков».

Открыв её, мы можем увидеть, что Android предоставляет довольно много инструментов. Разберём по порядку те, что могли бы нас заинтересовать.
Мониторинг памяти
Очень простой и понятный раздел, позволяющий мониторить использование памяти за определённый промежуток времени. Здесь мы можем подробно рассмотреть, сколько оперативной памяти использует в среднем каждое запущенное приложение, и максимальное количество использованной памяти.

Отладка по USB
Отладка — один из самых главных инструментов режима разработчика, позволяющий напрямую подключать устройство к компьютеру. Благодаря этому перед нами открываются дополнительные инструменты, которые можно взять на вооружение — например, ADB и дебаг WebView.
Отрисовка касаний
Мало найти баг, его нужно ещё и грамотно зарепортить. Часто приходится прикреплять к отчёту записи экрана, и будет нелишним показывать на записи места ваших касаний, так как не всегда понятно, что именно вы делаете. Чтобы детально отобразить все ваши касания, переведите свитчи «Показывать нажатия» и «Место касания» в рабочее состояние. Теперь будут показываться все ваши касания — и тапы, и свайпы.
Затронем тему UI
Тестирование пользовательского интерфейса — настолько же важная часть работы, как и любая другая. Приложение должно выглядеть хорошо на всех устройствах, интерфейс должен уметь адаптироваться под разные экраны.
Чтобы научить устройство показывать нам подробности всех элементов интерфейса, достаточно перевести свитч параметра «Показывать границы элементов» в рабочее состояние. Теперь мы можем видеть, как отображаются все элементы: видно размеры, отступы, границы. Это может быть полезным во время тестирования. К примеру, так можно отслеживать область элементов и выявить, что функция клика кнопки будет работать за её визуальной частью.
Ещё одна классная функция — изменение минимальной ширины устройства. Чтобы посмотреть, как приложение отображает какой-то элемент интерфейса на более маленьком или большом экране, можно изменить параметры ширины устройства. Например, 320 dp — совсем небольшой экран, сравнимый с iPhone 5, а значение, примерно равное 360–400 dp — это уже современное устройство с довольно крупным экраном.
Но это не значит, что теперь можно просто поменять значение параметра и протестировать весь интерфейс приложения: с этим могут возникнуть проблемы. А вот для того чтобы посмотреть, как выглядит какой-нибудь элемент — например, не заходит ли за край экрана, правильно ли переносится на другую строку, — сойдёт.
В этом же разделе можно изменить скорость анимации в системе. Например, замедлить её, чтобы рассмотреть более детально.