Советы и рекомендации по Chrome DevTools
Мартин Михалек – 19 октября 2015 г.
Пожалуйста, поделитесь: Facebook
Инструменты разработчика добавляют новости так быстро, что включить их все в рабочий процесс уже давно невозможно. Бьюсь об заклад, вы не знаете, по крайней мере, некоторые из следующих советов и приемов. Откройте DevTools в Chrome и давайте проверим мою претензию сейчас.
Сочетание клавиш F12 или Ctrl+Shift+I в Windows. Cmd+Opt+I затем на Mac.
Реклама
Видео «Настройка скорости в Chrome DevTools»
Один веб-сайт, один браузер и один час времени. Как оптимизировать скорость сайта с помощью DevTools? Лектор: Михал Матушка. 299 чешских крон.
Дополнительная информация .
Упрощенная отладка CSS
Все на вкладке «Элементы» и панели «Стили»:
- Поиск в DOM с помощью селектора CSS
Ctrl/Cmd+F в DOM и вставка селектора CSS в поле поиска. - Визуализация хода анимации
Фиолетовый значок для обозначения хода анимации или функции перехода. Видео. - Визуальный выбор цвета
Нажмите на предварительный просмотр цвета. В открытом слое щелкните значок средства выбора, и вы сможете выбрать любое место в пользовательском интерфейсе. - Source Maps — сопоставление источников LESS/SASS
Не обязательно включать его в DevTools, просто подумайте об этом при компиляции препроцессоров. - Принудительное :hover или другое состояние элемента
В DOM в контекстном меню над элементом выберите «Принудительное состояние элемента» или на вкладке «Стили», щелкнув значок булавки. вверху. - Отменить изменения на вкладке «Стили»
Как иначе, чем Ctrl/Cmd+Z? Посмотрите видео. - Фильтрация объявлений CSS
Поле «Фильтр» в верхней части панели «Стили». - Изменить цветовой формат (RGB/HEX/HSL)
Используйте Shift+щелчок по значку цвета. Видео. - Переход от стилей к источнику CSS
ИспользованиеCtrl/Cmd+щелчок по объявлению CSS. Можно дополнить переходом на читаемую выписку. Видео.
Консоль
Все на панели консоли. Вы можете попасть туда через Esc в открытых DevTools.
- Вставка многострочного кода
Используйте Shift+Enter для отступа кода. - Сохранить историю консоли даже при перезагрузке
Флажок «Сохранить журнал» в верхней части консоли. - Ярлыки доллара в консоли
- $_ — результат последнего выражения.
- $0 — $4 – последние четыре элемента, выбранные на панели DOM.
- $(селектор) – псевдоним для document.querySelector() ; возвращает первый соответствующий элемент.
- $$(селектор) – псевдоним для document.querySelectorAll() ; возвращает массив всех элементов, которые ему удовлетворяют.
- monitorEvents() – упрощенный мониторинг событий:
Например. monitorEvents(окно, «щелчок») . Видео.
Эмуляция устройства в режиме устройства
Моя любимая часть. DevTools включает в себя отличный эмулятор для отладки адаптивного дизайна. Найти его можно под неприметным мобильным значком слева от главного меню. Или с помощью сочетания клавиш Ctrl/Cmd+Shift+M, когда у вас открыты DevTools.
Следуйте цифрам на картинке:
- Предустановленные профили устройств
После этого вы можете увидеть их разрешение CSS или соотношение пикселей устройства, преобразованное в пиксели CSS. - Эмуляция скорости мобильной загрузки
В чешской среде выберите «Обычный 2G», оптимисты затем «Хороший 2G». - Визуализация используемых медиазапросов
Перейдите к соответствующему разделу кода, щелкнув правой кнопкой мыши. - Эмуляция пользовательского масштаба
- Дополнительные параметры можно передать в браузере в настройках
Возможно, проверить геолокацию или, возможно, положение устройства в акселерометре.
Конечно, это не то же самое, что тестирование в реальном мире.устройств, но для первого этапа адаптивного тестирования DevTools просто великолепны!
Редактор разработчика на вкладке «Источник»
На вкладке «Источник» вы можете превратить DevTools в практически полноценный редактор для разработчиков. Просто сопоставьте локальные файлы с проектом. Щелкните правой кнопкой мыши список «Источники» справа, выберите «Добавить папку в рабочую область», подтвердите вопрос в строке и все.
Google уже официально продвигает это использование, и хорошо, что он перенимает проверенные ярлыки и процедуры из SublimeText. Хотя бы несколько советов:
- Быстрое переключение между файлами: Ctrl/Cmd+P — известно из Sublime или Atom.
- Отформатированный список исходников:
Если, например, он открывает там уменьшенный файл, поможет значок остроконечных скобок внизу слева — <> . - Поиск во всех источниках.
Chrome может индексировать локальные файлы так же, как ваш редактор. Ctrl+Shift+F (Cmd+Opt+F) .
А знаете ли вы о возможности «жесткой перезагрузки» страницы и перезагрузки с очисткой кеша? Открыв DevTools, щелкните значок правой кнопкой мыши, чтобы обновить страницу. Видео.
Я мог бы продолжить, но на сегодня достаточно. У вас есть свои любимые приемы DevTools? Не медлите и пишите их в комментариях!