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

Кейс Баскс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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» .