Оригинальный адрес:16 DevTools tips and tricks every CSS developer needs to know

Оригинальный автор:Louis Lazaris

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:DEARPORK

Корректор:TiaossuP, Baddyo

16 советов по инструментам отладки, которые вы должны знать о разработке CSS

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

В этой статье я написал о ряде связанных с CSS функций и советов в инструментах разработчика, которые, я думаю, выведут вашу разработку CSS на новый уровень. Некоторые из этих советов предназначены не только для CSS, но я все равно собрал их вместе.

Некоторые из них представляют собой простые советы по рабочему процессу и отладке, другие представляют собой новые функции, появившиеся в последние годы. Большинство из них основаны на инструментах разработчика Chrome, но также охватывают некоторые приемы Firefox.

Проверить CSS элементов, отображаемых через JavaScript

Нетрудно найти CSS для большинства элементов на панели «Элементы» инструментов разработчика. В большинстве случаев вам просто нужно щелкнуть элемент правой кнопкой мыши, щелкнуть «Проверить» и (при необходимости) осторожно щелкнуть на панели «Элементы», чтобы найти его. Как только элемент выбран, его CSS появится на панели «Стили», готовый к редактированию.

Иногда элемент отображается динамически из-за некоторых действий пользователя на основе JavaScript, таких как щелчок или наведение курсора. Самый интуитивно понятный способ просмотреть их — временно изменить JavaScript или CSS, чтобы сделать их видимыми по умолчанию, чтобы вы могли обрабатывать их, не имитируя действия пользователя.

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

Открытые инструменты разработчика
Откройте панель «Источники».
Выполните действие пользователя, чтобы сделать объект видимым (например, наведите указатель мыши)
Нажмите F8, когда элемент виден (аналогично кнопке "Приостановить выполнение скрипта").
Нажмите кнопку «Выбрать элемент» в левом верхнем углу инструментов разработчика.
Нажмите на элемент на странице

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

Как вы можете видеть в начале GIF, я не могу сначала выбрать элемент для его проверки, потому что он исчезает после удаления мыши. Но если я остановлю запуск скрипта, пока он виден, он останется видимым, чтобы я мог его правильно проверить. Конечно, если элемент представляет собой обычный CSS:hoverЭффект, затем я могу переключить статус с помощью «Переключить состояние элемента» (кнопка: HOV) на панели «Стили», чтобы он отображался. Тем не менее, в случае переключения стилей JavaScript, сценарий остановки может быть лучшим способом получить их стиль CSS.

Поиск элементов с помощью селекторов CSS

Вы, наверное, знаете, что искать элемент на панели «Элементы» можно с помощью встроенной функции (CTRL+F или CMD+F). Но обратите внимание на колонку «найти», она даст вам следующие подсказки:

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

Вам не обязательно использовать селектор, который вы использовали в своем CSS, это может быть любой допустимый селектор CSS. Функция find сообщит вам, соответствует ли селектор какому-либо элементу. Это полезно для поиска элементов, а также для проверки правильности селекторов.

Ниже приведено использованиеbody > divселектор для поиска и перемещенияbodyвсе прямые детиdivДемонстрация элемента:

Как упоминалось выше, эти поиски можно выполнять с помощью любого допустимого селектора, подобного селектору JavaScript.querySelector() а также querySelectorAll()метод.

Редактируйте блочную модель напрямую

Блочная модель — это одна из первых вещей, которую вы изучаете, когда начинаете работать с CSS. Поскольку это важная часть компоновки CSS, инструменты разработчика позволяют редактировать блочную модель напрямую.

Если вы просмотрели элемент на странице, щелкните панель «Вычисляемые» рядом с панелью «Стили» на правой панели. Вы увидите визуальное блочное представление элемента со значениями для каждой части:

Если вы не знаете, вы можете произвольно отредактировать их значения, дважды щелкнув:

Любые внесенные изменения отразятся на странице так же, как и при редактировании CSS на панели «Стили».

