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

Кейси Баски

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

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

Новые возможности

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

Найдите неиспользуемый код CSS и JS на новой вкладке «Покрытие» . Когда вы загружаете или запускаете страницу, на вкладке отображается количество использованного кода по сравнению с количеством загруженного. Вы можете уменьшить размер своих страниц, отправляя только тот код, который вам нужен.

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

При нажатии на 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);
  }

PS хотите повысить свои навыки отладки? Ознакомьтесь с этими новыми документами:

Изменения

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

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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