15 советов и трюков Chrome DevTools

Опубликовал: 4 года назад Интересное чтиво, Полезно знать!

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

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

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

Если вы используете Sublime Text, вы скорей всего, не можете жить без функции — Goto Anything. Вы будете счастливы. Нажмите Ctrl+P (Cmd+D на Mac), когда у вас открыт DevTools (F12) для того, чтобы быстро найти перейти к нужному файлу.

DevTools

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

На случай если вы хотите воспользоваться поиском в исходном коде, вам необходимо нажать Ctrl+Shift+F (Cmd+Opt+F на Mac). Этот поиск позволяет искать даже регулярные выражения.

DevTools

3. Переход к строке

После того как вы открыли файл на закладке Sources, DevTools позволяет легко переходить к любой строчке кода. Для этого нажимаем Ctrl+G для Windows и Linux (или Cmd+L для Mac) и вводите номер необходимой вам строки.

DevTools

4. Выбор элементов в консоли

Консоль Chrome DevTools поддерживает некоторые магические переменные и функции DOM элементов:

  • $() — Сокращение от document.querySelector (). Возвращает первый элемент, соответствующий селектору CSS ( к примеру, $('DIV') вернет первый DIV элемент на странице;
  • $$() — Сокращение от document.querySelectorAll (). Возвращает массив элементов, которые соответствуют CSS селектору;
  • $0 $4 — История пяти последних DOM элементов, которые выбрали в панели элементов, $0 будет последним;

Chrome DevToolsДля того чтобы изучить консольные команды, почитайте — Command Line API

5. Использование мультикурсора

Еще одной «киллер-фичей» Sublime Text (и в WebStorm есть) является — мультикурсор. При редактировании файла вы можете установить несколько положений курсора, удерживайте Ctrl (Cmd для Mac) и нажимайте в нужных вам строках. Тем самым образом, вы сможете создавать/редактировать участки кода одновременно.

Chrome DEV

6. Preserve Log

При включении параметра Preserve Log во вкладке «Консоль», вы включаете сохранение в журнале до загрузки страницы и очистки при каждом перезапуске страницы не будет. Это удобно, если вы хотите, исследовать ошибки, которые появляются перед загрузкой страницы.

6

7. Читабельный код {}

Зачастую JS код и CSS минимизируют для увеличения скорости загрузки и уменьшения объема и минимизированный код тяжелее читать. Для того чтобы привести код в читабельный человеческий код в Chrome Developer Tools есть кнопка {} на вкладке Sources.

7

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

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

9. Эмуляция сенсора устройства

Еще одной крутой особенности режимы эмуляции (про нее я уже писал в статье: «Chrome Emulation: тестируем проекты под мобильные устройства»), является возможность имитации датчиков мобильных девайсов, такие как сенсорные экраны и акселерометры. Также. вы можете заменить географическое местоположение для отладки. Опция находится на вкладке Emulation -> Sensors.

9

10. Выбор цвета

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

10

11. Состояние элемента

Chrome DevTools обладает такой функцией, как эмуляция состояния для элементов. То есть вы можете редактировать в реальном времени, CSS свойства для состояний элементов.

Существуют состояния:

:hover:focus, :active и :visited.

 12. Визуализация тени DOM

12

 

 13. Выбор следующего вхождения

Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, следующие вхождения тоже будут выбраны, помогая вам редактировать их одновременно.

13

14. Смена формата цвета

Используйте Shift + клик на цветовом предпросмотре для смены отображения формата между rgba, hsl и hex.

14

15. Редактирование локальных данных в рабочих областях

Рабочие области (Workspaces) мощное средство Chrome Devtools, которое превращает его в настоящую IDE.

Подробней о рабочих областях можно прочитать тут.

 

Обязательно пройдите курс по «Explore and Master Chrome DevTools» на английском, но это того стоит! А я на этом с вами прощаюсь, но ненадолго. Пишите в комментариях по данной статье. С радостью обсужу с вами данную тему.


Новая система комментариев
comments powered by HyperComments