Google Chrome является в настоящее время самым популярным веб-браузером не только для пользователей, но и для веб-разработчиков. Браузер очень быстро развивается и обновляется через каждые 6 месяцев, расширяя особенности для веб-разработчика и пользователя. В этой теме, нас интересуют трюки и хаки для веб-разработчика. Поехали.
Многие из вас, знают о том, что можно делать с помощью Chrome DevTools, к примеру «живое» редактирование CSS на лету, использование консоли, а также отладчика. В это статье я собираюсь поделиться с вами 15 очень полезными советами и трюками, которые позволят улучшить рабочий процесс. Надеюсь, что вы почерпнете для себя массу нового.
1. Быстрое переключение файлов
Если вы используете Sublime Text, вы скорей всего, не можете жить без функции — Goto Anything. Вы будете счастливы. Нажмите Ctrl+P (Cmd+D на Mac), когда у вас открыт DevTools (F12) для того, чтобы быстро найти перейти к нужному файлу.
2. Поиск в исходном коде
На случай если вы хотите воспользоваться поиском в исходном коде, вам необходимо нажать Ctrl+Shift+F (Cmd+Opt+F на Mac). Этот поиск позволяет искать даже регулярные выражения.
3. Переход к строке
После того как вы открыли файл на закладке Sources, DevTools позволяет легко переходить к любой строчке кода. Для этого нажимаем Ctrl+G для Windows и Linux (или Cmd+L для Mac) и вводите номер необходимой вам строки.
4. Выбор элементов в консоли
Консоль Chrome DevTools поддерживает некоторые магические переменные и функции DOM элементов:
- $() — Сокращение от document.querySelector (). Возвращает первый элемент, соответствующий селектору CSS ( к примеру, $('DIV') вернет первый DIV элемент на странице;
- $$() — Сокращение от document.querySelectorAll (). Возвращает массив элементов, которые соответствуют CSS селектору;
- $0 – $4 — История пяти последних DOM элементов, которые выбрали в панели элементов, $0 будет последним;
Для того чтобы изучить консольные команды, почитайте — Command Line API
5. Использование мультикурсора
Еще одной «киллер-фичей» Sublime Text (и в WebStorm есть) является — мультикурсор. При редактировании файла вы можете установить несколько положений курсора, удерживайте Ctrl (Cmd для Mac) и нажимайте в нужных вам строках. Тем самым образом, вы сможете создавать/редактировать участки кода одновременно.
6. Preserve Log
При включении параметра Preserve Log во вкладке «Консоль», вы включаете сохранение в журнале до загрузки страницы и очистки при каждом перезапуске страницы не будет. Это удобно, если вы хотите, исследовать ошибки, которые появляются перед загрузкой страницы.
7. Читабельный код {}
Зачастую JS код и CSS минимизируют для увеличения скорости загрузки и уменьшения объема и минимизированный код тяжелее читать. Для того чтобы привести код в читабельный человеческий код в Chrome Developer Tools есть кнопка {} на вкладке Sources.
8. Режим устройства
DevTools позволяет эмулировать ваш проект под большое количество мобильных устройств и планшетов. Вы также можете выставить скорость соединения и проверить как грузиться ваш проект на ограничениях в несколько Кб/сек, чтобы понимать количество времени необходимого для загрузки вашего сайта и для оптимизации в целом.
9. Эмуляция сенсора устройства
Еще одной крутой особенности режимы эмуляции (про нее я уже писал в статье: «Chrome Emulation: тестируем проекты под мобильные устройства»), является возможность имитации датчиков мобильных девайсов, такие как сенсорные экраны и акселерометры. Также. вы можете заменить географическое местоположение для отладки. Опция находится на вкладке Emulation -> Sensors.
10. Выбор цвета
При выборе цвета в редакторе стилей, вы можете щелкнуть по квадрату предпросмотра и появится палитра. В то время как открытая цветовая палитра, вы можете наводить мышкой на вашу страницу, указатель превратится в пипетку для выбора цвета с точностью до пикселя.
11. Состояние элемента
Chrome DevTools обладает такой функцией, как эмуляция состояния для элементов. То есть вы можете редактировать в реальном времени, CSS свойства для состояний элементов.
Существуют состояния:
:hover, :focus, :active и :visited.
12. Визуализация тени DOM
13. Выбор следующего вхождения
Если вы нажмете Ctrl + D (Cmd + D) при редактировании файлов на вкладке Sources, следующие вхождения тоже будут выбраны, помогая вам редактировать их одновременно.
14. Смена формата цвета
Используйте Shift + клик на цветовом предпросмотре для смены отображения формата между rgba, hsl и hex.
15. Редактирование локальных данных в рабочих областях
Рабочие области (Workspaces) мощное средство Chrome Devtools, которое превращает его в настоящую IDE.
Подробней о рабочих областях можно прочитать тут.
Обязательно пройдите курс по «Explore and Master Chrome DevTools» на английском, но это того стоит! А я на этом с вами прощаюсь, но ненадолго. Пишите в комментариях по данной статье. С радостью обсужу с вами данную тему.