Секреты браузерных инструментов разработчика (часть 2)
Опубликовано: 31.01.2018
Перевод статьи Secrets of the Browser Developer Tools с сайта devtoolsecrets.com , c разрешения автора — Энди Смита .
Редактирование
Редактирование кода при помощи консоли.
Увеличение/уменьшение CSS-значений
Если у вас есть элемент, для которого необходимо изменить поле, отступ, ширину или высоту, то вы можете использовать клавиши управления курсором, чтобы увеличить/уменьшить размер. Просто используйте клавиши управления курсором вниз и вверх, чтобы увеличить/уменьшить значение на 1 единицу.
Зомби Ферма. Как это сделано. - Vizor Interactive
Вы можете увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши управления курсором «вверх» и «вниз»; также можно увеличить/уменьшить значение на 0.1 единицы, удерживая клавишу «Alt» и нажимая клавиши управления курсором «вверх» и «вниз»;
Также есть возможность увеличить/уменьшить значение на 10 единиц, удерживая клавишу «Shift» и нажимая клавиши «Page-Up» и «Page-Down».
Эти сочетания клавиш особенно полезны, если вы не уверены, какой конкретно должен быть размер.
Переупорядочивание элементов перетаскиванием
В элементах интерфейса Chrome, Safari и Opera есть возможность перетаскивать и класть элементы в разном порядке. Просто нажмите и удерживайте элемент, который вы хотите переместить, и перетащите его в нужное место. Появится строка, указывающая, куда он будет помещен.
Стилизация состояний :active, :hover, :focus, :visited
Стилизация CSS в инструментах разработчика – это здорово, но она становится немного сложнее при тестировании таких псевдоклассов, как, например, :hover. К счастью есть решение.
В Chrome есть кнопка, созданная для этой цели. В правой колонке во вкладке «Элементы» найдите пунктирную иконку элемента/курсора, которая позволяет попробовать другие состояния.