Главная › Новости

Секреты браузерных инструментов разработчика (часть 2)

Опубликовано: 31.05.2017

Перевод статьи Secrets of the Browser Developer Tools с сайта devtoolsecrets.com , c разрешения автора — Энди Смита .

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

Редактирование кода при помощи консоли.

Увеличение/уменьшение CSS-значений

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

Вы можете увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши управления курсором «вверх» и «вниз»; также можно увеличить/уменьшить значение на 0.1 единицы, удерживая клавишу «Alt» и нажимая клавиши управления курсором «вверх» и «вниз»;

Также есть возможность увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши «Page-Up» и «Page-Down».

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

Переупорядочивание элементов перетаскиванием

В элементах интерфейса Chrome, Safari и Opera есть возможность перетаскивать и класть элементы в разном порядке. Просто нажмите и удерживайте элемент, который вы хотите переместить, и перетащите его в нужное место. Появится строка, указывающая, куда он будет помещен.

Стилизация состояний :active, :hover, :focus, :visited

Стилизация CSS в инструментах разработчика – это здорово, но она становится немного сложнее при тестировании таких псевдоклассов, как, например, :hover. К счастью есть решение.

В Chrome есть кнопка, созданная для этой цели. В правой колонке во вкладке «Элементы» найдите пунктирную иконку элемента/курсора, которая позволяет попробовать другие состояния.