Для отладки javaScript (react JS) доступно множество методов отладки. Вкладки консоли и сети уже доступны в браузере Chrome или Chrome. И, кроме того, расширение браузера React Developer tools также доступно для отладки и реагирования. Но отладка с помощью техники критической точки очень мощна и проста. Это правильный метод отладки. Итак, этот метод сделает вас сильным разработчиком reactJs. Хорошо, вы готовы стать настоящим инженером?
Предварительно требования
Перед тем, как перейти к настройке. Вам нужна JetBrain IDE. WebStorm - это самая умная среда разработки JavaScript на базе JetBrain. Это интеллектуальное автозавершение кода, обнаружение ошибок на лету, мощная навигация и рефакторинг для JavaScript. Для браузера вам необходимо установить Chrome или Chromium.
Установите расширение JetBrain для Chrome
Для начала вам нужно установить расширение JetBrain chrome. Вы можете установить, нажав эту ссылку. Нажав кнопку ДОБАВИТЬ В ХРОМ, вы можете установить расширение.
После установки расширения вы можете увидеть расширение JetBrain, доступное в правом верхнем углу браузера.
Изменить конфигурацию отладки в WebStorm
Вам необходимо отредактировать конфигурацию WebStorm. Перейдите в меню Выполнить - ›Изменить конфигурацию. Откроется окно конфигурации отладки. Затем Добавить (+) - ›Отладка JavaScript. Затем добавьте http: // localhost: 3000 / в поле URL. Если ваша среда IDE - WebStorm 2017.1 или 2017.2, вам не нужно выполнять дополнительную настройку. Также необходимо настроить сопоставление между файлами в файловой системе и путями, указанными в исходных картах на сервере разработки. Это необходимо, чтобы помочь WebStorm правильно разрешить исходные карты.
Сопоставление выполняется между папкой src и webpack: /// src.. Перед src добавьте удаленный URL как «webpack : /// src ».
Также вам необходимо отобразить файл index.js. Добавьте удаленный URL как «webpack: ///src/index.js». После этих двух сопоставлений вы можете нажать кнопки «Применить» и «ОК».
Разместите точки разрыва
После настройки нам нужно перейти к отладке. Перед этим вы должны сделать две вещи. Сначала вам нужно перезапустить IDE web-storm. Во-вторых, вам нужно запустить веб-приложение, которое вы хотите отладить (npm start).
Вы можете поставить точки останова в код, который хотите отладить, в определенной строке. Просто нажмите правую сторону маркера красного цвета с номером строки, видимого в месте, которое является точкой разрыва.
Начать отладку
Теперь вы готовы к отладке кода со строчкой № 72. Для отладки нажмите кнопку отладки, доступную на панели инструментов. Или вы можете нажать Shift + F9 для отладки.
Когда вы нажимаете кнопку отладки, ваше веб-приложение открывается в браузере с новой вкладкой с «« Поддержка JetBrains IDE »для отладки этого браузера. ”панель.
Когда ваш код будет выполняться до точки останова. Каждый раз, когда достигается точка разрыва, браузер «зависает». Веб-шторм внезапно запускается и на дисплее отображаются значения, состояние и свойства на данный момент.
Вы можете заметить, что строка 72 выделена, а панель отладки обновлена, чтобы отразить стек вызовов. Под изображением this.state, this.state.searchReq, this.props также возражают. Подробный вид появится на панели отладки.
Если панель отладки не отображается, щелкните значок отладки в нижней части IDE и выберите вкладку отладки. На панели отладки отображаются значения на данный момент в точке останова. На этом рисунке он отображает значения «nextProps», «this.state», «this.state.searchReq» в подробном представлении. Вы можете исследуйте стек вызовов и переменные, пошагово выполняйте код, оценивайте переменные и другие вещи при нормальной отладке.
Ибо дополнительно Если вы поместите точку останова в цикл или среагируете на методы жизненного цикла. эта отладка приостанавливается в первый раз. Вы можете нажать кнопку Возобновить программу и увидеть следующий шаг цикла или отреагировать на методы жизненного цикла. Например, метод incomponentWillReceiveProps(nextProps), nextProps может не сработать при первой загрузке, мы получим все реквизиты для нажатия кнопки возобновления программы, указывающей, сколько раз будет выполняться этот метод.
Есть кнопка Выполнить до курсора, чтобы пропустить точку останова и перейти к следующей точке. Также некоторые другие кнопки, доступные на панели отладки, позволяют глубоко перейти к методам и функциям и вернуться.
Вот и все. Я надеюсь, что вы должны иметь четкое представление о настройке и отладке в webStorm с точки зрения критических моментов. Это поможет сделать ваш код идеальным. увидимся с другим блогом.
Круто !!! Включен режим отладки!
См. Еще один мой блог Введение в отладку React JS
