如何调试React加载项

Question

我正在尝试开发一个内部使用的添加i，但即使是console.log，我也遇到了很多困难。我问过前一个问题here。

我使用yo office工具中的generator-office命令，使用React和Excel作为选项。我能够在本地服务并在tutorial之后加载加载项。之后，我将console.log(props)添加到代码中以刺激它，但无法在任何地方找到输出（Chrome控制台，Edge控制台，PowerShell或Excel本身）。我按照说明如何将Visual Studio调试器附加到进程，但根本不起作用（在我之前的问题中描述）。然后我转到Visual Studio Code，希望Microsoft自己的工具能够调试由另一个Microsoft工具生成的项目。但是，情况似乎并非如此。

起初，调试器根本不会运行，说它无法找到要运行的程序。我四处搜索，发现some documentation如何改变Qazxswpoi和launch.json for Typescript项目。之后，在launch.json中将错误更改为“不允许使用Property outfiles”，以及VSCode控制台中的以下内容：

node_modules/@microsoft/office-js-helpers/dist/office.helpers.d.ts:628:10 - 错误TS1319：默认导出只能在ECMAScript样式的模块中使用。

628 export default function stringify（value：any）：string;

下面是一些代码：

tsconfig.json：

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

我在Windows 10上。

这真的让我回到了这个加入的开发，所以如果有人对如何进行调试或只是显示

{
  "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
}

的内容有任何建议我会非常感激。

Answer 1

您可以尝试在chrome中运行应用程序并执行以下步骤：

1. 右键单击项目页面，然后单击console.log
2. 转到Inspect标签。
3. 在右角，你会发现Console图标。点击它。
4. 从选项中检查Settings并刷新页面。

您应该能够看到日志。

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

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