Начинающие: Front-end программисты должны освоить базовые навыки — отладка кода JS.

внешний интерфейс JavaScript Vue.js
Начинающие: Front-end программисты должны освоить базовые навыки — отладка кода JS.

1. Введение

Привет всем, яВакагава. Добро пожаловать, чтобы следовать за мнойПубличный аккаунт Wakagawa Vision, недавно организованныйЧтение исходного кода, если вам интересно, вы можете добавить меня в WeChatruochuan12Участие продолжается уже три месяца, все вместе общались и учились, вместе добились прогресса, многие говорили, что многого добились.

Если вы хотите изучить исходный код, я настоятельно рекомендую то, что я написал ранее"Изучение серии "Общая архитектура исходного кода""ВключатьjQuery,underscore,lodash,vuex,sentry,axios,redux,koa,vue-devtools,vuex4,koa-compose,vue 3.2 发布,vue-this,create-vue,玩具viteБолее 10 статей исходного кода.

недавно организованныйЧтение исходного кода, Официальная учетная запись: Ruochuan Vision, ответьте на «исходный код», чтобы принять участие, каждый узнает около 200 строк исходного кода каждую неделю и вместе добивается прогресса. Часто есть мелкие партнеры, которые задают вопросы по отладке в группе WeChat, а написанные мной способы отладки в основном разбросаны по другим статьям. Итак, напишите статью об отладке. Кроме того, в будущем вы можете писать меньше статей, связанных с отладкой, просто продолжайте обновлять эту статью.

Адрес склада этой статьи, спросите одинstar

Прочитав эту статью, вы узнаете:

1. 学会基本调试技能

2. Рекомендуется установить или обновить VSCode до последней версии.

Официальный сайт скачать и установитьVSCode.

если вашVSCodeНе китайский (не привык к английскому), можно установитьУпрощенный китайский плагин.
еслиVSCodeДля этого нет функции отладки. Рекомендуется обновить до последней версииVSCode(Последняя версияv1.62.2).

3. Настройте автоматическое прикрепление

VSCodeСуществует множество способов отладки JS, но в настоящее время рекомендуется тот, который не требует настройки.auto-attach.

По умолчанию настройка не требуется, очень прост в использовании

согласно сctrl + shift + p, открытый ввод>auto attach. По умолчанию смарт(smart). Если нет, вы можете просмотреть настройки как умные или установить другие в соответствии со сценой.

auto attach

默认智能

Для получения дополнительной информации ознакомьтесь с официальной документацией:nodejs-debugging

4. Отладка кода Node.js

Я специально создал новый репозиторий. Читателям для практики.

git clone https://github.com/lxchuan12/nodejs-debugging.git
cd nodejs-debugging
# npm i -g yarn
yarn install

Вообще говоря, изpackage.jsonзапись просмотра файла, гдеmainВ поле будет указано, что такое входной файл. Посмотреть одновременноscriptsфайл сценария.

Как правило, точки останова устанавливаются в файле входа заранее.

4.1 Режим отладки

Метод работы 1: package.json

существуетpackage.jsonнайти соответствующийscripts. Наведите указатель мыши на соответствующую команду, и она появится运行命令а также调试命令два варианта, выбирай调试命令для входа в режим отладки. или нажмитеscriptsнад调试, а затем выберите соответствующую команду. Вы также можете войти в режим отладки.

选择调试模式

Режим работы 2: Терминальная команда

Откройте терминал с помощью сочетания клавиш Ctrl + ` обратная кавычка. или через查看 —— 终端ОткрытьVSCodeТерминал.

Перейдите в каталог в терминале. Выполните соответствующий скрипт.

VSCodeОн автоматически войдет в режим отладки. Как показано ниже:

VSCode 调试源码

Далее, давайте посмотрим на введение кнопки.

4.2 Знакомство с кнопкой отладки

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

    1. Продолжить (F5): после нажатия код будет выполняться непосредственно до следующей точки останова.Если следующей точки останова нет, считается, что текущее выполнение кода завершено.
    1. Пропуск одного шага (F10): после нажатия выполняется переход к следующей строке текущего кода для продолжения выполнения, и функция не запускается.
    1. Пошаговая отладка (F11): нажмите, чтобы войти во внутреннюю отладку текущей функции, например, вfnВыполните пошаговую отладку в этой строке, и вы войдете вfnОтладка внутри функции.
    1. Выход (Shift + F11): нажмите, чтобы выйти из текущей отлаживаемой функции, что соответствует одноэтапной отладке.
    1. Перезагрузите (Ctrl + Shift + F5): как следует из названия.
    1. Разорвать ссылку (Shift + F5): как следует из названия.

VSCode 调试 Node.js 说明

Когда отладка приходит к файлу, который не тот, который вы хотите видеть (или когда это вообще не файл в этом каталоге), вы можете выбрать кнопку одноэтапного выхода или выполнить повторную отладку.

5. Другая отладка

Поскольку многие проекты настроены на сжатие кода, его сложно отлаживать. Поэтому в среде разработки он обычно генерируется конфигурацией.sourcemapдля отладки кода. Большинство проектов с открытым исходным кодом (например, исходный код vue, vue-next) также объясняют, как его открыть в руководстве по вкладу.sourcemap.

обычныйwebpackнастроить

devtool: 'source-map',

отладкаvue-cli 3+сгенерированный проект.

Отладка официального документа Vuejs

// vue-cli 3+
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

chromeОтладочный код на самом деле похож. существуетchrome devtoolsизsourceПанель находит соответствующий файл, переходит к точке останова и выполняет отладку.

6. Другие справочные ссылки

Как отлаживать код, см. следующие справочные ссылки, вы можете изучить его с помощью практических упражнений, и Node.js аналогичен.

Навыки отладки отладчика, которые легко упустить из виду во внешнем интерфейсе

Курс отладки МООК

брошюра Nuggets без хрома

Начало работы с отладкой nodejs на MOOC

7. Резюме

В статье более подробно описаноVSCodeотладкаNode.jsБазовые навыки отладки кода,ChromeОтладочный код на самом деле похож.Отладка кода — базовый навык для фронтенд-программистов, которым необходимо овладеть. Организовал деятельность по чтению исходного кода и обнаружил, что многие люди не знают или не знакомы с ним. Я был очень удивлен. Так напишите эту статью, чтобы поделиться с читателями.

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

git clone https://github.com/lxchuan12/nodejs-debugging.git
cd nodejs-debugging
# npm i -g yarn
yarn install

Наконец, вы можете продолжать следовать за мной @ Ruo Chuan. добро пожаловать, чтобы добавить меня wechatruochuan12общаться, участвоватьЧитайте исходный код вместеДействия, все вместе изучают исходный код и вместе добиваются прогресса.

О группе && Exchange

недавно организованныйЧтение исходного кода, если вам интересно, вы можете добавить меня в WeChatruochuan12Участвуйте в долгосрочном обмене и обучении.

Автор: Чанг ИВакагаваНазвание смешано в реках и озерах. добро пожаловать, чтобы добавить меня wechatruochuan12. По дороге на фронт | Знаю очень мало, только хорошо учусь.
Обратите внимание на паблик аккаунта Ruochuan Vision, Изучайте исходный код вместе каждую неделю, учитесь читать исходный код и переходите к расширенному интерфейсу.
Блог Вакагавы
segmentfaultКолонна Вакагава Видение, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
Колонка самородков, добро пожаловать, обратите внимание~
Колонна видений Чжиху Руочуань, открылВидение ВакагаваКолонка, добро пожаловать на внимание ~
github blog, спроситьstar^_^~

Категории