Как открыть девтулс в хроме
Chrome DevTools
Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.
Как начать работу с DevTools
Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:
Какие вкладки есть в DevTools
Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.
Console. Консоль позволяет смотреть вывод JavaScript, а также исполнять свой код для тестирования и отладки страницы. Если на открытой странице не подгрузились какие-либо данные, например стили, шрифты или картинки, здесь отобразятся соответствующие ошибки с подробным описанием. Также в консоль можно ввести команду на языке JavaScript, и она выполнится.
Sources. Вкладка отображает загруженные файлы из всех источников, к которым обращался сайт. В большей степени она используется при отладке кода, позволяет увидеть все файлы и просмотреть их содержимое. Sources можно использовать в качестве полноценного редактора кода, получив доступ к локальным файлам через Workspaces.
Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.
Performances. Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. Здесь можно увидеть показатели FPS, загрузки CPU и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. После первого построения таймлайнов можно найти данные о всем жизненном цикле страницы и выполнении кода.
Также можно посмотреть время исполнения отдельных частей кода и выбрать конкретный период на шкале, чтобы увидеть, какие процессы происходили в этот интервал. Все это позволяет проанализировать каждое событие, которое происходило в момент загрузки или во время взаимодействия с пользователем.
Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:
Application. Панель, где можно быстро очистить хранилище и кэш, а также управлять базами данных.
Security. Отвечает за надежность ресурса. Здесь можно получить информацию о данных протокола и сертификата безопасности, если они есть. Также, если источник небезопасный, узнать, какие именно запросы не защищены. Поэтому этот инструмент, как правило, используется для решения проблем со смешанным контентом и другими подобными задачами.
Lighthouse. На этой вкладке можно проверить производительность сайта.
Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.
Начните свой путь в IT
Попробуйте себя в программировании, аналитике данных, Data Science и других востребованных специальностях — получите все курсы для входа в IT по цене одного.
Основные инструменты и как их использовать
Поиск нужного DOM-элемента. На панели Elements находится полное DOM-дерево, которое можно просмотреть и изменить. Найти конкретный элемент можно двумя способами.
1. Выбор элемента на странице
Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.
2. Использование функции поиска HTML-компонента
Для этого надо кликнуть по кнопке со стрелкой в левом верхнем углу консоли, а затем — по необходимому элементу на странице.
Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.
Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.
Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.
Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.
Используем Chrome DevTools профессионально
11 советов для тех, кто использует Chrome в качестве среды разработки.
Итак, по тем или иным причинам вы решили при разработке ориентироваться на Chrome. Вы открываете инструменты разработчика и приступаете к отладке кода.
Иногда вы открываете консоль, чтобы посмотреть вывод своей программы, или вкладку Elements, чтобы проверить CSS-стили элементов DOM.
А действительно ли вы разбираетесь в Chrome DevTools? На самом деле у инструментов разработчика множество мощных функций, которые облегчают жизнь, но о них мало кто знает.
Я расскажу о самых полезных из них.
Для начала рассмотрим командное меню. Командное меню в Chrome — это как командная оболочка в Linux. В нем вы можете писать команды для управления Chrome.
Открываем Chrome Developer Tools. Для доступа к командному меню используем горячие клавиши:
В этой области можно увидеть длинный список команд, которые дают доступ ко множеству полезных функций.
Расширенные функции скриншотов
Снимки части экрана приходится делать довольно часто, и я не сомневаюсь, что для этого на вашем компьютере установлены удобные программы. А могут ли они:
Пример
Откройте любую веб-страницу, например самые популярные статьи о JavaScript на Medium: medium.com/tag/javascript.
Мы сделали снимок всей текущей страницы целиком.
У оригинального скриншота качество хорошее, а сюда я загрузил сжатое изображение, чтобы сэкономить ваш трафик.
Сначала откройте вкладку Elements и выберите нужный элемент. Затем выполните команду.
Использование результата последней операции в консоли
Мы часто отлаживаем код в консоли. Допустим, вы хотите узнать, как перевернуть строку в JavaScript. Вы ищете нужную информацию в Интернете, и вам попадается вот такой фрагмент кода.
$_ — это специальная переменная, значение которой всегда равно результату последней выполненной в консоли операции. Этот прием сильно облегчает процесс отладки.
Повторная отправка запроса XHR
Во фронтенд-проектах часто приходится использовать XHR для отправки запросов на получение данных с сервера. Что делать, если нужно отправить запрос повторно?
Неопытные разработчики обновляют страницу, но это очень неудобно. В Chrome мы можем отладить код прямо на вкладке Network.
Отслеживание статуса загрузки страницы
На полную загрузку страницы может уйти более десяти секунд. В таких случаях нужно контролировать процесс загрузки страницы в каждый отдельный момент времени.
В Chrome DevTools можно делать скриншоты страницы в ходе ее загрузки, поставив галочку напротив Capture Screenshots на вкладке Network.
Выберите скриншот, чтобы посмотреть информацию о соответствующих сетевых запросах. Такая визуализация даст вам лучшее представление о сетевых запросах, которые отправляются на сервер в отдельные моменты времени.
Копирование переменных
ECMAScript не содержит определения функции copy, это функция Chrome. С ее помощью можно скопировать значение переменной JavaScript в буфер обмена.
Копирование изображения как URI с приставкой «data:»
Есть два способа вставить изображение на страницу: можно дать ссылку на внешний файл или внедрить изображение при помощи data: URL.
Data: URL (URL с приставкой data: ) — это схема, позволяющая встраивать небольшие файлы в документ в качестве строковых элементов.Раньше она называлась «data: URI», но WHATWG отказалась от этого названия.
Встраивание маленьких изображений непосредственно в код по схеме data: URL сокращает количество HTTP-запросов к серверу, благодаря чему страница загружается быстрее.
Как это сделать в Chrome?
Вывод массива объектов в таблицу
Допустим, у нас есть массив объектов:
Воспринимать такую информацию в консоли тяжело. А если массив длиннее и содержит более сложные элементы, то потеряться в нем еще проще.
К счастью, в Chrome есть функция, которая выводит массив объектов в таблицу.
Она вам пригодится, и не раз.
Перетаскивание на вкладке Elements
Иногда нужно переместить некоторые элементы DOM на странице, чтобы протестировать пользовательский интерфейс. На вкладке Elements можно перетащить любой HTML-элемент в любое место в коде:
В этом примере я перетащил элемент на вкладке Elements, и его расположение на веб-странице тоже моментально изменилось.
Обращение к текущему выделенному элементу в консоли
$0 — это еще одна волшебная переменная, которая содержит элемент, выделенный на вкладке Elements.
Активация псевдоклассов CSS
Псевдоклассы позволяют задать стиль для элемента не только в зависимости от его расположения в дереве документа, но и в зависимости от внешних факторов, таких как история просмотра (например, :visited), состояние контента (например, :checked в некоторых формах), положение указателя мыши (например, псевдокласс :hover изменяет стиль элемента при наведении на него указателя мыши).
Для одного элемента можно написать несколько псевдоклассов. Чтобы было проще тестировать стили, псевдоклассы можно активировать прямо на вкладке Elements.
Пример
Посмотрите на код страницы:
Открываем страницу в браузере, на вкладке Elements проверяем, как работают псевдоклассы, и при необходимости вносим изменения.
Горячая клавиша для скрытия элементов
Нажмите H на клавиатуре
Сохранение элемента DOM в качестве глобальной временной переменной
Если мы хотим быстро сослаться на элемент DOM в консоли, можно сделать это так:
Секреты Chrome DevTools: запуск, сеть и производительность
Дата публикации: 2019-03-18
От автора: за последнее десятилетие инструменты разработчика браузеров (браузер DevTools) превратились из базовых JavaScript-консолей в полностью интегрированные среды разработки и отладки. Стало возможным изменять и проверять любой аспект вашего веб-приложения, но лишь немногие из нас выходят за рамки базового использования.
В этой серии статей мы рассмотрим ряд функций, которые вы могли бы (или нет) использовать. Chrome DevTools описаны во множестве источников, но мы представим вам альтернативные опции для Chrome, как и для Firefox.
Горячие клавиши
Использование меню для запуска DevTools — это трата впустую драгоценных секунд! Попробуйте вместо этого один из следующих вариантов горячих клавиш:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
или кликните правой кнопкой мыши любом элементе страницы и выберите «Просмотреть код» или «Просмотреть код элемента».
Chrome предоставляет полезную помощь по сочетанию клавиш. В DevTools нажмите F1или выберите «Настройки» в трехточечном меню в правом верхнем углу. Затем выберите из меню «Ярлыки»:
Перемещение DevTools
Панель DevTools может быть прикреплена слева, справа или снизу окна браузера. Если вам требуется больше места, отсоедините ее от отдельного окна. Опции размещения находятся в главном трехточечном меню Chrome:
Настройки
Доступ к настройкам DevTool можно получить из того же меню или нажав F1. Это позволяет вам устанавливать такие параметры, как отображаемые инструменты, тема, размеры вкладок и многое другое.
Автозапуск DevTools
При работе с веб-приложением может оказаться целесообразным создать специальный ярлык на рабочем столе для запуска браузера, открытия URL-адреса и запуска DevTools за один шаг. Для Chrome создайте ярлык на рабочем столе со следующими параметрами командной строки Chrome:
где //localhost:8000/ — это ваш URL для разработки. Аналогично для Firefox:
(Имя исполняемого файла может отличаться в разных системах.)
Режим инкогнито во время разработки
Инкогнито / приватный режим не сохраняет данные, такие как куки и localStorage, после закрытия браузера. Режим идеально подходит для тестирования Progressive Web Apps (PWA) и систем авторизации.
Вы можете запустить браузер в режиме инкогнито вручную или добавив в командную строку Chrome —incognito или Firefox —private.
Палитра команд
Chrome DevTools предлагает редактор-палитру команд. Нажмите ctrl + shift + p:
Он обеспечивает быстрый доступ к большинству функций и исходным файлам (нажмите Backspace, чтобы удалить).
Окно консоли
Консоль полезна независимо от того, какую панель DevTool вы используете. Нажмите Esc чтобы показать и скрыть окно консоли в нижней панели.
Найти цвета страницы
Большинство браузеров показывают палитру цветов, когда вы кликаете любое свойство цвета CSS. Chrome также отображает цвета, используемые на странице внизу панели:
На панели можно кликнуть, чтобы посмотреть другие цвета.
Доступность цветового контраста
Палитра цветов также показывает коэффициент контрастности, который указывает на визуальную разницу между текстом переднего плана и цветом фона. Нажмите на соотношение, чтобы увидеть, как это соответствует стандартам доступности AA и AAA, которые гарантируют, что текст может быть прочитан большинством людей:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Любой цвет ниже линии на цветовой шкале будет соответствовать рекомендациям по контрастности AA.
Скриншоты
В палитре команд Chrome ( ctrl + shift + p) введите «снимок экрана», затем выберите параметр для захвата текущего окна просмотра, всей страницы или активного в данный момент элемента. Файл будет сохранен в папке загрузок. (Chrome 74+ также позволяет захватывать области.)
Firefox предоставляет систему «Сделать снимок экрана», доступную в большинстве меню. Кроме того, вы можете кликнуть правой кнопкой мыши любой элемент в представлении DOM и выбрать Снимок узла.
Найти неиспользуемые CSS и JavaScript
Новая панель покрытия Chrome позволяет быстро находить неиспользуемый код. Выберите «Покрытие» в подменю DevTools Другие инструменты», затем нажмите кнопку записи и найдите свое приложение. Затем кликните на любом файле, чтобы открыть его источник:
Неиспользуемый код выделяется красным цветом в строке с номером строки. Обратите внимание, что Chrome не запоминает используемый / неиспользуемый код при переходе на новую страницу, но я ожидаю, что это будет предоставлено в следующем релизе.
Отключить сетевой кэш
Установите флажок «Отключить кэш» в панели «Сеть», чтобы загрузить все файлы из сети. Это обеспечивает лучшую оценку загрузки страниц в первый раз.
Дросселирование скорости сети
Точно так же нет смысла тестировать вашу систему на скорости 1 Гбит / с, когда большинство пользователей получают доступ через 3G. Панель «Сеть» предоставляет раскрывающийся список «Онлайн» в Chrome и «Регулирование» в Firefox, позволяющий эмулировать определенные скорости сети.
Chrome также предоставляет возможность добавлять собственные дросселирующие профили.
Изменить порядок сетевых ответов
По умолчанию в панели «Сеть» отображается таблица запросов и ответов в порядке загрузки. Однако можно кликнуть любой заголовок таблицы, чтобы изменить порядок по имени, статусу, типу, размеру, времени ответа и т. д.
Фильтр незавершенных запросов
Чтобы обнаружить неполные или неотвечающие HTTP-запросы, откройте панель «Сеть» и введите is:running в поле «Фильтр».
Фильтр по размеру ответа
Фильтровать сторонний контент
Блокировка сетевых запросов
Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы. Кликните правой кнопкой мыши любой HTTP-запрос в панели «Сеть» Chrome и выберите «Блокировать URL-адрес запроса», чтобы заблокировать этот URL-адрес, или «Блокировать домен запроса», чтобы заблокировать любой запрос к этому домену. Откроется панель блокировки запросов, где вы можете добавить или удалить дополнительные URL-адреса или домены:
Воссоздать Ajax-запросы
Операции Ajax XMLHttpRequest можно проверить, кликнув правой кнопкой мыши их запись в таблице «Сеть», а затем выбрав параметр копирования, например cURL, fetch или PowerShell. Это создает команду с одинаковыми заголовками, пользовательским агентом, файлами cookie и ссылками, которые можно вставить в редактор или терминал.
Включить автономные переопределения файлов
Chrome позволяет сохранить любой файл в системе, чтобы браузер получал его с устройства, а не из сети. Это может позволить выполнять автономную разработку, если, например, вы хотите загрузить или отредактировать ресурсы, к которым обычно обращаются через CDN.
Откройте панель «Переопределения» в «Источниках», нажмите «+ Выбрать папку для переопределений» и выберите нужную папку.
Теперь кликните правой кнопкой мыши любой ресурс в панели «Сеть» и выберите «Сохранить для переопределений». Любая последующая перезагрузка страницы будет обращаться к файлу из вашей локальной системы, а не из Интернета. Сохраненный файл также можно изменить.
Исследуйте Хранилище
Панель «Приложения» в Chrome и панель «Хранилище» в Firefox позволяют просматривать, изменять и удалять значения, хранящиеся в файлах cookie, кэш-памяти, localStorage, sessionStorage, IndexedDB и Web SQL (если поддерживается).
Через панель «Очистить» в Chrome также можно стереть все значения для домена, что может быть полезно при разработке Progressive Web App.
Монитор производительности
Доступ к новому монитору производительности Chrome можно получить из меню «Дополнительные инструменты», который предоставляет анализ использования процессора, размера JavaScript, узлов DOM, прослушивателей событий, пересчетов стилей и многого другого. В отличие от основной панели «Производительность», графики обновляются в режиме реального времени — нет необходимости сначала записывать профиль.
Аудит
Панель «Аудит» Chrome изначально была разработана для оценки функциональности Progressive Web App, но этот инструмент превратился в инструмент общего назначения для анализа производительности, доступности, лучших практик и SEO как в мобильных, так и в настольных системах.
Он не выявляет все проблемы, и вы можете не согласиться с некоторыми моментами, но это полезный способ быстрой оценки потенциальных проблем. Я надеюсь, что вы узнали что-то новое из этой статьи. Скоро появятся другие секреты DevTool…
Автор: Craig Buckler
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения