Инструменты разработчика – Google Chrome

13 или более поздней.
Скачать стабильную версию Chrome

Скачать стабильную версию Chrome

Установить Google Chrome в качестве браузера по умолчанию

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Установить Google Chrome в качестве браузера по умолчанию

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Установить Google Chrome в качестве браузера по умолчанию

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Установить Google Chrome в качестве браузера по умолчанию

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Установить Google Chrome в качестве браузера по умолчанию

Разрешить автоматическую отправку статистики использования и отчетов о сбоях, чтобы помочь улучшить Google Chrome. Подробнее…

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Скачивая Chrome, вы принимаете Условия использования Google и Дополнительные условия использования Chrome и ChromeOS.

Chrome DevTools: что это — инструменты разработчика (тестировщика)

Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.

Как начать работу с DevTools

Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:

  1. Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
  2. В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
  3. Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».
Как выглядит режим разработчика в Google Chrome

Какие вкладки есть в DevTools

Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.

Пример, как можно редактировать HTML в DevTools

Console. Консоль позволяет смотреть вывод JavaScript, а также исполнять свой код для тестирования и отладки страницы. Если на открытой странице не подгрузились какие-либо данные, например стили, шрифты или картинки, здесь отобразятся соответствующие ошибки с подробным описанием. Также в консоль можно ввести команду на языке JavaScript, и она выполнится.

Вкладка Console отображает все ошибки при загрузке страницы

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

Отладка кода

Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.

Данные для анализа загрузки элементов

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

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

DevTools предлагает большое количество инструментов для анализа производительности

Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:

  • Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
  • Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
  • Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.
Выбор необходимого профайлера в Memory

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

Инструмент для очистки DevTools

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

Security позволяет оценить безопасность текущей страницы

Lighthouse. На этой вкладке можно проверить производительность сайта.

  • Performance. Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей.
  • Progressive Web App. Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ошибку 200.
  • Best Practices. Помогает проверить безопасность сайта и узнать, применяются ли современные стандарты веб-разработки. На показатель влияет использование устаревших API, HTTPS, корректность кодировки и многое другое.
  • Accessibility. Позволяет узнать, насколько удобен сайт, как воспринимается контент и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
  • SEO. Позволяет понять, насколько соблюдаются рекомендации Google по оптимизации сайта. На показатель влияют использование метатегов, наличие alt у изображений, адаптивная верстка и пр.
Пример анализа Lighthouse

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Основные инструменты и как их использовать

Поиск нужного DOM-элемента. На панели Elements находится полное DOM-дерево, которое можно просмотреть и изменить. Найти конкретный элемент можно двумя способами.

1. Выбор элемента на странице

Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.

2. Использование функции поиска HTML-компонента

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

Пример поиска DOM-элемента

Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.

Изменение текста в HTML

Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.

Пример отключения форматирования шрифта путем нажатия на чекбокс

Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.

Пример работы Coverage

Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.

Необходимо не только найти строку с нужным кодом, но и выбрать сам ресурсРасположение иконки с фигурными скобкамиПример того, как выглядит структурированный код

Просмотр внешнего вида сайта на разных устройствах. В режиме разработчика Google Chrome можно посмотреть, как выглядит текущая страница практически на любом устройстве. Сделать это можно комбинацией клавиш Ctrl + Shift + M для Windows и Linux и cmd + Shift + M для macOS. Также можно кликнуть на значок телефона в левом верхнем углу консоли. Теперь можно выбрать абсолютно любое разрешение или конкретное устройство из списка Dimensions. Также инструмент позволяет посмотреть, как будет отображаться страница при разной скорости интернета.

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

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

Fatal error: Allowed memory size of 2147483648 bytes exhausted (tried to allocate 13732440 bytes) in /var/www/u1306671/data/www/blog.skillfactory.ru/wp-includes/class-wpdb.php on line 2432

WordPress › Ошибка

На сайте возникла критическая ошибка.

Узнайте больше про решение проблем с WordPress.

Chrome DevTools — Chrome Developers

