• Главная
  • Контакты
Подписаться:
  • Twitter
  • Facebook
  • RSS
  • VK
  • PushAll
logo

logo

  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • За год
    • Положительные
    • Отрицательные
  • Сортировка
    • По дате (возр)
    • По дате (убыв)
    • По рейтингу (возр)
    • По рейтингу (убыв)
    • По комментам (возр)
    • По комментам (убыв)
    • По просмотрам (возр)
    • По просмотрам (убыв)
Главная
  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • Главная
  • Способы отладки JS на клиенте

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

23.04.2017 18:21
comerc 20 6400 Источник
Разработка веб-сайтов*, ReactJS*, JavaScript*

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


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


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



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



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



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


<img src={console.log('logo', logo) || logo} />

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


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


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



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


$ yarn start

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



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



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


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

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



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



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


Поделиться с друзьями
-->

Комментарии (20)


  1. SbWereWolf
    23.04.2017 22:40
    #10187746
    +1

    большое спасибо за туториал


  1. aon24
    23.04.2017 22:47
    #10187754
    +1

    Полезная информация.
    Вопрос к знатокам npm:
    существует ли возможность, работая в среде create-react-app, обращаться к другому серверу ( не localhost:3000) за реальными данными?
    Если нет, еще вопрос:
    можно ли в среде create-react-app создать не минимизированную версию?
    Что-то типа «npm run build», но чтобы потом можно было отлаживать.


    1. comerc
      23.04.2017 22:59
      #10187764
      +1

      существует ли возможность, работая в среде create-react-app, обращаться к другому серверу ( не localhost:3000) за реальными данными?

      Конечно. Посмотрите на мой фан-проект. Сервер живет по адресу localhost:9000 и разрешает обращаться к себе всем (Access-Control-Allow-Origin)


    1. vilozio
      24.04.2017 09:29
      #10188060
      +2

      В create-react-app используется webpack-dev-server, с ним можно перенаправлять запросы через proxy на бэкэнд сервер:
      https://webpack.js.org/configuration/dev-server/#devserver-proxy


      1. comerc
        24.04.2017 09:45
        #10188086

        Я использую axios для всех RESTful-запросов, определил в конфиге baseURL: https://github.com/mzabriskie/axios#request-config


        1. Tihon_V
          24.04.2017 10:31
          #10188140
          +1

          Я использую docker-контейнер с nginx в качестве прокси.

          Кусочек конфига
          if ($request_method = OPTIONS ) {
          add_header Access-Control-Allow-Origin "*";
          add_header Access-Control-Allow-Methods "GET, PUT, POST, DELETE, HEAD, OPTIONS";
          add_header Access-Control-Allow-Headers "Authorization";
          add_header Access-Control-Allow-Credentials "true";
          add_header Content-Length 0;
          add_header Content-Type text/plain;
          return 200;
          }


    1. justboris
      24.04.2017 10:28
      #10188132
      +1

      В Readme есть официальный способ.


      Добавляете в package.json секцию proxy, и все запросы, не возвращающие файлы, будут проксироваться на указанный адрес.


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


    1. justboris
      24.04.2017 10:29
      #10188136

      можно ли в среде create-react-app создать не минимизированную версию? Что-то типа «npm run build», но чтобы потом можно было отлаживать.

      А что не так с npm start?


  1. LastDragon
    24.04.2017 09:08
    #10188024
    +3

    Visual Studio 2017 прямо из коробки умеет аналогично JetBrains-у, только ставить вообще ничего не надо (2015 так-то тоже умеет, но нигде кроме IE оно у меня не заработало), единственное, консолька в самом браузере сильно удобнее чем в студии.


    1. comerc
      24.04.2017 09:51
      #10188096
      -3

      Отладка внутри WebStorm выигрывает против отладки в браузере.


      1. vba
        24.04.2017 11:50
        #10188286
        +1

        Отладка JS во всех продуктах JetBrains ужасно тормозит, точнее не сама отладка а обновление состояния переменных из шага в шаг. Да и что там выигрывает, не понятно, в браузере функционал даже побогаче будет.


        1. comerc
          24.04.2017 12:49
          #10188386

          Про всех не скажу, но WebStorm версии 2017.1 работает нормально. При том, что у меня не самая мощная машина на свете.


          Расстраивают тормоза Resolving Reference после перехода на Flow. Инспекцию по ESLint внутри WebStorm отключил — тоже тормозит, и в CRA прекрасно настроен вывод сообщений ESLint.


          Основной плюс, в моём представлении, что не нужно переключать контекст внимания. Ловишь ошибки там же, где их исправляешь.


  1. NafFiQ
    24.04.2017 09:28
    #10188052
    +1

    Спасибо за статью.
    Возник такой вопрос: как интегрировать тесты в create-react-app на jest с webstorm без команды eject?


    1. comerc
      24.04.2017 09:48
      #10188090

      Вы про запуск каждого теста по кнопке play напротив декларации теста в коде? Этого не пробовал еще настроить.


      1. NafFiQ
        24.04.2017 10:40
        #10188154
        +1

        Именно, ранее запускал тесты на karma.js в webstorm и понравилась подсветка сломанных тестов и быстрый переход. Очень помогает с рефакторингом.

        Поделитесь, как получится :)


  1. hamMElion
    24.04.2017 09:35
    #10188076
    +2

    Есть небольшое расширение для Chrome React Dev Tools — дополнительная вкладка Dev Tools Chrome. С ним отладка компонентов реакта в браузере становится сильно удобнее.
    А если вы решили использовать SPOT в виде Redux, то еще могу посоветовать вот это мега-расширение


    1. comerc
      24.04.2017 12:53
      #10188396

      Расшифруйте аббревиатуру SPOT, пожалуйста.


      1. hamMElion
        24.04.2017 22:36
        #10189352
        +2

        Впервые я эту аббревиатуру услышал от коллег-немцев, мне ее расшифровали как Single Point of Truth. А в англоговорящей среде это SSOT — Single source of truth. По-моему, не так красиво звучит, как SPOT, ну как уж где привыкли.


  1. Chaptykov
    24.04.2017 19:57
    #10189120
    +1

    Любопытно, что статья называется «Способы отладки JS на клиенте», а второй абзац уже начинается с «мы видим исходный JSX», вторая часть статьи называется «Отладка внутри IDE WebStorm».


    Так что из первой части получаем, что отлаживаем не совсем JS, а из второй, что не совсем на клиенте.


    1. comerc
      25.04.2017 10:24
      #10189776

      Палка о двух концах. Способы отладки клиентского JS — как-то не очень звучит.

