Способы отладки JS на клиенте

Автор: admin от 24-04-2017, 08:10, посмотрело: 455

Применительно к разработке на create-react-app (CRA) в браузере и в IDE WebStorm. Если вам известны какие-либо другие способы отладки, большая просьба поделиться знаниями.


Отладка внутри Chrome


После запуска приложения в браузере, нажмите [F12], чтобы открыть Chrome DevTools, потом переключитесь на вкладку Sources, нажмите [Ctrl+P], в строке поиска введите имя требуемого файла.


Способы отладки JS на клиенте


Благодаря Source Map, мы видим исходный JSX. Далее можно отметить нужную строчку кода, как точку останова, затем перегрузить страницу по [F5], и получить желаемое — инструмент отладки.


Способы отладки JS на клиенте


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


Способы отладки JS на клиенте


Иногда хочется отлаживать по старинке, с помощью console.log(). Можно получить значение переменной внутри JSX прямо в точке её применения.


[img]http://habrahabr.ru/{console.log([/img]

Как это работает: console.log() вернет undefined и код выполнится дальше по условию "||", а в консоли браузера мы увидим искомое значение, например: "/static/media/logo.5d5d9eef.svg".


Отладка внутри IDE WebStorm


Используется последняя версия 2017.1. Сначала нужно настроить окружение. Установите расширение Chrome — JetBrains IDE Support. Затем добавьте Run/Debug-конфигурацию.


Способы отладки JS на клиенте


Запустите CRA обычным образом, выполнив в терминале:


$ yarn start

Выберите конфигурацию Debug и нажмите кнопку с иконкой жука (в правом верхнем углу IDE):


Способы отладки JS на клиенте


Откроется браузер с предупреждением "JetBrains IDE Support отлаживает этот браузер". (Замечено, что если теперь открыть Chrome DevTools по [F12], то отладка в WebStorm завершится — не надо этого делать). Далее можно отметить нужную строчку кода, как точку останова, затем перегрузить страницу браузера по [F5], и получить желаемое — инструмент отладки внутри WebStorm.


Способы отладки JS на клиенте


Отладка тестов требует дополнительной настройки, потому как этот код не запускается в браузере. Установите глобально пакеты:


$ npm install -g babel-cli babel-preset-es2015

Затем добавьте ещё одну Run/Debug-конфигурацию.


Способы отладки JS на клиенте


Выберите конфигурацию Tests и нажмите кнопку с иконкой жука:


Способы отладки JS на клиенте


Ура, нам доступна отладка тестов.


Способы отладки JS на клиенте

Источник: Хабрахабр

Категория: Программирование / Веб-разработка

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent