Как открыть папку через консоль windows 10

Советы и рекомендации по Chrome DevTools

Мартин Михалек – 19 октября 2015 г.

Пожалуйста, поделитесь: Facebook

Инструменты разработчика добавляют новости так быстро, что включить их все в рабочий процесс уже давно невозможно. Бьюсь об заклад, вы не знаете, по крайней мере, некоторые из следующих советов и приемов. Откройте DevTools в Chrome и давайте проверим мою претензию сейчас.

Сочетание клавиш F12 или Ctrl+Shift+I в Windows. Cmd+Opt+I затем на Mac.

Реклама

Видео «Настройка скорости в Chrome DevTools»

Один веб-сайт, один браузер и один час времени. Как оптимизировать скорость сайта с помощью DevTools? Лектор: Михал Матушка. 299 чешских крон.
Дополнительная информация .

Упрощенная отладка CSS

Все на вкладке «Элементы» и панели «Стили»:

  1. Поиск в DOM с помощью селектора CSS
    Ctrl/Cmd+F в DOM и вставка селектора CSS в поле поиска.
  2. Визуализация хода анимации
    Фиолетовый значок для обозначения хода анимации или функции перехода. Видео.
  3. Визуальный выбор цвета
    Нажмите на предварительный просмотр цвета. В открытом слое щелкните значок средства выбора, и вы сможете выбрать любое место в пользовательском интерфейсе.
  4. Source Maps — сопоставление источников LESS/SASS
    Не обязательно включать его в DevTools, просто подумайте об этом при компиляции препроцессоров.
  5. Принудительное :hover или другое состояние элемента
    В DOM в контекстном меню над элементом выберите «Принудительное состояние элемента» или на вкладке «Стили», щелкнув значок булавки. вверху.
  6. Отменить изменения на вкладке «Стили»
    Как иначе, чем Ctrl/Cmd+Z? Посмотрите видео.
  7. Фильтрация объявлений CSS
    Поле «Фильтр» в верхней части панели «Стили».
  8. Изменить цветовой формат (RGB/HEX/HSL)
    Используйте Shift+щелчок по значку цвета. Видео.
  9. Переход от стилей к источнику CSS
    ИспользованиеCtrl/Cmd+щелчок по объявлению CSS. Можно дополнить переходом на читаемую выписку. Видео.
Читайте также:  Как начать скачивание windows 10

Консоль

Все на панели консоли. Вы можете попасть туда через Esc в открытых DevTools.

  1. Вставка многострочного кода
    Используйте Shift+Enter для отступа кода.
  2. Сохранить историю консоли даже при перезагрузке
    Флажок «Сохранить журнал» в верхней части консоли.
  3. Ярлыки доллара в консоли
    • $_ — результат последнего выражения.
    • $0 — $4 – последние четыре элемента, выбранные на панели DOM.
    • $(селектор) – псевдоним для document.querySelector() ; возвращает первый соответствующий элемент.
    • $$(селектор) – псевдоним для document.querySelectorAll() ; возвращает массив всех элементов, которые ему удовлетворяют.
  4. monitorEvents() – упрощенный мониторинг событий:
    Например. monitorEvents(окно, «щелчок») . Видео.

Эмуляция устройства в режиме устройства

Моя любимая часть. DevTools включает в себя отличный эмулятор для отладки адаптивного дизайна. Найти его можно под неприметным мобильным значком слева от главного меню. Или с помощью сочетания клавиш Ctrl/Cmd+Shift+M, когда у вас открыты DevTools.

Следуйте цифрам на картинке:

  1. Предустановленные профили устройств
    После этого вы можете увидеть их разрешение CSS или соотношение пикселей устройства, преобразованное в пиксели CSS.
  2. Эмуляция скорости мобильной загрузки
    В чешской среде выберите «Обычный 2G», оптимисты затем «Хороший 2G».
  3. Визуализация используемых медиазапросов
    Перейдите к соответствующему разделу кода, щелкнув правой кнопкой мыши.
  4. Эмуляция пользовательского масштаба
  5. Дополнительные параметры можно передать в браузере в настройках
    Возможно, проверить геолокацию или, возможно, положение устройства в акселерометре.

Конечно, это не то же самое, что тестирование в реальном мире.устройств, но для первого этапа адаптивного тестирования DevTools просто великолепны!

Редактор разработчика на вкладке «Источник»

На вкладке «Источник» вы можете превратить DevTools в практически полноценный редактор для разработчиков. Просто сопоставьте локальные файлы с проектом. Щелкните правой кнопкой мыши список «Источники» справа, выберите «Добавить папку в рабочую область», подтвердите вопрос в строке и все.

Читайте также:  Как повернуть панель задач на рабочем столе windows xp

Google уже официально продвигает это использование, и хорошо, что он перенимает проверенные ярлыки и процедуры из SublimeText. Хотя бы несколько советов:

  1. Быстрое переключение между файлами: Ctrl/Cmd+P — известно из Sublime или Atom.
  2. Отформатированный список исходников:
    Если, например, он открывает там уменьшенный файл, поможет значок остроконечных скобок внизу слева — <> .
  3. Поиск во всех источниках.
    Chrome может индексировать локальные файлы так же, как ваш редактор. Ctrl+Shift+F (Cmd+Opt+F) .

А знаете ли вы о возможности «жесткой перезагрузки» страницы и перезагрузки с очисткой кеша? Открыв DevTools, щелкните значок правой кнопкой мыши, чтобы обновить страницу. Видео.

Я мог бы продолжить, но на сегодня достаточно. У вас есть свои любимые приемы DevTools? Не медлите и пишите их в комментариях!

Поделиться с друзьями
ОС советы