Увеличение или уменьшение значений свойств на панели «Стили»

Возможно, вы уже знаете, что CSS можно редактировать на панели «Стили». Просто щелкните свойство или значение и введите изменение.

Но, возможно, вы не понимаете, что значения могут увеличиваться или уменьшаться по-разному.

Клавиша со стрелкой вверх/стрелка вниз может увеличивать/уменьшать значение атрибута на 1
ALT + клавиши со стрелками вверх/вниз могут увеличивать/уменьшать значение атрибута на 0,1.
SHIFT + СТРЕЛКА ВВЕРХ/СТРЕЛКА ВНИЗ может увеличивать/уменьшать значение атрибута на 10
CTRL + клавиши со стрелками вверх/вниз могут увеличивать/уменьшать значение свойства на 100

Вы также можете использовать кнопки Page Up или Page Down вместо клавиш со стрелками.

Возможности текстового редактора на панели «Источники»

Вы можете быть более знакомы с редактированием на панели «Стили», чем где-либо еще, однако панель «Источники» — это крайне недооцененная функция в инструментах разработчика, которая имитирует работу обычных редакторов кода и IDE.

Вот несколько полезных вещей, которые вы можете сделать на панели «Источники» (откройте инструменты разработчика и нажмите кнопку «Источники»).

Используйте клавишу CTRL, чтобы сделать множественный выбор

Если вам нужно выбрать несколько областей в одном файле, вы можете сделать это, удерживая нажатой клавишу CTRL и выбирая то, что вы хотите, даже если это не сплошной текст.

В приведенной выше демонстрации я выбрал три произвольных раздела файла main.css на панели «Источники» и вставил их обратно в документ. Кроме того, вы можете ввести несколько мест одновременно с несколькими курсорами, просто используйте клавишу CTRL, чтобы щелкнуть несколько мест.

Используйте клавишу ALT для выбора столбцов

Иногда вам может понадобиться выделить столбец текста, но обычно это невозможно. Некоторые текстовые редакторы позволяют использовать для этого клавишу ALT, в том числе на панели «Источники».

Используйте CTRL + SHIFT + O для поиска элементов с помощью селектора CSS.

После открытия файла на панели «Источники» нажатие комбинации клавиш CTRL + SHIFT + O откроет поле ввода, которое позволяет вам прыгать куда угодно, что является хорошо известной функцией Sublime.

После нажатия CTRL + SHIFT + O вы можете войти в селектор CSS элемента, который хотите найти в этом файле, и инструменты разработчика предоставят вам подходящие варианты.Нажмите, чтобы перейти к указанному месту в файле.

Функции адаптивного дизайна для Chrome и Firefox

Возможно, вы видели некоторые сайты, которые позволяют протестировать адаптивный макет всего за несколько кликов, но вы можете сделать то же самое в режиме устройства Chrome.

Откройте инструменты разработчика и нажмите кнопку «Переключить панель инструментов устройства» в левом верхнем углу (сочетание клавиш CTRL + SHIFT + M):

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

Дополнительная панель Firefox «@media rules» имеет аналогичную функциональность, позволяя вам щелкать точки останова из таблицы стилей вашего сайта. Вы можете увидеть, как я использую его на одном из моих веб-сайтов в демо ниже.

Цветовые особенности инструментов разработчика

Обработка значений цвета в CSS — это норма. Инструменты разработчика упрощают редактирование и тестирование значений цвета. Вот что вы можете сделать:

Контраст

Прежде всего, в инструментах разработчика есть функция специальных возможностей просмотра: когда вы видите значение свойства «Цвет» на панели «Стили», вы можете щелкнуть квадрат рядом со значением цвета, чтобы открыть палитру цветов. В палитре цветов вы увидите параметр «Контраст», указывающий, имеет ли выбранный вами цвет текста доступный контраст по отношению к фону.

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

палитра

Помимо просмотра специальных возможностей, вы также можете получить доступ к различным палитрам, включая палитру Material Design и палитру, связанную с просматриваемой в данный момент страницей.

Переключить синтаксис значения цвета

Наконец, малоизвестным лакомым кусочком в инструментах разработчика является синтаксис, который вы можете использовать для переключения значений цвета при их просмотре. По умолчанию на панели «Стили» отображается синтаксис цветов, записанный в CSS. Но инструменты разработчика позволяют удерживать Shift и щелкать маленький квадратик слева от значения цвета, чтобы переключать синтаксис значения цвета между шестнадцатеричным, RGBA и HSLA:

Редактировать тени CSS

CSS для text-shadow и box-shadow утомительно писать вручную, синтаксис легко забыть, а синтаксис для двух теней немного отличается.

Удобно, что инструменты разработчика Chrome позволяют добавлять тень текста или тень блока с помощью визуального редактора.

Как показано в демонстрации, вы можете добавить text-shadow или box-shadow к любому элементу, используя панель параметров в правом нижнем углу любого стиля на панели «Стили». После добавления тени вы можете редактировать различные значения свойств с помощью визуального редактора. Существующие тени можно вызвать из визуального редактора, щелкнув маленький квадратик слева от значения свойства.

Инспектор компоновки сетки для Firefox

Большинство распространенных браузеров теперь поддерживают макеты Grid, и все больше и больше разработчиков используют их в качестве метода макета по умолчанию. В инструментах разработчика Firefox теперь есть опция «Сетка» на вкладке «Макет».

Эта функция позволяет включить сетку полного покрытия, чтобы помочь различным частям компоновки сетки. Вы также можете отображать номера линий, названия областей и даже выбирать неограниченное количество дополнительных линий сетки — если это вам полезно. В демо-примере я использую веб-сайт Jen Simmons Sample, который отвечает, поэтому при изменении макета при изменении смотровой площадки вы можете увидеть преимущества визуальной сетки.

Редактор фильтров CSS для Firefox

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

Если у вас есть фильтр в вашем коде (подсказка: если вы не знаете фактического синтаксиса, вы можете написатьfilter: none), вы увидите черный и белый квадрат слева от значения фильтра. Щелкните его, чтобы открыть редактор фильтров.

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

Редактируйте анимацию CSS на панели стилей Chrome.

Редактировать статические элементы на панели стилей Chrome очень просто, поэтому редактируйте с помощьюanimationсвойства и@keyframesКак насчет созданных анимаций?

Существует два способа редактирования анимации в инструментах разработчика. Во-первых, когда вы просматриваете элемент или выбираете элемент на панели «Элементы», все стили для этого элемента отображаются на панели «Стили», включая определенные.@keyframes. В приведенной ниже демонстрации я выбрал анимированный элемент и изменил некоторые настройки ключевого кадра.

演示如何在 Chrome 的 Styles 面板编辑 CSS 动画的 GIF 动图

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

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

Просмотр неиспользуемых CSS в инструментах разработчика

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

Chrome позволяет просматривать неиспользуемый CSS через панель «Покрытие» инструментов разработчика. Эту панель можно открыть, щелкнув параметр «Настроить и контролировать DevTools» (кнопка с тремя вертикальными точками) в правом верхнем углу панели разработчика, упомянутой выше, выбрав «Дополнительные инструменты» и найдя «Покрытие».

Как показано в демонстрации, после открытия панели «Покрытие» вы можете открыть исходный файл на панели «Источники». Когда файл откроется, вы увидите зеленую или красную линию справа от каждого стиля в файле CSS, указывающую, применяется ли стиль на текущей странице.

Суммировать

Инструменты разработки вашего браузера — это сокровищница редактирования и отладки CSS. Когда вы объединяете приведенные выше предложения с функциями Chrome, такими как рабочие области (которые позволяют сохранять изменения, сделанные в инструментах разработчика, в локальный файл), весь процесс отладки становится более полным.

Я надеюсь, что эти советы и советы помогут вам улучшить свои навыки редактирования и отладки CSS в будущих проектах.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.