Навыки отладчика производственной среды Front-end инженера

七喜.png

Это 127-я оригинальная статья без воды.Если вы хотите получить больше оригинальных статей, выполните поиск в публичном аккаунте и подпишитесь на нас~ Эта статья была впервые опубликована в блоге Zhengcaiyun:Навыки отладчика производственной среды Front-end инженера

предисловие:

Отладка среды разработки — обязательный навык для каждого программиста. А производственная среда? Хотя отладка в производственной среде — очень неэлегантное поведение, но по разным причинам нам приходится делать это снова.

Итак, сегодня мы поговорим о том, как использовать хром для отладки в производственной среде.

Этапы отладки производственной среды

Сколько шагов требуется для отладки в производственной среде? Вопрос такой же простой, как «положить слона в холодильник за несколько шагов».

Первый шаг – открыть дверцу холодильника. F12 открывает devTools;

Второй шаг – положить слона в холодильник. Найдите интерфейсные файлы, которые необходимо отладить, отформатируйте, установите точки останова, контексты отладки и найдите проблемы;

В-третьих, закройте дверцу холодильника. Решать проблему.

Как быстро определить, возвращается ли ошибка внешним или внутренним интерфейсом?

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

Прежде всего, нам нужно решить, сообщает ли об ошибке клиентская или серверная часть, так как же быстро судить?

Решение 1. В соответствии с пониманием реализации кода решите, относится ли ошибка к интерфейсу или серверу.

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

Вариант 2: глобальный поиск по ключевым словам в интерфейсном коде и поиск в инженерном коде/консоли, чтобы открыть поиск.

Выполните глобальный поиск в соответствующем проекте gitlab или глобальный поиск vscode или devTools.

Вариант 3: Прокрутите запросы в сетевой панели.

Прокрутите запросы в сетевой панели, чтобы увидеть, что возвращаетсяresponseСледует ли нести сообщение об ошибке, если да, это означает, что бэкенд возвращается; если интерфейс, сообщающий об ошибке, оказывается недействительным200Состояние возвращается или интерфейс активируется новой операцией, и мы можем быстро найти соответствующий интерфейс следующим образом:

Вариант 4: Используйте сетевой поиск для поиска.

Однако во многих случаях ошибка службы интерфейса будет отображаться как статус http.200Возвращается код состояния.Если в это время запрашивается большое количество интерфейсов (например: вход на страницу вызывает большое количество интерфейсов, один из которых возвращает сообщение об ошибке), то в дополнение к неэффективному способу перелистывания сеть один за другим, chrome devTools Он также предоставляет более удобный способ панели поиска сети, которая может искать детали интерфейса (включая подробную информацию о возврате) и возвращать соответствующие результаты.

Как открыть панель поиска сети?

В сетевой панели нажмите клавишу быстрого доступа⌘ + F(Мак),CTRL + F(Windows) Открывает панель поиска сети.

Если вы уверены, что вам нужно положить слонов в холодильник, что вы можете посоветовать, чтобы положить слонов в холодильник?

Как быстро найти код, связанный с проблемой

глобальный поиск , ключевые слова глобального поиска, а затем найдите код ключа

Глобальный поиск chrome devTools — очень полезная функция.Когда вы не знаете, в каком файле находится код, который вам нужно отладить, когда у вас очень большая система и вы ссылаетесь на множество файлов ресурсов, вы можете использовать глобальный поиск для поиск ключевого слова, эта операция будет искать все загруженные ресурсы, щелкните результат поиска, вы можете использовать исходную панель, чтобы открыть соответствующий файл ресурсов, затем отформатировать код, а затем снова выполнить поиск ключевого слова в текущем файле, чтобы сломать точка.

Откройте ярлык глобального поиска:

⌘ + ⌥ + F(Мак),CTRL + SHIFT + F(Виндовс)

Взгляните на пример на рисунке ниже, найдем страницу и будем искать код по подсказкам:

Вот несколько ключевых слов, которые стоит попробовать:

(1) На странице есть четкое сообщение об ошибке, и было уточнено, что копия ошибки — это копия сообщения об ошибке, написанная во внешнем коде. В процессе кодирования информация подсказки обычно использует строки.В процессе сжатия и запутывания она обычно не обрабатывается, и исходный текст будет сохранен.Конечно, в процессе упаковки и построения кода вы также можете выбрать выполнение перекодирование юникода для китайского языка при сжатии и запутывании кода.Если ключевое слово китайское, нужно перекодировать, а потом искать.

(2) известно, что ключевой код в связанном коде, который все еще сохраняется после компиляции и путаницы, и имя метода, которое будет открыто для внешнего мира;

Как отлаживать запутанный js?

JS в производственной среде в основном запутан (Нажмите, чтобы понять сжатие и обфускацию внешнего кода), преимущества сжатия и обфускации повторять не буду.После сжатия и обфускации тяжело отлаживать продакшн среду.Хоть и еле понятно по точкам ломки,но уже очень античеловечно.

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

Здесь я решил создать простейшую демонстрацию с помощью vue-cli и просмотреть исходный код и скомпилированный код.

Исходный код:

