Что нового в DevTools (Chrome 59)

19 апреля 2017г.  chrome     devtools     changelog   


  • Покрытие кода CSS и JS.
  • Скриншот всей страницы целиком.
  • Блокировка запросов.
  • Проход по async await функциям в отладчике.
  • Workspaces 2.0.
  • Унифицированное Меню Команд (Command Menu).


Покрытие кода CSS и JS

Данная фича позволяет наглядно увидеть процент используемого JS и CSS кода на странице. Сравнение идет по каждому загруженному JS и CSS файлу отдельно. Очень полезно, если соберетесь делать рефакторинг и чистить проект от мусора.

Покрытие кода

Открыть данную вкладку можно через Меню Команд (Command Menu, Ctrl+Shift+P). Начните вводить в нем "Coverage" и выберите пункт "Show Coverage".

Скриншот всей страницы целиком

Одна из самых долгожданных фич, наконец-то разработчики DevTools услышали наши молитвы. Можно наконец-то избавиться от ненужных более плагинов, которые занимались тем же самым. Ладно, я в курсе, что это очень спорно, так как лучшие из этих плагинов предлагали куда больший функционал по обработке и передаче полученных изображений. Но всегда приятно, когда нужный функционал есть в наличии из коробки. И бывают ситуации, когда нет возможности поставить нужный плагин.

 Небольшая инструкция на видео:

Блокировка запросов

Еще один полезный функционал появился на вкладке Network. Хотите посмотреть как будет выглядеть ваш проект, если не загрузится определенный файлик или не завершится определенный AJAX-request? Перейдите на вкладку Network, выберите необходимый запрос и в меню по правой кнопке мыши выберите "Block Request URL". Повторите запрос/обновите страницу и наслаждайтесь результатом.

Блокировка запросов

Проход по async await функциям в отладчике

Было улучшено исполнение кода в отладчике, в частности проход по async/await функциям. Рассмотрим следующий код:

function wait(ms) { return new Promise(r => setTimeout(r, ms)).then(() => "Yay"); } // делаем что-нибудь в фоне setInterval(() => 42, 200); async function test() { debugger; const hello = "world"; const response = await fetch('index.html'); const tmp = await wait(1000); console.log(tmp); return hello; } async function runTest() { let result = await test(); console.log(result); }

Ранее отладка такого когда превращалась в головную боль. После попадания в функцию test(), отладчик постоянно прерывался выполнением функции, заданной в setInterval. Но теперь эта проблема решена и отладчик пройдет функцию test() до последней строчки.

Workspaces 2.0

Из "экспериментов" перекочевал новый тип UX, ранее известный как Workspaces или Persistence. Теперь вы можете связать файл в вашей файловой системе с файлом, который приходит из сети. Изменения, сделанные в DevTools, будут записаны в ваш файл.

  • Перейдите в панель Sources.
  • Откройте таб Filesystem.
  • Нажмите Add folder to workspace.
  • Выберите папку в своей системе, содержащую исходники.
  • Нажмите Allow чтобы дать DevTools права на чтение и запись в эту папку.

Workspaces 2.0

Зеленая точка показывает, что данный файл связан с файлом в вашей файловой системой.

Унифицированное Меню Команд (Command Menu)

В меню команд (Command Menu) произошли небольшие изменения. В строке ввода перед командой появился значок " > ". Это произошло из-за объединения данного меню с меню Open File (Ctrl+O). В целом, конечно, ничего особо примечательного.


Оригинал статьи: What's New In DevTools (Chrome 59)