Chrome DevTools — это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome.

  • Обзор

    Начните работу со встроенными инструментами веб-разработчика Google Chrome.

  • Открыть Chrome DevTools

    Все способы открытия Chrome DevTools.

  • Что нового в DevTools

    Будьте в курсе последних изменений DevTools.

  • Серия небольших видеороликов для изучения возможностей DevTools.

  • Команды и ярлыки #

    • Выполнение команд в меню команд

      Руководство о том, как открывать меню команд, выполнять команды, открывать файлы, просматривать другие действия и многое другое.

    • Отключить JavaScript

      Откройте меню команд и выполните команду Отключить JavaScript.

    • Сочетания клавиш

      Каноническая документация по сочетаниям клавиш Chrome DevTools.

  • Моделирование мобильных устройств в режиме устройства

    Используйте виртуальные устройства в режиме устройства Chrome для создания мобильных веб-сайтов.

  • Элементы #

    • DOM #

      • Начало работы с просмотром и изменением DOM
      • Просмотр свойств объектов DOM
      • Ссылка на значки
    • CSS #

      • Просмотр и изменение CSS
      • Найти недопустимый, переопределенный, неактивный и другой CSS
      • Проверка и отладка цветов HD и других цветов с помощью палитры цветов
      • Проверка макетов сетки CSS
      • Проверка и отладка макетов CSS flexbox
      • Проверка и отладка запросов контейнера CSS
      • Справочник по функциям CSS
    • 900 43
    • Консоль #

      • Обзор консоли

        Основное использование консоли Chrome DevTools — регистрация сообщений и запуск JavaScript.

      • Сообщения журнала в консоли

        Узнайте, как записывать сообщения в консоль.

      • Запуск JavaScript в консоли

        Узнайте, как запускать JavaScript в консоли.

      • Просмотр значений JavaScript в режиме реального времени с помощью Live Expressions

        Если вы обнаружите, что постоянно вводите одни и те же выражения JavaScript в консоль, попробуйте вместо этого Live Expressions.

      • Форматирование и стиль сообщений в консоли

        Узнайте, как форматировать и оформлять сообщения в консоли.

      • Описание функций консоли

        Полный справочник по всем функциям и поведению, связанным с пользовательским интерфейсом консоли в Chrome DevTools.

      • Справочник по API консоли

        Используйте API консоли для записи сообщений в консоль.

      • Справочник по API утилит консоли

        Справочник по удобным функциям, доступным в консоли Chrome DevTools.

    • Источники #

      • Обзор панели «Источники»

        Просмотр и редактирование файлов, создание сниппетов, отладка JavaScript и настройка рабочих областей на панели «Источники» Chrome DevTools.

      • Отладка JavaScript

        Узнайте, как использовать Chrome DevTools для поиска и исправления ошибок JavaScript.

      • Приостановка кода с помощью точек останова

        Узнайте обо всех способах приостановки кода в Chrome DevTools.

      • Выполнение фрагментов JavaScript

        Фрагменты — это небольшие скрипты, которые можно создавать и выполнять на панели «Источники» Chrome DevTools. Вы можете получить доступ и запустить их с любой страницы. Когда вы запускаете фрагмент, он выполняется из контекста текущей открытой страницы.

      • Отлаживайте исходный код вместо развертывания с исходными картами

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

      • Редактирование и сохранение файлов с помощью Workspaces

        Узнайте, как сохранить изменения, внесенные в DevTools, на диск.

      • Справочник по отладке JavaScript

        Откройте для себя новые рабочие процессы отладки в этом подробном справочнике по функциям отладки Chrome DevTools.

    • Сеть #

      • Проверка сетевой активности

        Учебник по самым популярным сетевым функциям в Chrome DevTools.

      • Справочник по сетевым функциям

        Полный справочник по сетевым функциям панели Chrome DevTools.

      • Просмотр ресурсов страницы

        Организация ресурсов по кадрам, доменам, типам или другим критериям.

    • Производительность #

      • Анализ производительности среды выполнения

        Узнайте, как оценить производительность среды выполнения в Chrome DevTools.

      • Справочник по функциям производительности

        Справочник по всем способам записи и анализа производительности в Chrome DevTools.

      • Ссылка на событие временной шкалы

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

    • Анализ производительности. Получите полезную информацию о производительности вашего веб-сайта.

    • Lighthouse: Оптимизируйте скорость веб-сайта

      Узнайте, как использовать Chrome DevTools, чтобы найти способы ускорить загрузку веб-сайтов.

    • Память #

      • Терминология памяти

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

      • Устранение проблем с памятью

        Узнайте, как использовать Chrome и DevTools для поиска проблем с памятью, влияющих на производительность страницы, включая утечки памяти, переполнение памяти и частые сборки мусора.

      • Запись снимков кучи

        Узнайте, как записывать снимки кучи с помощью профилировщика кучи Chrome DevTools и находить утечки памяти.

      • Как использовать инструмент профилировщика распределения

        Используйте инструмент профилировщика распределения, чтобы найти объекты, которые не удаляются должным образом сборщиком мусора, и продолжают удерживать память.

    • Приложение №

      • Отладка прогрессивных веб-приложений

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

      • Просмотр и редактирование локального хранилища

        Как просматривать и редактировать локальное хранилище с помощью панели «Локальное хранилище» и консоли.

      • Просмотр и редактирование хранилища сеансов

        Как просматривать и редактировать sessionStorage с помощью панели «Хранилище сеансов» и консоли.

      • Просмотр и изменение данных IndexedDB

        Как просматривать и изменять данные IndexedDB с помощью панели приложений и фрагментов.

      • Просмотр данных Web SQL

        Как просмотреть данные Web SQL на панели приложений Chrome DevTools.

      • Просмотр, добавление, изменение и удаление файлов cookie

        Узнайте, как просматривать, добавлять, редактировать и удалять файлы cookie HTTP страницы с помощью Chrome DevTools.

      • Просмотр данных кеша

        Как просмотреть данные кеша из панели приложений Chrome DevTools.

      • Проверка обратного/прямого кэширования

        Убедитесь, что ваши страницы оптимизированы для обратного/прямого кэширования.

      • Отладка фоновых служб

        Как отлаживать фоновую выборку, фоновую синхронизацию, уведомления, push-сообщения и просматривать отчеты с помощью Chrome DevTools.

      • Устарело: просмотр данных кэша приложений с помощью Chrome DevTools

        Как просмотреть данные кэша приложений на панели приложений Chrome DevTools.

    • Анимация: проверка и изменение эффектов анимации CSS

      Проверка и изменение анимации на вкладке «Анимация».

    • Изменения: Отслеживание изменений HTML, CSS и JavaScript

      Отслеживание изменений HTML, CSS и JavaScript.

    • Покрытие: поиск неиспользуемых JavaScript и CSS

      Как найти и проанализировать неиспользуемый код JavaScript и CSS в Chrome DevTools.

    • Ресурсы для разработчиков: просмотр и загрузка исходных карт вручную

      Используйте вкладку «Ресурсы для разработчиков», чтобы проверить, успешно ли загружаются исходные карты, и загрузите их вручную.

    • Обзор CSS: определение потенциальных улучшений CSS

      Определение потенциальных улучшений CSS с помощью панели обзора CSS.

    • Проблемы: поиск и устранение проблем

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

    • Мультимедиа: просмотр и отладка информации о медиаплеерах

      Используйте панель мультимедиа для просмотра информации и отладки медиаплееров на вкладке браузера.

    • Инспектор памяти: проверьте память ArrayBuffer, TypedArray, DataView и Wasm.

      Используйте инспектор памяти для проверки ArrayBuffer, TypedArray или DataView в JavaScript, а также WebAssembly.Memory приложений C++ Wasm.

    • Сетевые условия: переопределите строку пользовательского агента

      Откройте вкладку «Сетевые условия», отключите «Выбирать автоматически» и выберите из списка или введите пользовательскую строку.

    • Регистратор #

      • Запись, воспроизведение и измерение потоков пользователей

        Запись, воспроизведение, измерение потоков пользователей и редактирование их шагов с помощью панели «Рекордер».

      • Справочник по функциям

        Полный справочник по функциям панели Chrome DevTools Recorder.

      • Настройка регистратора с помощью расширений

        Настройка и интеграция регистратора путем установки расширений.

    • Rendering #

      • Обзор вкладки Rendering

        Откройте для себя набор параметров, влияющих на отрисовку веб-контента.

      • Обнаружение проблем с производительностью рендеринга

        Точечная перерисовка, сдвиги макета, слои и плитки, проблемы с прокруткой, просмотр статистики рендеринга и Core Web Vitals.

      • Эмулировать медиа-функции CSS

        Эмулировать предпочтительные-цветовые схемы, медиа-типы, принудительные цвета, предпочтительный-контраст, предпочтительные-уменьшенные-движения, цветовую гамму.

      • Применение других эффектов: включение автоматической темной темы, эмуляция фокуса и т. д.

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

    • Безопасность: ознакомьтесь с вопросами безопасности

      Используйте панель безопасности, чтобы убедиться, что страница полностью защищена HTTPS.

    • Поиск: поиск текста во всех загруженных ресурсах

      Поиск текста во всех загруженных ресурсах с помощью вкладки «Поиск».

    • Датчики: Эмуляция датчиков устройства

      Используйте вкладку Датчики, чтобы переопределить геолокацию, имитировать ориентацию устройства, принудительное касание и эмулировать состояние бездействия.

    • WebAuthn: Эмуляция аутентификаторов

      Эмуляция аутентификаторов и отладка WebAuthn в Chrome DevTools.

    • Удаленная отладка #

      • Удаленная отладка устройств Android

        Удаленная отладка живого контента на устройстве Android с компьютера Windows, Mac или Linux.

      • Доступ к локальным серверам

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

      • Удаленная отладка WebViews

        Отладка WebView в собственных приложениях Android с помощью инструментов разработчика Chrome.

    • Специальные возможности #

      • Справочник по специальным возможностям

        Полный справочник специальных возможностей в Chrome DevTools.

      • Сделайте свой веб-сайт более читаемым

        Найдите и исправьте низкоконтрастный текст с помощью DevTools.

      • Навигация по Chrome DevTools с помощью вспомогательных технологий

        Руководство по навигации по Chrome DevTools с помощью вспомогательных технологий, таких как программы чтения с экрана.

      • Отслеживание фокуса элемента

        Откройте консоль, создайте Live Expression и задайте для выражения значение document.activeElement.

    • Настройка DevTools

      Список способов настройки Chrome DevTools: изменение темы, размещения, порядка панелей, языка и т. д.

    • Ссылка на настройки #

      • Обзор настроек

        Обзор настроек.

      • Настройки

        Ссылка на вкладку Настройки.

      • Рабочая область

        Ссылка на вкладку рабочей области.

      • Experiments

        Ссылка на вкладку Experiments.

      • Список игнорирования

        Ссылка на вкладку «Список игнорирования».

      • Устройства

        Ссылка на вкладку Устройства.

      • Throttling

        Ссылка на вкладку Throttling.

      • Locations

        Ссылка на вкладку Locations.

      • Ярлыки

        Ссылка на вкладку «Ярлыки».

    • Узнайте, как команда создает новые функции в DevTools.

    Инструменты разработчика Google Chrome — Google Chrome


    Нажмите здесь, чтобы получить стабильную версию Chrome.


    Чтобы загрузить Chrome Dev, выполните обновление до 10.13 или более поздней версии.
    Нажмите здесь, чтобы получить стабильную версию Chrome.

    Нажмите здесь, чтобы получить стабильную версию Chrome.

    Установить Google Chrome в качестве браузера по умолчанию

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

    Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Сделать Google Chrome браузером по умолчанию

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Помогите сделать Google Chrome лучше, автоматически отправляя статистику использования и отчеты о сбоях в Google. Что такое отчеты о сбоях?

    Установить Google Chrome в качестве браузера по умолчанию

    Помогите сделать Google Chrome лучше, автоматически отправляя в Google статистику использования и отчеты о сбоях. Что такое отчеты о сбоях?

    Установить Google Chrome в качестве браузера по умолчанию

    Помогите сделать Google Chrome лучше, автоматически отправляя в Google статистику использования и отчеты о сбоях. Что такое отчеты о сбоях?

    Установить Google Chrome в качестве браузера по умолчанию

    Помогите сделать Google Chrome лучше, автоматически отправляя в Google статистику использования и отчеты о сбоях. Что такое отчеты о сбоях?

    Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS 9.0003

    Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS 9.0003

    Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS 9.0003

    Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS

    . Загружая Chrome, вы соглашаетесь с Условиями использования Google и Дополнительными условиями использования Chrome и ChromeOS 9.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *