Отладка современных клиентских приложений с помощью WebStorm

[Время]: 30.10.2019
[ключевое слово]: интерфейс, веб-шторм

Хотя отладка Chrome DevTools уже достаточно хороша, есть несколько вещей, которые меня не устраивают:

нужно писать вручнуюdebuggerНе могу напрямую прервать точку (если вы едете на eslint, это место автомобильной аварии, это сложно)

Неудобно видеть исходный код других файлов при отладке

Самое главное это конечно унифицированные сочетания клавиш (ошибся)

Эта статья относится кjetbrainsДругие домашние IDE, большинство источников контента взяты из webstrom.этот пост в блоге

Готов к работе

Установите плагин JavaScript Debugger, найдите плагины и выполните поиск JavaScript.
Установить для ChromeJetBrains IDE Supportрасширение.
Нажмите в правом верхнем углуAdd Configuration, затем всплываетRun/Debug Configurationsдиалоговое окно, нажмите+номер, выберите из спискаJavaScript Debug.

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

Пример: реагировать

Создайте приложение и запустите его

npx create-react-app my-app
cd my-app
npm start

Примечание. По умолчанию приложение будет работать на порту 3000. Если вы вручную зададите рабочий порт, вам также потребуется изменить следующий URL-адрес.

вновь открыть准备工作третий шаг, вURLВведите в один столбецhttp://localhost:3000И сохраните конфигурацию, и, наконец, щелкните значок, похожий на маленькую ошибку, чтобы начать отладку.

После входа в режим отладки приложение автоматически переходит в режим отладки, когда программа выполняется до точки останова в точке останова в среде IDE.

За исключением того, что React, Vue, Angular, Electron можно отлаживать, и шаги одинаковы.

Возможные проблемы и решения

После нажатия отладки ничего не происходит.
- Пожалуйста, убедитесь, что введен правильный URL-адрес отладки.
Chrome, открытый во время отладки, не является обычным Chrome, и в нем нет данных (следующие два пути были открыты с помощью Chromechrome://version/найти, см. приложение设置 chrome path 和 user_dataчасть)
- Причина 1: не задан правильный путь выполнения для chrome.
- Решение. Откройте страницу настроек IDE, найдитеTools\Web Browsers, найдите chrome, отредактируйте раздел пути и установите правильный путь.
- Первая возможная причина этой проблемы заключается в том, что user_data не установлен, chrome имеет данные user_data, IDE будет использовать user_data внутри IDE по умолчанию при запуске chrome, который запустит chrome вообще без данных.
- Решение. Откройте страницу настроек IDE, найдитеTools\Web Browsers, найдите хром, нажмите редактировать изображение справа, проверьтеUse custom user data directory, а затем введите правильный путь.
Новое окно открывается каждый раз при отладке.
- Причина этой проблемы в том, что когда IDE запускает хром, он добавит--remote-debugging-portПараметры запуска, если в это время запущен хром с тем же user_data, будет запущено новое окно хрома.
- Решение: сначала закройте хром, затем запустите его через IDE и используйте хром, запущенный IDE.

Используется в проектах, созданных vue-cli3+

существуетvue-cli3+Проект, созданный в среде разработки под webpack devtool,cheap-module-eval-source-map, это приведет к тому, что IDE не сможет найти местоположение файла, что приведет к сбою отладки.vue.config.jsизменен наsource-mapВот и все.

Создан в корневом каталоге проектаvue.config.jsфайл, не нужно создавать, если он уже существует
Исправлятьwebpack devtoolдля следующего кода (если читатель используетchainWebpackнастроитьwebpack, пожалуйста, ищите сами, если вы изменяетеwebpack 配置. )
```
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'development') {
            config.devtool = 'source-map';
        }
    }
};
```