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

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

Я использовал команду yo office из инструмента generator-office с параметрами React и Excel. Я смог обслуживать локально и загрузить надстройку после руководство. После этого я добавил console.info(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 - error TS1319: A default export can only be used in an ECMAScript-style module.

628 export default function 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.info, я был бы очень признателен.

Ваша конфигурация не похожа на отладчик для конфигурации Chrome. У вас установлен отладчик хрома? Вы пробовали отлаживать прямо в Chrome?

Leon 22.03.2019 05:16

Я быстро посмотрел, если вы использовали генератор йо для запуска своего проекта, он использует React с веб-пакетом. Отладка непосредственно в Chrome или Firefox должна работать

Leon 22.03.2019 05:29

Привет @Леон. Я должен извиниться за то, что так долго не возвращался к этому вопросу, но я был занят другими делами. Я в замешательстве: открытие localhost: 3000 в браузере показывает выходные данные на консоли, да, но код ведет себя по-разному, если вы находитесь в приложении Office или нет. Например, в Excel кнопка отображается и при нажатии меняет цвет ячейки. Это поведение не происходит в браузере. Поэтому я не понимаю, как console.info для этого метода будет напечатан в консоли браузера. Не могли бы вы уточнить?

Tuma 26.03.2019 16:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
3
622
1

Ответы 1

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

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

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

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

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

Привет, мне очень жаль, что я не мог вернуться к этому вопросу раньше. Я проверил параметр сохранения журналов в настройках консоли Chrome, вывод не изменился, а фильтрация реквизитов не дает никаких результатов. Я также не думаю, что это сработает, поскольку это приложение, отличное от Office, и сгенерированный проект в этом случае отличается.

Tuma 26.03.2019 15:48

Странно, я следовал вашим советам, и у меня все получилось.

Sathvik Chinnu 01.04.2019 04:14

Другие вопросы по теме