Расширенное руководство по отладке Chrome Devtools (новое)

JavaScript оптимизация производительности
Расширенное руководство по отладке Chrome Devtools (новое)

предисловие

Эта статья не охватилаPerformanceсодержимое панели. Отдельная статья будет опубликована позже.

  1. Общие команды и отладка
  2. Черный скрипт коробки:Blackbox Script
  3. Встроенные консольные команды
  4. Удаленная отладкаWebView

1. Полезность Chrome Devtools

  • Фронтенд-разработка: предварительный просмотр разработки, удаленная отладка, настройка производительности,bugТрассировка, отладка точек останова и т. д.
  • Back-end разработка: захват сетевых пакетов, разработка и отладка
  • тест: серверAPIВерны ли данные, просмотрите стиль и расположение элементов страницы, анализ производительности загрузки страницы, автоматическое тестирование
  • Другие: Установите расширения, такие какAdBlock、Gliffy、AxureЖдать

2. Разборка панели меню

  • Elements- элемент дом страницы
  • Console- приставка
  • Sources- Статические ресурсы страницы
  • Network- Интернет
  • Performance- Анализ производительности загрузки устройства
  • Application- информация о приложении,PWA/Storage/Cache/Frames
  • Security- Анализ безопасности
  • Audits- Аудит, инструменты автоматизированного тестирования

3. Общие команды и отладка

1. Вызовите панель быстрого доступа:cmd + shift + p

существуетDevtoolsоткрыть, типcmd + shift + pАктивируйте его и начните вводить искомую команду в строке или введите"?"число, чтобы увидеть все доступные команды.

  • ...: открыть файл
  • :: перейти к файлу
  • @: перейти к идентификатору (функции, имени класса и т. д.)
  • !: запустить файл сценария
  • >: открыть функцию меню

1. Монитор производительности:> performance monitor

Монитор производительности будет отображаться вместе с соответствующей информацией, такой как ЦП, размер кучи JS и узлы DOM.

2. Производительность мониторинга FPS в реальном времени:> FPSВыберите первый элемент

3. Скриншот одного элемента:> screenвыберитеCapture node screenhot

2. DOMотладка точки останова

Эту опцию можно использовать, когда вы хотите отладить изменения в DOM определенного элемента. Это типы точек останова изменения DOM:

  • Subtree modifications: когда дочерний узел удаляется или добавляется
  • Attributes modifications: Когда свойство изменено
  • Node Removal: Когда узел удален

Как показано выше:мониторformэтикетка, вinputКогда поле получает фокус, запускает отладку точки останова

3. Скрипт черного ящика:Blackbox Script

Удалите избыточные точки останова скрипта.

Например третье лицо (Javascriptтрассировки стека для фреймворков и библиотек, рекламы и т. д.).

Чтобы избежать этого и сосредоточиться на основном коде, вSourcesили откройте файл на вкладке «Сеть», щелкните правой кнопкой мыши и выберитеBlackbox Script

4. Прослушиватель событий:Event Listener Breakpoints

  1. нажмитеSourcesпанель
  2. расширятьEvent Listener Breakpoints
  3. Выберите категорию событий прослушивания, инициируйте событие, чтобы включить точки останова.

Как показано выше:При прослушивании событий ввода с клавиатуры он перейдет к точке останова.

5. Местное покрытие:local overrides

Переопределите ресурсы, используемые веб-страницей, нашими собственными локальными ресурсами.

Точно так же используйтеDevToolsНастройки рабочей области сохраняются, локальные папки сопоставляются с сетью, аchromeМодификация стиля css в функции разработчика будет напрямую изменять локальный файл, страница перезагружается, а используемые ресурсы также являются локальными ресурсами, достигая эффекта сохраняемости.

  • Создайте папку для локального добавления альтернативного контента;
  • ОткрытьSources > Overrides > Enable local Overrides, выберите локальную папку
  • ОткрытьElements, редактировать стили и автоматически создавать локальные файлы.
  • вернутьSources, проверьте файл, отредактируйте изменения.

