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

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

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

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

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

Анализ покрытия кода CSS и JS

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

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

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

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

Каждая строка кода выделена определенным цветом:

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

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

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

Скриншоты на всю страницу

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

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

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

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

Перейдите через asyncwait

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

  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.

Что нового в инструментах разработчика

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