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

Я пытаюсь начать разработку надстройки для внутреннего использования, но у меня много трудностей даже с 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. проекты. После этого в launch.json ошибка изменилась на "Property outfiles is not limited", а в консоли VSCode на следующее:

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

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

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

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
}

Я на Виндовс 10.

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


person Tuma    schedule 14.03.2019    source источник
comment
Ваша конфигурация не похожа на отладчик для конфигурации Chrome. У вас установлен отладчик хрома? Вы пробовали отлаживать прямо в Chrome?   -  person Leon    schedule 22.03.2019
comment
Я быстро посмотрел, если вы использовали генератор йо для запуска своего проекта, он использует React с веб-пакетом. Отладка непосредственно в Chrome или Firefox должна работать   -  person Leon    schedule 22.03.2019
comment
Привет @Леон. Я должен извиниться за то, что так долго не возвращался к этому вопросу, но я был занят другими делами. Я в замешательстве: открытие localhost: 3000 в браузере показывает выходные данные на консоли, да, но код ведет себя по-разному, если вы находитесь в приложении Office или нет. Например, в Excel кнопка отображается и при нажатии меняет цвет ячейки. Это поведение не происходит в браузере. Поэтому я не понимаю, как console.log для этого метода будет напечатан в консоли браузера. Не могли бы вы уточнить?   -  person Tuma    schedule 26.03.2019


Ответы (1)


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

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

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

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

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

person Sathvik Chinnu    schedule 19.03.2019
comment
Привет, мне очень жаль, что я не мог вернуться к этому вопросу раньше. Я проверил параметр сохранения журналов в настройках консоли Chrome, вывод не изменился, а фильтрация реквизитов не дает никаких результатов. Я также не думаю, что это сработает, поскольку это приложение, отличное от Office, и сгенерированный проект в этом случае отличается. - person Tuma; 26.03.2019
comment
Странно, я следовал вашим советам, и у меня все получилось. - person Sathvik Chinnu; 01.04.2019