МЕТКИ

  • Хабы
  • Теги

Разработка веб-сайтов

ReactJS

JavaScript

вискас

СЕРВИСЫ
  • logo

    CloudLogs.ru - Облачное логирование

    • Храните логи вашего сервиса или приложения в облаке. Удобно просматривайте и анализируйте их.
Все публикации автора
  • Или Meteor +3

    • 02.08.2017 12:00

    10 шагов настройки Create React App + TypeScript + Ant-Design +7

    • 31.07.2017 16:00

    Redux Business Logic +7

    • 02.07.2017 21:25

    Интеграция React и DataTables — не так тяжело, как рекламируют +8

    • 10.06.2017 14:30

    Перевод доклада про mobx-state-tree — всё лучшее из миров Redux и MobX +4

    • 22.05.2017 10:50

    Почему программисты не могут программировать +12

    • 17.05.2017 09:02

    2017: Автостопом по галактике JavaScript +41

    • 13.05.2017 18:00

    Быстрый старт на React Native +6

    • 01.05.2017 02:01

    Загрузка данных из REST API +10

    • 26.04.2017 10:10

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

    • 23.04.2017 18:21

Подписка


ЛУЧШЕЕ

  • Сегодня
  • Вчера
  • Позавчера
08:28

Книга: «Мозг против мозга. Mind vs brain» +10

07:00

Раннее тестирование или как сократить время деливери +10

07:53

Google I/O 2025: Gemini, Google Beam, умные очки и другие ключевые анонсы +8

06:00

Lokilizer — бесплатный инструмент для перевода приложений с двух языков на любые другие +8

07:01

ИИ заменит или изменит программистов? Техлиды рассказали правду +7

05:41

Вот так подкрути геймификацию и мотивация болеть не будет +7

08:05

Сотворение мира за 20 минут на JavaScript, или минималистичная модель эволюции +6

06:44

Краткая история банкоматов 90-х: как выглядели и работали первые банкоматы в России +6

07:56

Сравнение технологий PKI и FIDO для задач аутентификации +5

04:49

Техдолг: симптомы, диагностика и лечение +5

08:15

Гарантирует ли техническая грамотность аудитории верную оценку инноваций или как Хабр USB-С хоронил +4

07:50

Скучная правда про LLM: эффект дают не громкие слова, а простые сценарии с очевидной ценностью +4

07:28

Файл вместо приложения: локальный тренд или глобальная перспектива? +4

07:15

Как я запускал стартап в Германии в 2024 году +4

08:36

Как написать понятный всем отчёт: под капотом Allure Report +3

08:25

Flame-графики Doom для GPU +3

08:22

Почему привычные модели продаж не работают в Saas +3

00:27

Нейросети как консультант: как я нашел и заказал ПК без подсветки для локальной работы с ИИ +3

09:00

Игровые провалы российских компаний: учимся на ошибках Lada Racing Club и The Day Before +2

08:08

Современные форматы изображений или почему мы до сих пор на JPEG? +2