Этот элемент может автоматически изменять ресурсы, кроме асинхронных запросов XHR.Если загруженный файл не отформатирован, вы можете нажать в левом нижнем углу.

6. Расширение:local overridesмоделированиеMockданные

От: инструменты разработчика Chrome - локальные переопределения

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

Например:

  • apiдля:http://www.xxx.com/api/v1/list

  • В корневом каталоге создайте новый файлwww.xxx.com/api/v1/list,listСодержимое файла такое же, как и в обычном интерфейсе.

Тип объекта или массива, тем самым перезаписывая исходный запрос интерфейса.

4. Встроенные команды консоли

Функции, которые могут выполнять общие задачи, такие как выборDOMэлементы, запускать события, смотреть события, вDOMДобавьте и удалите элементы и так далее.

это какChromeсамореализованныйjqueryРасширенное издание.

1. $(selector, [startNode]): одиночный селектор

document.querySelectorсокращение для грамматика:

$('a').href;
$('[test-id="logo-img"]').src;
$('#movie_player').click();

Консоль также будет заранее запрашивать соответствующие теги, что очень важно. Также могут быть запущены события, такие как приостановка воспроизведения:

Эта функция также поддерживает второй параметр, startNode, который указывает «элемент» или узел, из которого следует искать элементы. Значение по умолчанию для этого параметра — документ.

2. ?（选择器，[startNode]）: полный селектор

document.querySelectorAllСокращение для , возвращает массив элементов метки грамматика:

?('.button')

Вы можете использовать цикл для переключения, чтобы выбрать все
или распечатать свойства

Эта функция также поддерживает второй параметр, startNode, который указывает «элемент» или узел, из которого следует искать элементы. Значение по умолчанию для этого параметра — документ. Применение:

var images = ?('img', document.querySelector('.devsite-header-background'));
   for (each in images) {
       console.log(images[each].src);
}

3. $x(path, [startNode]):xpathСелектор

$x(path)вернуть и отдатьxpathМассив элементов DOM, соответствующих выражению.

Например, следующий код возвращает<p>Все элементы на странице:

$x("//p")

Следующий код возвращает<p>Включать<a>Все элементы элемента:

$x("//p[a]")

xpathОн в основном используется для сканирования, и студенты, работающие с интерфейсом, могут быть с ним незнакомы.

4. getEventListeners（object）: получить событие привязки указанного объекта.

getEventListeners(object)Возвращает прослушиватели событий, зарегистрированные для указанного объекта. Возвращаемое значение — это объект, содержащий каждый зарегистрированный тип события (например,clickилиkeydown) множество. Членами каждого массива являются объекты, описывающие слушателей, зарегистрированных для каждого типа. Применение:

getEventListeners(document);

Что касается событий, наблюдаемых комиссией по расследованию, этоAPIГораздо удобнее.

5. Фантазияconsole

За исключением разных оценокwarnа такжеerrorиз печати
Есть и другие очень полезные принты.

1. Переменная печать:%s,%o,%d,а также%c 

const text = "文本1"
console.log(`打印${text}`)

Помимо стандартногоES6синтаксис и на самом деле поддерживает четыре вида строкового вывода. Они есть:

console.log("打印 %s", text)
  • %s: нить
  • %o: объект
  • %d: число или десятичное число

Есть также специальные%c, который можно использовать для переопределения стиля вывода.

