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

Кейс Баскс
Kayce Basques
X GitHub

Добро пожаловать в очередной выпуск заметок о выпуске DevTools. Посмотрите видео ниже или читайте дальше, чтобы узнать о новых возможностях Chrome DevTools в Chrome 59!

Основные моменты

Новые функции

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

Найдите неиспользуемый CSS- и JavaScript-код с помощью новой вкладки «Охват» . При загрузке или запуске страницы на вкладке отображается объём использованного и загруженного кода. Вы можете уменьшить размер страниц, отправляя только необходимый код.

Вкладка «Покрытие»

При нажатии на URL-адрес этот файл отображается на панели «Источники» с подробным описанием выполненных строк кода.

Разбивка покрытия кода на панели «Источники»

Каждая строка кода имеет цветовую кодировку:

  • Сплошной зеленый цвет означает, что строка кода выполнена.
  • Сплошной красный цвет означает, что действие не было выполнено.
  • Строка кода, выделенная одновременно красным и зелёным цветом, например, строка 3 на снимке экрана выше, означает, что выполнен только фрагмент кода в этой строке. Например, тернарное выражение типа var b = (a > 0) ? a : 0 выделено красным и зелёным цветом.

Чтобы открыть вкладку «Покрытие» :

  1. Откройте меню команд .
  2. Начните вводить Coverage и выберите Показать покрытие .

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

Посмотрите видео ниже, чтобы узнать, как сделать снимок экрана сверху донизу страницы.

Блокировать запросы

Хотите узнать, как ваша страница ведет себя при недоступности определённого скрипта, таблицы стилей или другого ресурса? Щёлкните правой кнопкой мыши по запросу на панели «Сеть» и выберите «Заблокировать URL запроса» . В панели появится новая вкладка «Блокировка запросов» , позволяющая управлять заблокированными запросами.

URL-адрес запроса блока

Перешагнуть через асинхронное ожидание

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

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  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);
  }

P.S. Хотите улучшить свои навыки отладки? Ознакомьтесь с этими новыми документами:

Изменения

Единое меню команд

Теперь, открывая меню команд , обратите внимание, что перед вашей командой стоит символ «больше» ( > ). Это связано с тем, что меню команд теперь унифицировано с меню «Открыть файл» , которое вызывается сочетанием клавиш Command + O (Mac) или Control + O (Windows, Linux).

Загрузите предварительные версии каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти предварительные версии предоставят вам доступ к новейшим функциям DevTools, позволят тестировать передовые API веб-платформ и помогут обнаружить проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

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

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .