Chrome DevTools – это инструмент для фронтенд-разработчика, который поможет вам выжить. Ежедневная отладка точек останова и сбор http-данных – это лишь базовые операции. Итак, вы все еще знаете некоторые из его продвинутых способов использования? Разработчикам неизбежно нужно поддерживать код, написанный другими.Когда вы сталкиваетесь с большим проектом с сотнями тысяч строк кода, морем кода, необъятностью, дрейфом по течению, сбоями, как быстро найти код, который вы хотите? Как профессиональный инженер по отладке интерфейса и небольшой эксперт по заполнению ям, сегодня я начну с обратного анализа кода и расскажу о некоторых продвинутых способах отладки Chrome.
1. Обратный анализ кода
статический код поиска
глобальный поиск
Это навык, которым обычно овладевает каждый. Ctrl+shift+F открывает глобальный поиск. Ключевые слова для поиска обычно – это идентификатор, класс, имя элемента dom или уникальные китайские иероглифы, которые появляются на странице. После поиска найдите непосредственно в код.
Найти связанные события DOM
Он подходит для проектов, разработанных нативным кодом и jquery.Возьмите Baidu в качестве примера.Вверху есть кнопка настройки.При перемещении мыши вверх всплывает меню.Как найти фрагмент кода всплывающего окна. вверх меню?
В ссылке настроек щелкните правой кнопкой мыши, чтобы проверить элемент, и найдите прослушиватели событий третьей вкладки в правой части панели элементов хрома.
Номер строки события привязки элемента будет указан в событии mouseover или mouseenter.
Щелкните код, чтобы найти соответствующий код, а затем добавьте точку останова для его отладки.
Поскольку онлайн-код был сжат и запутан, вам нужно щелкнуть красивую печать, чтобы отформатировать код.
Динамический поиск кода
Стек вызовов
Стек представляет собой структуру данных.Каждый раз, когда вызывается функция, в стеке сохраняются значения указателя и параметра функции.
Стек очень важен для отладки,Хотя я не знаю, откуда вы пришли, я знаю, где вы окажетесь Пока вы устанавливаете точку останова на единственном способе выполнения, вы можете найти себя на этом пути..
Давайте сначала посмотрим на использование стека и напишем следующий тестовый код:
function multiply(x, y) {
debugger;
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
Весь поток выполнения кода выглядит следующим образом:
Вызов printSquare сохраняет указатель функции print Square и значение параметра 5 (т.е. аргументы) как часть данных в верхней части стека вызовов.
Функция умножения вызывается для вычисления умножения, указатель на функцию умножения и два параметра 5 и 5 хранятся в верхней части стека вызовов.
После вызова функции умножения (возврат) функция умножения удаляется из вершины стека и вызывается console.log.
Поскольку консоль является встроенным объектом, вы не можете перейти к пошаговой отладке, чтобы увидеть внутренний код. На самом деле, она также помещается в стек. После выполнения console.log извлекается из стека. .Теперь в стеке остается только первоначальная мечта printSquare.
PrintSquare также выталкивается из стека, и весь стек чист.На панели стека вызовов вы можете видеть входы и выходы вызовов функций и быстро переключаться на каждую функцию в стеке выполнения.
Автоматические точки останова при изменении Dom
В качестве примера возьмем код сайта todomvc:на Дом VC.com/examples/vu…Добавьте запись todo, например, когда вы хотите посмотреть, как работает vue dom diff при удалении элемента, мы знаем, что после нажатия удаления эта строка li удаляется, но какая строка кода работает, мы добавляем dom точка останова Попробуйте, когда узел dom будет удален, он автоматически прервет сегмент кода, который изменяет dom
После удаления этого todo код автоматически прерывается в строке removeChild виртуального дома vue.Разве это не круто,но высота этого стека 28 этажей,а это небоскреб.Меня не интересует исходник dom diff код vue. , далее на лифте прямо на 1 этаж.
Поднимитесь на лифте на 1-й этаж и посмотрите, что здесь находится код для события vue bind dom, которое является источником всего, а затем посмотрите на 4-й этаж — это конкретный бизнес-код.
Автоматическая точка останова запроса Ajax
Иногда вы не можете найти код для привязки событий, или некоторые функции вызываются по http-запросу без какого-либо взаимодействия, тогда пригодятся точки останова запроса ajax, в точках останова xhr/fetch в исходной панели Добавить, вы можете захватить все адреса URL, вы также можете указать захват ключевых слов.
После того, как я только что добавил точку останова xhr, я вставил изображение в редактор, и хром автоматически прервался.Я случайно увидел внешний исходный код редактора уценки Nuggets, чтобы загрузить изображение и вставить изображение. Кажется, что имя функции не совсем запутано после пакета webpack.
Автоматическая точка останова при исключении
Эта функция не очень полезна в нормальных условиях. Обычные исключения будут отображаться на консоли, и они также могут быть расположены на консоли. Вы можете вручную добавить точки останова после обнаружения прошлого. Нет, но эта функция автоматической точки останова исключений все еще может быть пойманный.
2. Онлайн-отладка, локальный агент
Как я могу разрабатывать локально, без загрузки на тестовый сервер или рабочий сервер, и увидеть эффект измененного кода? Если мы используем vue для разработки, vue-cli поставляется с функцией локального прокси, которая может обратно проксировать интерфейс сервера на локальную службу http, так есть ли другой способ? Давайте подробнее рассмотрим методы, чтобы локальная разработка действовала без загрузки на сервер.
Функция локального прокси vue-cli, обратный прокси настраивается в конфигурационном файле devServer.proxy, который может проксировать фоновый интерфейс на локальный локальный хост.
Соберите обратный прокси nginx самостоятельно, эффект такой же, как и в первом случае.
Не требуется локальная служба http, прямой доступ к html-файлу на жестком диске и использование cors для прямого доступа к удаленному серверу через домены.Удаленный сервер на стороне сервера устанавливает заголовок ответа Access-Control-Allow-Origin в ' * '. Примечание: этот метод переноса файлов cookie не поддерживается.
Используйте функцию AutoResponder fiddler для перенаправления удаленного сервера непосредственно в локальный каталог (вам нужно написать регулярное выражение)
Используя функцию Overrides Chrome DevTools для сопоставления файлов сервера с локальными, он может поддерживать непосредственное изменение файлов на панели «Источники», а также может напрямую поддерживать автоматическое завершение синтаксиса intellisense, что более удобно, чем запись код в консоли.
Вышеуказанные пять методов имеют свои преимущества и недостатки, и я не буду их подробно раскрывать, если читателям будет интересно, я открою еще одну статью, чтобы представить их. В этой статье в основном представлен пятый метод
На вкладке «Переопределения» вторичной вкладки исходной панели нажмите «Выбрать папку для переопределений», выберите локальный каталог сопоставления, и вверху появится запрос на подтверждение.Обязательно выберите «Разрешить».
Затем откройте любой веб-сайт и попробуйте изменить код, например, откройте Baidu, нажмите на html главной страницы в панели исходников, добавьте оповещение, затем ctrl+s для сохранения, значок файла станет фиолетовым, обновите на следующей странице, и появится всплывающее предупреждение, это так просто, чтобы добиться того же эффекта, что и плагин tampermonkey. Какой веб-сайт работает плохо или реклама слишком раздражает, это не проблема, просто напишите строку кода, чтобы изменить это.
Конечно, самое главное, что его удобно разрабатывать, мало ли кто им пользуется, особенно при столкновении с теми функциями, которые не имеют тестового окружения и могут быть отлажены только на производственной линии. Если локального сопоставления прокси-сервера нет, вы можете найти только код обновления операции и обслуживания, чтобы увидеть эффект.
3. Анализ оптимизации производительности
Найдите функции, вызывающие узкие места в производительности
В дереве вызовов панели Performance можно посмотреть время выполнения каждой функции, что очень удобно для поиска узких мест в производительности.Давайте сначала напишем код с проблемами производительности, чтобы протестировать его.
setInterval(function slowFunc(){
var arr=[];
for(var i=0;i<1000;i++){
arr.push(i);
arr.sort();
}
},50)
После запуска откройте панель производительности и нажмите «Запись», «Начните мониторинг», а затем нажмите «Стоп».В дереве вызовов время выполнения каждой функции и подфункции может отображаться в виде древовидной структуры. Мы сразу видим, что Функция с именем slowFunc имеет наибольшее время выполнения. Когда оно достигнет 786 мс, щелкните имя функции, чтобы перейти к соответствующему коду.
Обнаружение покрытия кода
Проект существует уже давно, и будет много избыточного кода, который никогда не будет выполняться, или нужно оптимизировать загрузку первого экрана.Я хочу извлечь код js и css, который не используется на первый экран для асинхронной загрузки и использовать встроенный хром.Инструмент обнаружения покрытия может легко увидеть, какой код выполняется, а красный цвет указывает на код, который не был выполнен. При оптимизации первого экрана его можно извлечь для асинхронной загрузки.Если вы запустили все варианты использования и эта строка кода все еще красная, вы можете спокойно удалить эти красные коды.
Панель покрытия кода не отображается по умолчанию и должна быть открыта в меню дополнительных инструментов.
4. Отладка реальной машины мобильного терминала
Мобильная разработка часто сталкивается с некоторыми проблемами, которые выполняются на реальных машинах, но не могут быть воспроизведены в браузерах ПК.Это требует отладки реальной машины.Если это iphone, вы можете использовать USB для подключения к браузеру Safari под Mac для прямой отладки. На самом деле, реальная машинная отладка мобильных телефонов Android на самом деле более мощная, и она полностью взорвала Apple.В конце концов, функция отладки сафари слабее, чем у хрома.Пусть те студенты, занимающиеся фронтенд-разработкой, которые любят использовать Apple завидовать.
Тем не менее, многие студенты плохо настраивают отладку реальной машины USB, потому что создать среду веб-пакета с нуля сложнее, чем создать среду веб-пакета с нуля.
Мобильные телефоны Android должны установить драйвер интерфейса adb.Даже если мобильный телефон подключен к usb и файл можно скопировать, это не означает, что драйвер установлен.Некоторые мобильные помощники поставляются с этим драйвером.Если нет, то вы можете скачать с официального сайта http://adbdriver.com/
В параметрах разработчика в настройках телефона включить функцию отладки по usb
Подключите телефон с помощью USB-кабеля, и окно подтверждения будет появляться каждый раз при подключении к USB для отладки.
Откройте веб-сайт для отладки с помощью браузера Chrome на мобильном телефоне.В качестве примера на веб-сайте github.com обязательно используйте отдельный Chrome (установленный на основных рынках приложений), а в некоторых мобильных браузерах удаленная отладка webkit может быть отключена. Вы можете только быть поражены функциями.
Введите chrome://inspect/ в адресную строку. Если предыдущие шаги выполнены правильно, появится список отлаживаемых страниц. Нажмите inspect, чтобы открыть страницу отладки.
Самый важный шаг - один раз пройти через стену, можно использовать синий свет, потому что первая отладка будет подключаться к официальному сайту google, внутренняя недоступность прервет отладку и не сможет перейти на следующий шаг. В будущем, пока вы не переустановите браузер, вам не нужно будет снова перелезать через стену.
После проверки появится панель отладки, и ее можно отлаживать, как обычную страницу на стороне ПК.
резюме
Если вы хотите делать свою работу хорошо, вы должны сначала отточить свои инструменты.Инструменты разработчика Chrome позволяют быстро находить целевой код различными методами и предоставляют мощные возможности, такие как анализ производительности и сетевой анализ.
Наконец, я рекомендую свои проекты с открытым исходным кодом:
webcontext — мощная веб-инфраструктура node.js, позволяющая писать минимальный код: