1. Открытие Chrome DevTools
2. 2. Открыть по правому клику
3. 3. Открыть с помощью сочетаний клавиш
4. Секреты и уловки
5. Быстрое переключение файлов
6. Pretty Print {}
7. Изменить элемент HTML
8. Изменить свойства CSS
9. Поиск в исходном коде
10. Точки останова JavaScript
11. Перейти к номеру строки
12. Несколько курсоров
13. Изменить позицию стыковки DevTools
14. Очистка куки
15. Режим устройства
16. Пользовательские цветовые палитры и палитра цветов
17. Датчики эмуляции устройства
18. Toggle Element State
19. Показать User Agent Shadow DOM
20. Выбрать следующее вхождение
21. Workspaces
22. Сетевая Диафильм
23. DOMContentLoaded
24. Профили регулирования сети
25. Панель безопасности
26. Проверка Google AMP HTML
27. Используйте инструменты разработчика Firefox в Google Chrome
28. Резюме

Брайан Джексон

Обновлено 13 января 2017 г.

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

В период с сентября 2015 года по февраль 2016 года Google Chrome занимает 47,77% рынка браузеров по всему миру. - StatCounter

Инструменты разработчика Google Chrome, также известные как Chrome DevTools, являются инструментами веб-разработки и отладки, встроенными прямо в браузер. Они предоставляют разработчикам более глубокий доступ к своим веб-приложениям и браузеру. Вы можете делать все, от тестирования вашего видового экрана на мобильном устройстве до редактирования вашего HTML / CSS на лету и даже измерения производительности отдельных ресурсов вашего сайта.

Чтобы использовать последнюю версию инструментов разработчика , вы захотите использовать Google Chrome Canary , который является экспериментальной версией Chrome. Canary можно запускать вместе с Chrome, чтобы вы могли проверить любые проблемы, которые могут возникнуть.

Вы можете улучшить свою разработку, используя chrome: // flags и включив экспериментальные инструменты разработчика. Затем вы можете использовать панель настроек в инструментах разработчика для переключения отдельных экспериментов.

Мы будем упоминать некоторые из сочетания клавиш для Chrome DevTools ниже, но вы можете увидеть их полный список на сайте Google Developer.

Открытие Chrome DevTools

Есть несколько способов открыть Chrome DevTools.

Вы можете открыть Chrome DevTools из меню Chrome, нажать «Дополнительные инструменты», а затем - «Инструменты разработчика».

2. Открыть по правому клику

Вы также можете щелкнуть правой кнопкой мыши по любому элементу на веб-странице и нажать «Проверить элемент», чтобы запустить Chrome DevTools.

3. Открыть с помощью сочетаний клавиш

Вы также можете использовать следующие ярлыки:

• Windows: F12 или также Ctrl + Shift + I
• Mac: Cmd + Opt + I

Секреты и уловки

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

Быстрое переключение файлов

Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Ctrl + P (Cmd + P), когда Chrome DevTools открыт и ищет имя.

Pretty Print {}

Знаете ли вы, что Chrome DevTools имеет встроенную функцию печати? Вы можете легко изменить формат вашего свернутого кода, нажав {}, чтобы вернуться к обычному виду, чтобы вы могли легко его просмотреть.

Изменить элемент HTML

Вы можете редактировать HTML на лету / просматривать изменения, выбрав любой элемент, выбрав элемент DOM на панели и дважды щелкнув по открывающему тегу, чтобы отредактировать его. Закрывающие теги автоматически обновляются для вас. Любые изменения будут отображаться в вашем браузере так, как если бы они действительно были внесены в исходный код.

Изменить свойства CSS

Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, вероятно, один из самых распространенных способов использования этого инструмента. Просто выберите элемент, который вы хотите редактировать, и под панелью стилей вы можете добавить / изменить любое свойство CSS, которое вы хотите.

Поиск в исходном коде

Вы можете быстро выполнить поиск по исходному коду, нажав Ctrl + Shift + F (Cmd + Opt + F).

Вы также можете искать с помощью селекторов CSS, нажав Ctrl + F (Cmd + F).

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

При отладке JavaScript иногда полезно установить точки останова. Вы можете установить точки останова в Chrome DevTools, щелкнув номер строки, по которой вы хотите разбить, и нажав Ctrl + R (Cmd + R), чтобы обновить страницу. Страница будет работать прямо до этой точки останова.

Перейти к номеру строки

Вы можете автоматически перейти к строке в вашем коде, нажав Ctrl + O (Cmd + O) и используя синтаксис строки. В приведенном ниже примере мы набрали: 200: 10 и нажали Enter, чтобы перейти к строке 200 столбца 10.

Несколько курсоров

Когда-нибудь есть несколько строк, вам нужно что-то добавить? Возможно, вы хотите добавить размер шрифта для нескольких классов. Вы можете легко добавить несколько курсоров, нажав Ctrl + Click (Cmd + Click) и введя информацию в несколько строк одновременно. Это очень удобный трюк.

Изменить позицию стыковки DevTools

Вы также можете изменить положение стыковки Chrome DevTools. Можно выбрать один из трех вариантов: нижний, боковой и незакрепленный (плавающий). Для переключения между позициями стыковки вы можете нажать Ctrl + Shift + D (Cmd + Shift + D). Тогда есть также панель стыковки в верхнем правом углу.

Очистка куки

Вы также можете легко очистить куки с помощью Chrome DevTools. Это может быть особенно полезно при тестировании и отладке сторонних плагинов. Просто перейдите на вкладку «Ресурсы» и в разделе «Cookies» вы можете щелкнуть правой кнопкой мыши и удалить все куки, хранящиеся в настоящее время в вашем браузере.

Режим устройства

Вы можете проверить ваш веб-сайт и медиа-запросы и посмотреть, не сломался ли ваш адаптивный дизайн, перейдя в режим устройства. Или, возможно, вам нужно увидеть, в каком разрешении страница разрывается, чтобы вы знали, где применить медиа-запрос. Чтобы войти в режим устройства, нажмите на маленький значок телефона в Chrome DevTools или нажмите Ctrl + Shift + M (Cmd + Shift + M). Затем вы можете выбрать, какое устройство вы хотите эмулировать, ориентацию и даже разрешение. Вы также можете изменить регулировку сети, чтобы увидеть, как ваш сайт будет отображаться при обычном соединении 2G.

Пользовательские цветовые палитры и палитра цветов

В Google Chrome Canary они представил новые пользовательские цветовые палитры и палитры материалов, которые извлекаются из CSS вашего сайта. Вы можете получить к ним доступ, просто нажав на цветовой блок на панели стилей. Существует также палитра цветов, которую вы можете использовать для выбора цветов на вашей веб-странице.

Вы можете переключаться между RGBA, HSL и шестнадцатеричным форматированием, нажимая Shift + Click на цветном блоке.

Датчики эмуляции устройства

Отличная особенность Chrome DevTools в том, что вы даже можете имитировать сенсорные экраны и ускорители. Для этого нажмите на консоль, эмуляцию и на датчики.

Toggle Element State

Вы когда-нибудь пытались выяснить, откуда происходит скрытый стиль, скажем, атрибут: hover? В Firefox их инструмент разработки позволяет вам видеть это при выборе элемента, но не в Chrome DevTools. Однако есть нечто лучшее, называемое состоянием элемента переключения. Это позволяет принудительно вызвать элемент state: hover, чтобы затем вы могли использовать панель стилей для просмотра свойств.

Вы можете сохранить любое изображение с веб-страницы как URI данных или, скорее, в кодировке base64. Нет необходимости использовать бесплатный онлайн-конвертер, так как он уже встроен в Chrome DevTools. Для этого просто щелкните на панели «Сеть», щелкните изображение, затем щелкните его правой кнопкой мыши и выберите «Копировать изображение как URL-адрес данных».

Затем вы получите изображение в следующем формате: «URURIsdata: image / png; base64, iVBORw0KGgoAAAANSUhEUgAABAAAAAFt ...»

Показать User Agent Shadow DOM

Когда вы имеете дело с такими вещами, как кнопки и вводные данные, веб-браузер обычно создает скрытые атрибуты. Чтобы увидеть их, нажмите в настройках, нажав клавишу F1 (?), И вы можете включить «Показать пользовательский DOM агента». Как вы можете видеть в примере, мы теперь можем видеть # теневой корень div, который создается. Вы даже можете сделать этот шаг дальше и применить стили CSS к скрытым атрибутам.

Выбрать следующее вхождение

Chrome DevTools позволяет легко выбрать следующее вхождение, а затем применить изменения одновременно по всем направлениям. Чтобы сделать это, просто дважды щелкните на том, что вы хотите редактировать, затем нажмите Ctrl + D (Cmd + D) для каждого вхождения, который вы хотите выбрать, и затем при вводе он изменит их все одновременно.

Workspaces

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

Для этого щелкните правой кнопкой мыши папку и выберите «Добавить папку в локальное рабочее пространство». Затем, чтобы сделать ее постоянной, щелкните правой кнопкой мыши файл и выберите «Сопоставить с ресурсом файловой системы…»

Рабочие пространства также могут быть очень полезны, если вы работаете с CSS-препроцессорами, как мы рассмотрели в нашем последнем посте, Sass vs LESS ,

Сетевая Диафильм

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

Для этого нажмите на панель «Сеть», нажмите значок камеры и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем он покажет вам, как ваша страница отображается от начала до конца.

С последним Обновление инструментов разработчика , они добавили панель с агрегированными данными в график времени водопада. Это позволяет вам легче увидеть, что стоит вам больше всего времени, а затем разбить его по доменам, поддоменам и т. Д.

Для запуска нажмите на панель «Временная шкала» и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем вы можете щелкнуть на панели «Сводка» и «Сводная информация».

DOMContentLoaded

У нас есть отличный пост что блокирует DOM и как это исправить. В инструментах разработчика вы можете точно увидеть время DOMContentLoaded и общее время загрузки. Для запуска этого нажмите на панель «Сеть», нажмите «Показать обзор» и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Синяя линия будет отображаться для DOMContentLoaded и красная линия для общего времени загрузки. Обычно все, что остается от синей линии или касается нее, является активами, которые блокируют DOM или также называются ресурсами блокирования рендеринга.

Профили регулирования сети

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

Чтобы добавить пользовательский профиль, щелкните на панели «Сеть» и в раскрывающемся списке «Регулирование». Затем вы можете нажать «Добавить пользовательский профиль…» и ввести имя, пропускную способность и задержку.

Панель безопасности

Chrome добавил еще одну замечательную функцию в инструментальные средства разработчика, которая называется Панель безопасности. Это может быть очень полезно для отладки HTTPS миграции и быстро исправлять смешанные предупреждения. Для запуска нажмите на панель «Безопасность» и нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем он отобразит безопасные сценарии зеленым цветом, а незащищенные - красным.

Проверка Google AMP HTML

Google ускоренные страницы для мобильных устройств (AMP) - это новая инициатива с открытым исходным кодом для ускорения мобильного Интернета с использованием легких HTML-страниц. Чтобы Google проиндексировал версию AMP вашей страницы, вы должны убедиться, что она подтверждена. Для запуска нажмите на панель «Консоль». Затем вам нужно будет добавить # development = 1 к версии AMP в адресной строке вашего браузера. Затем нажмите Ctrl + R (Cmd + R), чтобы обновить страницу. Затем он будет отображаться, если он успешно подтвержден ниже. Узнайте больше о Ошибки проверки AMP ,

Используйте инструменты разработчика Firefox в Google Chrome

Знаете ли вы, что вы можете запускать инструменты разработчика Firefox в Google Chrome? Валентность является экспериментальным дополнением от команды Firefox, которое позволяет инструментам разработчика Firefox отлаживать широкий спектр браузеров. Валентность требует Chrome 37.0 или выше.

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

$ / Applications / Google \ Chrome.app/Contents/MacOS/Google \ Chrome --remote-debugging-port = 9222 --no-first-run --no-default-browser-check --user-data-dir = $ (mktemp -d -t 'chrome-remote_data_dir')

Открыв соединение, вы можете открыть Firefox WebIDE выберите «Chrome Desktop», и теперь у вас есть доступ к инструментам разработчика Firefox в Chrome.

Резюме

Как вы можете видеть, Chrome DevTools имеет множество функций, которые помогут вам лучше разрабатывать, быстрее отлаживать и более эффективно измерять производительность вашего веб-сайта или приложения. Упомянутые выше советы - это лишь некоторые из множества доступных функций. У вас есть любимая функция DevTools, которую мы пропустили? Если это так, дайте нам знать ниже в комментариях.