Отладчик кода Visual Studio Chrome не устанавливает точки останова внутри функции генератора в React - PullRequest
Новая
       62

Отладчик кода Visual Studio Chrome не устанавливает точки останова внутри функции генератора в React

0 голосов
/ 01 июня 2018

Я использую последнее расширение Visual Studio Code и Chrome отладчика, и мой код - React SPA.
Когда я пытаюсь установить точки останова внутри функций генератора (то есть функции *), точка остановапереместился в начало функции и не могу остановиться когда захочу.

Step Over также не работает, но перенесите меня в некоторую низкоуровневую библиотеку.

Для нормальных функций точки останова работают правильно.

Я что-то упустил?Это известное ограничение или ошибка?Есть ли какие-либо инструменты (например, Edge / Firefox или нативный отладчик Chrome), которые позволяют лучше отлаживать функции генератора?

Ответы [ 2 ]

0 голосов
/ 24 апреля 2019

Благодаря Ответу Бернарда Лича я обновил файл конфигурации .babelrc (один из возможных форматов, как описано в https://babeljs.io/docs/en/configuration).
, и он позволял устанавливать точки останова в среде разработчика.

Измененные строки в .babelrc закомментированы: 

{
    "presets": [
      //[
      // "es2015",
      // {
      //   "modules": false
      // }
      //],
      "react",
      "stage-0"
    ],
    "env": {
      "test": {
        "presets": ["react"]
       "prod": {
        "presets": [["es2015"], "react"]
      }
    }
  }

Чтобы использовать разные конфигурации для dev и prod, вы должны установить, например, BABEL_ENV = prod и иметь разные разделы в элементе «env» (из *)1010 * Как настроить babel для работы с разными конфигурациями в разных средах )

Ссылки по теме:
Как отлаживать ES6 NodeJS с помощью VSCode
Отладка с помощью babel-register + NodeJs не работает # 5728

0 голосов
/ 10 декабря 2018

В настоящее время я вижу то же самое и ищу решение.Это то, что я нашел до сих пор, и может быть полезно.

В нашем случае мы используем babel для переноса нашего кода, и, глядя на код, созданный babel, мы видим, что генераторы переносятсядля браузеров, на которые нацелен список браузеров, прочитайте @babel/preset-env.Итак, в качестве начального теста мы удалили @babel/preset-env из нашей сборки dev и протестировали локально в Chrome 70. Генераторы больше не переносились, и мы могли успешно устанавливать точки останова в VSCode.

Таким образом, для нас решение заключалось в том, чтобы не переносить для сборок dev, а переносить для наших целевых браузеров для производственных сборок.

Для справки, вот конфигурация babel, которую мы использовали для тестирования этого решения: 

module.exports = {
  presets: [
    '@babel/preset-react'
  ],
  plugins: [
    [
      '@babel/plugin-proposal-object-rest-spread',
      {
        useBuiltIns: true
      }
    ],
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-modules-commonjs'
  ],
  env: {
    production: {
      presets: [
        [
          '@babel/preset-env',
          {
            debug: false,
            useBuiltIns: 'usage'
          }
        ]
      ],
      plugins: [
        '@babel/plugin-transform-runtime'
      ]
    }
  }
}

Мы можем установить BABEL_ENV=production в любых производственных сценариях npm, для которых мы хотим ориентироваться на поддерживаемые браузеры. 

{
  "name": "testapp-ui",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rm -rf dist && mkdir dist && NODE_ENV=production BABEL_ENV=production npm run build:webpack",
    "build:dev": "rm -rf dist && mkdir dist && NODE_ENV=development npm run build:webpack",
    "build:webpack": "webpack --progress --debug",
    ...
...