» » 7 новых свойств Google Chrome, о которых вам следует знать

7 новых свойств Google Chrome, о которых вам следует знать

Помимо того, что Google Chrome, как всем известно, – это отличный современный интернет-браузер, это также прекрасный инструмент для веб-разработки (в лице DevTools).

 

7 новых свойств Google Chrome, о которых вам следует знать

 

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

 

 

Приступаем к работе: экспериментальные опции DevTools

 

 

У Google есть парочка экспериментальных свойств, которые скрыты или выключены по умолчанию. Для того чтобы активировать их, введите в адресной строке chrome://flags#enable-devtools-experiments, включите опцию DevTool Experiment и перезапустите Chrome.

 

Далее запустите DevTools и нажмите по значку настроек, расположенному в правой верхней части панели DevTools, после чего в появившемся меню кликните «Experiment». Теперь вам остается только выбрать те опции, которые вы хотели бы активировать.

 

7 новых свойств Google Chrome, о которых вам следует знать

 

1.Улучшенный эмулятор мобильного устройства

 

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

 

7 новых свойств Google Chrome, о которых вам следует знать

 

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

 

 

2.Множественные курсоры и селекторы

 

Вы хотели бы редактировать много линеек в одном в файле исходного кода, как в Sublime Text?Chromeподдерживает множественные курсоры и селкторы в DevTools. Используйте ctrl+click или cmd+click, чтобы выбирать несколько строчек одновременно.

 

7 новых свойств Google Chrome, о которых вам следует знать

 

3.Троттлинг сетевого подключения

 

Теперь посредством DevTools вы также можете проверять качество работы вашего сайта на различных соединениях. В DevTools нажмите  Esc, чтобы запустить Console Drawer, и выберите «Emulation». Во вкладке «Network» выберите режим скорость для троттлинга вашего сетевого соединения, и вы увидите, как работает сайт в рамках заданного параметра.

 

7 новых свойств Google Chrome, о которых вам следует знать

 

4.Оффлайн режим

 

У Google Chrome есть опция «Оффлайн режим», позволяющая открывать сайты в оффлайне. Если вы занимаетесь разработкой веб-приложения, работающего в том числе без доступа к сети, тогда это свойство будет вам как нельзя кстати. Итак, для активации перейдите в chrome://flags/#enable-offline-mode и включите «Enable Offline Cache Mode».

 

7 новых свойств Google Chrome, о которых вам следует знать

 

Для того чтобы опция заработала, не забудьте перезапустить Chrome.

 

 

5.Перетаскивание HTML в редактор

 

Иногда вам нужно скопировать HTML-элемент в редактор. Вместо того чтобы делать это вручную (копировать-вставить), вы можете просто перетащить DOM в область редактора.

 

7 новых свойств Google Chrome, о которых вам следует знать

 

В настоящий момент для перетаскивания доступен только один элемент, но вполне вероятно, что следующие обновления исправят этот недочет.

 

 

6.Контроль CSS

 

Теперь у вас есть возможность контролировать CSS, а именно выявлять те правила стиля, которые не используются на веб-странице. Для этого нужно перейти во вкладку «Audits» и нажать «Run». Вы увидите перечень неиспользуемых на данной странице селекторов, как показано ниже:

 

7 новых свойств Google Chrome, о которых вам следует знать

 

7.Добавление SourceMap

 

Благодаря SourceMap вы можете видеть разрушенные или раскомпилированные версии CSS иjavascript (JS). Эта опция представляет особый интерес для разработчиков, создающих стили или JS за счет использования таких препроцессоров как Sass, LESS и CoffeeScript. Активировав SourceMap, вы можете найти расположение кода в созданном JS или CSS в рамках конкретной строчки или колонки. Самая свежая версия Chrome позволяет добавить Source Map вручную.

 

 

Для этого убедитесь, что находитесь на панели с источником и откройте файл. Затем кликните правой кнопкой мыши и выберите «Add Source Map», чтобы добавить .map файл.

 

 

7 новых свойств Google Chrome, о которых вам следует знать

 

Ключевые теги: Google Chrome, Google, DevTools





Добавить комментарий

КОММЕНТАРИИ

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Быстрый вход: 

ВОЗМОЖНО ВАС ЭТО ЗАИНТЕРЕСУЕТ

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.