09:01

Георгий Герганов, автор llama.cpp и звукового кейлогера +72

08:26

Измеритель силы хвата. Когда реально переоценил свою силу +67

13:01

Ходим в Интернет с отключённым IPv4 +46

11:03

VPS сервер по цене пачки чипсов: обзор самых дешёвых тарифов российских хостеров +44

15:01

Получит ли Россия свой Starlink +35

09:15

Программируем квадрокоптер на STM32 +32

12:30

Как настроить синхронизацию в Obsidian с помощью S3 +28

04:57

Илон Маск создал новую партию, а Цукерберг продолжает повышать ставки в битве за AI-таланты +24

10:27

KoboldCpp — нейросеть для развлечений и работы у нас дома +19

17:03

Изучение Python за 2 недели через боль и дедлайн: личная история +16

16:07

Проект выходного дня: экранные линейки +16

08:00

Новое в контроллерах Bitrix Framework: фильтры и валидация +16

06:45

Интеграция Flutter Mobile SDK в ОС Аврора +14

11:10

Почему разработчики не делают «по уму», даже когда знают как +13

11:35

Эмпатия: мощный ресурс руководителя в IT +12

12:15

Введение в WebRTC +11

08:41

Странная физика, которая дала жизнь искусственному интеллекту +11

06:58

Портативное железо 2025: подборка новых мини-ноутбуков для работы и отдыха +11

16:03

Что такое «температура» и ряд других занятных фактов около +10

12:00

Как Android-разработчик в iOS погружался: мой опыт внедрения Kotlin Multiplatform +10

11:30

Я 10 лет искал причину головной боли, оказалось — чипсы +167

20:06

VHS-Decode — новый метод оцифровки видео +128

09:01

Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда? +117

19:05

Компьютерные сети для начинающих +51

11:15

Мы — не семья: как компании заставляют тебя работать за идею и спасибо +41

08:12

Плотнее, быстрее, дешевле: керамические накопители Cerabyte бросают вызов LTO +36

13:01

Жизнь и смерть Карла Коха: первый хакер на службе КГБ в поисках всемирного заговора и тайны числа 23. Часть 9 — финал +35

08:00

От дефицита к ажиотажу: почему DDR4 снова в центре внимания… по тройной цене +28

13:49

Процессор на коленке ч.4. Конвейер +22

06:48

EngEasy.ru — моё приложение английского. Идея, процесс, технологии +22

06:15

Внедрение зависимостей в PHP: от основ до фреймворков +18

20:07

Оптимизация языковой модели Mamba для выполнения на CPU +16

14:05

Вы могли и не знать. Какие проекты делал Хидэо Кодзима помимо Metal Gear Solid и Death Stranding +15

15:00

Почему все ломается, или Зачем менеджеру в ИТ софт-скилы +12

07:56

Системное мышление: когда разработчик становится архитектором +11

16:43

В ReactOS заключен контракт для улучшения набора тестов +10

13:04

Изобретатель механического светофора: история Гаррета Моргана +10

11:13

Docker + Neovim: поднимаем конфиг на любом сервере и не засоряем систему +10

10:40

Как мы подняли современный портал документации из россыпи .md файлов: пошаговое руководство по MkDocs + Material +10

12:08

Деревья умеют выделять «дождеобразующие» вещества +8

ОБСУЖДАЕМОЕ

  • Тебе не поступить на программиста. Всё кончено -37

    • 584   125000

    Я 10 лет искал причину головной боли, оказалось — чипсы +167

    • 450   31000

    VHS-Decode — новый метод оцифровки видео +129

    • 119   12000

    Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда? +117

    • 93   23000

    Нейросети как консультант: как я нашел и заказал ПК без подсветки для локальной работы с ИИ +3

    • 64   3500

    Компьютерные сети для начинающих +51

    • 53   19000

    Получит ли Россия свой Starlink +35

    • 51   6700

    VPS сервер по цене пачки чипсов: обзор самых дешёвых тарифов российских хостеров +44

    • 49   12000

    Мы — не семья: как компании заставляют тебя работать за идею и спасибо +41

    • 38   8300

    Измеритель силы хвата. Когда реально переоценил свою силу +67

    • 35   4900

    Почему ваш ИИ превращается в ваше эхо: Гипотеза архитектурного слияния и как с этим бороться +5

    • 33   924

    EngEasy.ru — моё приложение английского. Идея, процесс, технологии +22

    • 32   5500

    Цифровая слежка: ищем человека, зная только его номер +6

    • 29   15000

    Изучение Python за 2 недели через боль и дедлайн: личная история +16

    • 28   2400

    Ходим в Интернет с отключённым IPv4 +46

    • 27   31000
  • Главная
  • Контакты
© 2025. Все публикации принадлежат авторам.