Соберите скомпилированный код (здесь sourceMap отключен):

Здесь мы видим, что скомпилированный код был сжат и обфусцирован, а также большое количество большихa,b,c,dИсходные имена методов функций и имена переменных были заменены, и скомпилированный код больше нельзя понять, просто прочитав код. Но мы все еще можем понять это через отладку.

Итак, есть ли способ использовать локальный sourceMap для отладки производственного кода? Конечно, да.

Как отлаживать локальную исходную карту в производственной среде?

Шаг 1: Откройте запутанный код

Шаг 2: Щелкните правой кнопкой мыши -> выберите [Добавить исходную карту].

Шаг 3: Введите адрес локальной исходной карты (здесь должна быть включена служба статических ресурсов, вы можете использоватьhttp-server),Заканчивать. Локальный код выполняет команду сборки, обратите внимание на необходимость открыть конфигурацию sourceMap, скомпилировать и сгенерировать построенный код, и построенный результат будет включать файл sourceMap.

После привязки sourceMap мы можем увидеть изменения на панели sources -> page

Как изменить код и отладить в Chrome?

В среде разработки мы можем изменять код непосредственно в IDE, а изменения кода напрямую обновляются в браузере. Можем ли мы в производственной среде модифицировать код прямо в хроме, а затем сразу увидеть эффект измененного кода?

Конечно, в chrome devTools есть все, что вы хотите. chrome devTools предоставляет возможность локального переопределения.

Как работают локальные переопределения?

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

Как используются локальные переопределения?

Сначала откройте панель переопределений в источниках;

Затем нажмите [выбрать переопределение папки], чтобы выбрать измененный адрес хранилища файлов;

Затем нажмите «Авторизовать» вверху, чтобы подтвердить соглашение;

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

⚠️ Обратите внимание, что исходный файл js не может быть изменен непосредственно форматом; перед форматированием кода добавьте недопустимый код, чтобы внести изменения в код для сохранения, а затем можно изменить формат;

Суммировать

Навыки отладки Chrome — это гораздо больше, чем это, конечно, вышеизложенное — это просто советы по отладке в производственной среде. Надеюсь, вы их не используете. Конечно, лучший способ справиться с ошибками — решить их до того, как они исчезнут. онлайн; если есть проблема, если вы делаете это хорошо Мониторинг и ведение журнала для обнаружения и устранения проблем, как только они возникают.

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

developer.chrome.com/docs/Dev тоже…

вне никнейма

Как только откроется страница голосования, удача придет само собой, и список авторов Nuggets 2021 начнет попадать в список!

Пожалуйста, подвигайте мизинцами и проголосуйте за нас. Ваша поддержка является самой большой движущей силой для нас, чтобы двигаться вперед,

веб-запись:нажмите на меня, чтобы проголосовать
Вход в приложение: прокрутите статью до верха, а затем следуйте картинке ниже↓

работы с открытым исходным кодом

Zhengcaiyun интерфейсный таблоид

адрес с открытым исходным кодомwww.zoo.team/openweekly/(На главной странице официального сайта таблоида есть группа обмена WeChat)

Плагин выбора товара

адрес с открытым исходным кодомGitHub.com/Chinese Patent Medicine-Inc/Reservoir…

Карьера

ZooTeam, молодая, увлеченная и творческая команда, связанная с отделом исследований и разработок продукции Zhengcaiyun, базируется в живописном Ханчжоу. В настоящее время в команде более 60 фронтенд-партнеров, средний возраст которых составляет 27 лет, и почти 40% из них — инженеры полного стека, настоящая молодежная штурмовая группа. В состав членов входят «ветераны» солдат из Ali и NetEase, а также первокурсники из Чжэцзянского университета, Университета науки и технологий Китая, Университета Хандянь и других школ. В дополнение к ежедневным деловым связям, команда также проводит технические исследования и фактические боевые действия в области системы материалов, инженерной платформы, строительной платформы, производительности, облачных приложений, анализа и визуализации данных, а также продвигает и внедряет ряд внутренних технологий. Откройте для себя новые горизонты передовых технологических систем.

Если вы хотите измениться, вас забрасывают вещами, и вы надеетесь начать их бросать; если вы хотите измениться, вам сказали, что вам нужно больше идей, но вы не можете сломать игру; если вы хотите изменить , у вас есть возможность добиться этого результата, но вы не нужны; если вы хотите изменить то, чего хотите достичь, вам нужна команда для поддержки, но вам некуда вести людей; если вы хотите изменить установившийся ритм, это будет "5 лет рабочего времени и 3 года стажа работы"; если вы хотите изменить исходный Понимание хорошее, но всегда есть размытие того слоя оконной бумаги.. , Если вы верите в силу веры, верьте, что обычные люди могут достичь необыкновенных вещей, и верьте, что они могут встретить лучшего себя. Если вы хотите участвовать в процессе становления бизнеса и лично способствовать росту фронтенд-команды с глубоким пониманием бизнеса, надежной технической системой, технологиями, создающими ценность, и побочным влиянием, я думаю, что мы должны говорить. В любое время, ожидая, пока вы что-нибудь напишете, отправьте это наZooTeam@cai-inc.com