- Покрытие кода 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 права на чтение и запись в эту папку.
Зеленая точка показывает, что данный файл связан с файлом в вашей файловой системой.
Унифицированное Меню Команд (Command Menu)
В меню команд (Command Menu) произошли небольшие изменения. В строке ввода перед командой появился значок " > ". Это произошло из-за объединения данного меню с меню Open File (Ctrl+O). В целом, конечно, ничего особо примечательного.
Оригинал статьи: What's New In DevTools (Chrome 59)