console.log('%c 文本1', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue')

Конечно, вы также можете использовать его в сочетании с другими (обратите внимание на порядок заполнителей).

const text = "文本1"
console.log('%c %s', 'font-size:50px; background: ; text-shadow: 10px 10px 10px blue', text)

Вы также можете играть так:

console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

2. Советы по печати объектов

Когда нам нужно напечатать несколько объектов, мы часто выводим один за другим. И не может видеть имя объекта, что не очень хорошо для чтения:

Раньше я печатал так:

console.log('hello', hello);
console.log('world', world);

Это, очевидно, немного громоздко и громоздко. На самом деле вывод также поддерживает деструктурирование объекта:

console.log({hello, world});

3. Логическое утверждение печатает:console.assert()

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

  • Если утверждение ложно, напишите сообщение об ошибке в консоль.
  • Если утверждение истинно, ничего не происходит.

грамматика

console.assert（assertion，obj）

Применение

const value = 1001
console.assert(value===1000,"value is not 1000")

4. ДайтеconsoleГруппировка:console.group()

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

console.group('用户列表');
console.log('name: 张三');
console.log('job: 🐶前端');
// 内层
console.group('地址');
console.log('Street: 123 街');
console.log('City: 北京');
console.log('State: 在职');
console.groupEnd(); // 结束内层
console.groupEnd(); // 结束外层

5. Эффективность выполнения теста:console.time()

нетPerformance APIТочный, но лучше, чем простой в использовании.

let i = 0;
console.time("While loop");
while (i < 1000000) {
  i++;
}
console.timeEnd("While loop");
console.time("For loop");
for (i = 0; i < 1000000; i++) {
  // For Loop
}
console.timeEnd("For loop");

6. Форма вывода:console.table()

Этот работает для печати объектов массива. . .

let languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);

7. ПечатьDOMУзел объекта:console.dir()

Распечатайте все свойства и значения свойств этого объекта.console.dir()а такжеconsole.log()Разница в эффекте не очевидна. Если используется для печати строки, вывод точно такой же.

console.log（"Why，hello!"）；
console.dir（"Why，hello!"）;

Когда объект только выводится, это другое (logраспознается как строковый вывод,dirРаспечатайте объект напрямую. ).

Единственное существенное отличие — печать.domНа объекте:

console.log(document)
console.dir(document)

Один печатает обычную этикетку, другойDOMобъект дерево.

6. Удаленная отладкаWebView

использоватьChromeИнструменты разработчика являются роднымиAndroidОтладка в приложенииWebView.

  1. настроитьWebViewsдля отладки.

    существуетWebViewВызов статического метода в классеsetWebContentsDebuggingEnabled.

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

  2. телефон открытusbОтладить, подключить компьютер.

  3. существуетChromeВ адресной строке введите:Chrome://inspect

обычно вAppоткрыть вWebViewчас,chromeбудет отслеживать и отображать вашу страницу. 4. Нажмите под страницейinspect, вы можете увидеть это на своем телефоне в режиме реального времениWebViewСтатус отображения страницы — вверх. (В первый раз, когда вы используете его, может быть белый экран, это потому, что вам нужно перейти кhttps://chrome-devtools-frontend.appspot.comСкачайте файл оттуда)

Кромеinspectтеги иFocus tab:

  • он сработает автоматическиAndroidТо же действие на устройстве

в других приложенияхWebViewТакже возможно, например, это игра в приложении, которое также использует веб-страницу:

7. ОтладкаNode.js

Для получения дополнительной информации вы можете проверить эту статью от сообщества Alibaba Cloud:

Руководство по устранению неполадок приложений Node.js — правильное включение Chrome DevTools

Ps: Это относится к моему слепому пятну знаний, поэтому я не буду его перемещать.

использованная литература

  1. Практичные Chrome Devtools — общие команды и отладка
  2. Мобильный веб-специалист — удаленная отладка
  3. Console Utilities API Reference
  4. Console API Reference

❤️ После прочтения трех вещей

Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне три небольших одолжения:

  1. Сайт, пусть люди могут видеть этот контент (коллекция не хвала, все играет в Rogue -_-)
  2. Обратите внимание на паблик «Учитель фронтенд-убеждения», и время от времени делитесь оригинальными знаниями.
  3. Также смотрите другие статьи

Может прийти ко мнеGitHubПолучите исходные файлы всех статей в блоге:

Руководство по убеждению:GitHub.com/Roger-Hi RO/…

Категории