Question

我正在尝试开始开发内部使用的add 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关于如何更改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（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中运行该应用程序并执行以下步骤吗？

右键单击项目页面，然后单击Inspect
转到Console标签。
在右上角，您会找到Settings图标。单击它。
从选项中选中Preserve Log，然后刷新页面。

您应该能够看到日志。

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

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

如何调试React插件

1 个答案: