7 новых свойств Google Chrome, о которых вам следует знать
Помимо того, что Google Chrome, как всем известно, – это отличный современный интернет-браузер, это также прекрасный инструмент для веб-разработки (в лице DevTools).
DevTools постоянно обновляется до новых версий. Следовательно, вы могли упустить из виду некоторые свежие опции. Именно этим функциям и будет посвящена данная статья.
Приступаем к работе: экспериментальные опции DevTools
У Google есть парочка экспериментальных свойств, которые скрыты или выключены по умолчанию. Для того чтобы активировать их, введите в адресной строке chrome://flags#enable-devtools-experiments, включите опцию DevTool Experiment и перезапустите Chrome.
Далее запустите DevTools и нажмите по значку настроек, расположенному в правой верхней части панели DevTools, после чего в появившемся меню кликните «Experiment». Теперь вам остается только выбрать те опции, которые вы хотели бы активировать.
1.Улучшенный эмулятор мобильного устройства
В наши дни наличие веб-сайта, оптимизированного для мобильных устройств, - это необходимость. С помощью Chrome вы можете делать отлаживать веб-сайты в мобильном режиме через опцию «Эмулятор мобильного», которая была полностью отредактирована и оснащена новыми возможностями.
Для того чтобы активировать эту опцию, запустите DevTools и кликните по иконке в виде мобильного телефона (находится по соседству со значком поиска), как это показано на скриншоте. Как вы сами можете видеть, сейчас эмулятор оснащен линейками, чтобы вы точно знали о размере экрана.
2.Множественные курсоры и селекторы
Вы хотели бы редактировать много линеек в одном в файле исходного кода, как в Sublime Text?Chromeподдерживает множественные курсоры и селкторы в DevTools. Используйте ctrl+click или cmd+click, чтобы выбирать несколько строчек одновременно.
3.Троттлинг сетевого подключения
Теперь посредством DevTools вы также можете проверять качество работы вашего сайта на различных соединениях. В DevTools нажмите Esc, чтобы запустить Console Drawer, и выберите «Emulation». Во вкладке «Network» выберите режим скорость для троттлинга вашего сетевого соединения, и вы увидите, как работает сайт в рамках заданного параметра.
4.Оффлайн режим
У Google Chrome есть опция «Оффлайн режим», позволяющая открывать сайты в оффлайне. Если вы занимаетесь разработкой веб-приложения, работающего в том числе без доступа к сети, тогда это свойство будет вам как нельзя кстати. Итак, для активации перейдите в chrome://flags/#enable-offline-mode и включите «Enable Offline Cache Mode».
Для того чтобы опция заработала, не забудьте перезапустить Chrome.
5.Перетаскивание HTML в редактор
Иногда вам нужно скопировать HTML-элемент в редактор. Вместо того чтобы делать это вручную (копировать-вставить), вы можете просто перетащить DOM в область редактора.
В настоящий момент для перетаскивания доступен только один элемент, но вполне вероятно, что следующие обновления исправят этот недочет.
6.Контроль CSS
Теперь у вас есть возможность контролировать CSS, а именно выявлять те правила стиля, которые не используются на веб-странице. Для этого нужно перейти во вкладку «Audits» и нажать «Run». Вы увидите перечень неиспользуемых на данной странице селекторов, как показано ниже:
7.Добавление SourceMap
Благодаря SourceMap вы можете видеть разрушенные или раскомпилированные версии CSS иjаvascript (JS). Эта опция представляет особый интерес для разработчиков, создающих стили или JS за счет использования таких препроцессоров как Sass, LESS и CoffeeScript. Активировав SourceMap, вы можете найти расположение кода в созданном JS или CSS в рамках конкретной строчки или колонки. Самая свежая версия Chrome позволяет добавить Source Map вручную.
Для этого убедитесь, что находитесь на панели с источником и откройте файл. Затем кликните правой кнопкой мыши и выберите «Add Source Map», чтобы добавить .map файл.
Комментировать статьи на сайте возможно только в течении 90 дней со дня публикации.