Как отладить надстройку React - PullRequest
Новая
       12

Как отладить надстройку React

2 голосов
/ 14 марта 2019

Я пытаюсь начать разработку add-i для внутреннего использования, но у меня много трудностей даже с console.log вещами.Я задал предыдущий вопрос здесь .

Я использовал команду yo office из инструмента generator-office с React и Excel в качестве параметров.Я смог обслуживать локально и загружать надстройку, следуя инструкции .После этого я добавил console.log(props) к коду, чтобы немного его подтолкнуть, но нигде не смог найти вывод (консоль Chrome, консоль Edge, powershell или сам Excel).Я следовал инструкциям о том, как подключить отладчик Visual Studio к процессу, но это не сработало вообще (описано в моем предыдущем вопросе).Затем я перешел к Visual Studio Code, надеясь, что собственный инструмент Microsoft сможет отладить проект, созданный другим инструментом Microsoft.Однако, похоже, это не так.

Сначала отладчик вообще не запускается, говоря, что не может найти программу для запуска.Я искал вокруг и нашел некоторую документацию о том, как изменить launch.json и tsconfig.json для проектов Typescript.После этого ошибка была изменена на «Свойство outfiles не разрешено» в файле launch.json, а также в консоли VSCode::

node_modules / @ microsoft / office-js-helpers / dist/office.helpers.d.ts:628:10 - ошибка TS1319: экспорт по умолчанию можно использовать только в модуле в стиле ECMAScript.

628 функция экспорта по умолчанию stringify (значение: любое): строка;

Ниже приведен код:

launch.json: 

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/index.tsx",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outfiles": [
                "${workspaceFolder}/out/**/*.js"
            ]
        }
    ]
}

tsconfig.json: 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "outDir": "out",
    "allowUnusedLabels": false,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "lib": [
      "es7",
      "dom"
    ],
    "pretty": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

Я на Windows10.

Это действительно заставляет меня задуматься о разработке этого надстройки, поэтому, если у кого-то есть какие-либо предложения по поводу отладки или просто отображения содержимого console.log, я был бы очень признателен.

1 Ответ

0 голосов
/ 19 марта 2019

Можете ли вы попробовать запустить приложение в Chrome и выполнить следующие шаги:

  1. Щелкните правой кнопкой мыши на странице проекта и нажмите Inspect
  2. Перейти на вкладку Console.
  3. В правом углу вы найдете значок Settings. Нажмите на нее.
  4. Отметьте Preserve Log в настройках и обновите страницу.

Вы должны увидеть журналы.

Примечание. Если вы не можете найти его в списке, сгенерированном WDS, вы можете использовать функцию filter для поиска логов.

Используйте console.log('props content', props); и введите props content в поле console -> filter.

...