reactjs - 如何调试 React 加载项

Question

我正在尝试开始开发一个内部使用的 add i，但我在处理 console.log 事情时遇到了很多困难。我问过一个问题 here .

我使用了 generator-office 工具中的 yo office 命令，并选择了 React 和 Excel。我能够在本地提供服务并在 tutorial 之后旁加载加载项.之后，我将 console.log(props) 添加到代码中以对其进行一些检查，但无法在任何地方(Chrome 控制台、Edge 控制台、powershell 或 Excel 本身)找到输出。我按照有关如何将 Visual Studio 调试器附加到进程的说明进行操作，但这根本不起作用(在我之前的问题中有描述)。然后我转向 Visual Studio Code，希望微软自己的工具能够调试由另一个微软工具生成的项目。然而，情况似乎并非如此。

一开始，调试器根本不会运行，说找不到要运行的程序。我四处寻找，发现 some documentation关于如何为 Typescript 项目更改 launch.json 和 tsconfig.json。之后，在 launch.json 中错误更改为“Property outfiles is not allowed”，以及 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
}

我在 Windows 10 上。

这真的让我重新开始开发这个插件，所以如果有人对如何进行调试或只显示 console.log 的内容有任何建议，我将非常感激

Answer 1

您能否尝试在 chrome 中运行该应用程序并执行以下步骤:

1. 右键单击项目页面并单击Inspect
2. 转到控制台选项卡。
3. 在右上角，您会找到设置 图标。点击它。
4. 从选项中选中Preserve Log并刷新页面。

您应该能够看到日志。

注意:如果您无法在 WDS 生成的列表中找到它，您可以使用 filter 功能来查找您的日志。

使用 console.log('props content', props); 并在 console -> filter 字段中键入 props content。