Новый функционал в Google Chrome Developer Tools

Версия для печатиВерсия для печати

В новой, 59-й версии Google Chrome появилась кучка полезных фишек, которые во много облегчат жизнь фронтэндерам и вообще разработчикам.

  1. В первую очередь это поиск неиспользованного кода в CSS и JS. Запускаем запись на вкладке Coverage, проходимся по основным страницам сайта, открываем попапы, вкладки и другие неактивные, загружаемые по ajax элементы. После этого останавливаем запись и вуаля: получаем статистику по проценту неиспользованного кода в CSS и JS. Для оптимизации и удаления ненужного кода — это просто "сладкая конфетка".
  2. Скриншоты всей страницы теперь доступы для адаптивного режима в DevTools. Просто запускаем заходим в режим и в меню жмем соответствующую кнопку. Скриншот в момент у нас в папке загрузок.
  3. Теперь можно блокировать загрузку отдельных файлов. Хочется узнать, как будет выглядеть сайт без изображения или без одного из скриптов, который не прогрузился по какой-то причине? Это не проблема с новой возможностью DevTools в Chrome 59!
  4. .. ещё несколько полезных штук, которые можно почитать на официальной новостной ленте DevTools.

Подробности в новостной ленте DevTools: https://developers.google.com/web/updates/2017/04/devtools-release-notes