如何调试React插件

Question

我正在尝试开始开发内部使用的add i，但是即使在console.log方面也遇到很多困难。 我在这里问过一个先前的问题。

我使用了generator-office工具中的yo office命令，将React和Excel作为选项。 我可以在本地提供服务，并按照本教程的要求来加载该加载项。 之后，我在代码中添加了console.log(props)以便对其进行处理，但是在任何地方（Chrome控制台，Edge控制台，powershell或Excel本身）都找不到输出。 我遵循了有关如何将Visual Studio调试器附加到该过程的说明，但这根本没有用（在我的上一个问题中进行了描述）。 然后，我转到Visual Studio Code，希望Microsoft自己的工具能够调试另一个Microsoft工具生成的项目。 但是，事实似乎并非如此。

最初，调试器根本不会运行，并说它找不到要运行的程序。 我四处搜寻，并找到了一些有关如何更改Typescript项目的launch.json和tsconfig.json的文档。 之后，错误在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
}

我在Windows 10上。

这确实使我回到了此外接程序的开发上，因此，如果有人对如何进行调试或仅显示console.log的内容有任何建议，我将非常感谢。

Answer 1

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

1. 右键单击项目页面，然后单击Inspect
2. 转到Console选项卡。
3. 在右上角，您会找到Settings图标。 点击它。
4. 从选项中检查“ Preserve Log ”并刷新页面。

您应该能够看到日志。

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

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