От автора: новые функции и основные изменения, внесенные в Chrome DevTools, включают в себя: блэкбоксинг на панели «Network», автоматическая настройка масштабирования в режиме устройства, удобочитаемые вкладки «Preview» и «Response», предварительный просмотр содержимого HTML на вкладке «Предварительный просмотр», Local Overrides со стилями внутри HTML.
Примечание. Проверьте в chrome://version, какую версию Chrome вы используете. Если это более ранняя версия, эти функции не будут доступны. Если более поздняя, функции могут быть изменены. Chrome автоматически обновляет основную версию каждые 6 недель.
Блэкбоксинг на панели «Network»
Столбец «Initiator» на панели «Network» сообщает, почему был запрошен ресурс. Например, если JavaScript вызывает выбор изображения, столбец Initiator показывает строку кода JavaScript, вызвавшую запрос.
Примечание. Вы можете скрыть или отобразить столбцы на панели «Network», щелкнув правой кнопкой мыши заголовок таблицы.
Раньше, если инфраструктура оборачивала сетевые запросы в оболочку, столбец Initiator не был бы таким полезным. Все сетевые запросы указывали на одну и ту же строку кода оболочки.
Вы действительно хотите увидеть код приложения в сценарии, вызывающий запрос. Теперь это возможно:
Наведите указатель мыши на столбец Initiator. Стек вызова, вызвавший запрос, появляется во всплывающем окне.
Щелкните правой кнопкой мыши вызов, который вы хотите скрыть от результатов Initiator.
Выберите Blackbox script . Столбец Initiator теперь скрывает любые вызовы из сценария, которые вы отметили.
Управляйте своими черно-белыми сценариями со вкладки Blackboxing в настройках. См. Игнорировать сценарий или шаблон скриптов, чтобы узнать больше о блэкбоксинге.
Удобочитаемые вкладки «Preview» и «Response»
Вкладка «Preview» на панели «Network» теперь подключает удобочитаемые ресурсы по умолчанию, когда обнаруживает, что эти ресурсы были уменьшены.
Чтобы просмотреть неограниченную версию ресурса, используйте вкладку «Response». Вы также можете вручную распечатать ресурсы со вкладки «Response» с помощью новой кнопки «Format».
Предварительный просмотр содержимого HTML на вкладке «Preview»
Раньше вкладка «Preview» на панели «Network» отображала код ресурса HTML в определенных ситуациях, во время рендеринга предварительного просмотра HTML в других. На вкладке «Preview» всегда выполняется базовый рендеринг HTML. Он не предназначен для полного браузера, поэтому он может не отображать HTML так, как вы ожидаете. Если хотите увидеть код HTML, откройте вкладку «Response» или щелкните правой кнопкой мыши ресурс и выберите «Open in Sources panel».
Автоматическая настройка масштабирования в режиме устройства
В режиме Device Mode откройте раскрывающееся меню Zoom и выберите «Auto-adjust zoom», чтобы автоматически изменять размер окна просмотра, когда вы меняете ориентацию устройства.
Теперь Local Overrides работает с некоторыми стилями, определенными в HTML
Когда DevTools запустил Local Overrides в Chrome 65, одним из ограничений было то, что он не мог отслеживать изменения в стилях, определенных в HTML. Например, на рисунке ниже есть правило стиля в head документа, объявляющего font-weight: bold для элементов h1.
В Chrome 65, если вы изменили объявление типа font-weight через панель стиля DevTools, Local Overrides не будет отслеживать изменение. Другими словами, при следующей перезагрузке стиль вернется к font-weight: bold. Но в Chrome 66 изменения, подобные этому, сохраняются при загрузке страниц.
Предупреждение. Local Overrides может отслеживать изменения, подобные этому, пока стиль определен в документе HTML, который был отправлен по сети. Если у вас есть сценарий, который динамически добавляет стили в HTML-документ, Local Overrides все равно не сможет обнаружить эти изменения.
Бонусный совет: сценарии фреймворка Blackbox сделает контрольные точки обработчика событий более полезными
Примечание. Этот раздел не относится к Chrome 66. Это просто бонусный совет о существующей функции, которую вы можете найти полезной.
Ранее, когда я создал видеоролик «Начните с отладки JavaScript», некоторые зрители прокомментировали, что точки прерывания обработки событий вредны для приложений, построенных поверх фреймворков, потому что обработчики событий часто обернуты в код рамки. Например, на рисунке ниже я установил брейкпоинт для кликов в DevTools. Когда я нажимаю кнопку в демо, DevTools автоматически приостанавливается в первой строке кода обработчика. В этом случае он останавливается в коде оболочки Vue.js в строке 1802, что не так полезно.
Поскольку сценарий Vue.js находится в отдельном файле, я могу использовать этот код из панели «Call Stack» , чтобы сделать брейкпоинт click более полезным
В следующий раз, когда я нажимаю кнопку и запускаю брейкпоинт click , запускается код Vue.js, не останавливаясь на нём, а затем останавливается на первой строке кода в обработчике моего приложения, и именно там я все это время хотел остановиться.
Запрос от команды DevTools: обратите внимание на Canary
Если у вас Mac или Windows, рассмотрите возможность использования Chrome Canary в качестве браузера по умолчанию. Если вы сообщаете об ошибке или изменениях, которые вам не нравятся, пока они есть в Canary, команда DevTools может быстрее отреагировать.
Примечание. Canary — это передовая версия Chrome. Она выпущена сразу после его сборки, без тестирования. Это означает, что Canary прерывается время от времени, примерно раз в месяц, и обычно это фиксируется в течение дня. Вы можете вернуться к использованию Chrome Stable, а Canary – снести.
Обратная связь
Лучшее место для обсуждения любых функций или изменений, которые вы видите здесь, это список рассылки [email protected]. Вы также можете читать нас в Твиттере на @ChromeDevTools, если у вас мало времени. Если вы уверены, что обнаружили ошибку в DevTools, поделитесь проблемой.
Автор: Kayce Basques
Источник: https://developers.google.com/
Редакция: Команда webformyself.