如何调试React外接程序

Question

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

我使用了来自yo office工具的generator-office命令，使用React和Excel作为选项。我能够在本地服务，并在教程之后做副业广告.在此之后，我在代码中添加了console.log(props)，以刺激它，但在任何地方都找不到输出( console、边缘控制台、powershell或Excel本身)。我遵循了关于如何将Visual调试器附加到进程的说明，但这一点都不起作用(我在前面的问题中已经描述过了)。然后，我转到Visual代码，希望Microsoft自己的工具能够调试另一个Microsoft工具生成的项目。然而，情况似乎并非如此。

一开始，调试器根本不会运行，说它找不到要运行的程序。我四处搜索，发现了一些文件关于如何更改类型记录项目的launch.json和tsconfig.json。之后，在launch.json中将错误更改为“不允许属性外部文件”，以及VSCode控制台中的以下错误：

node_modules/@microsoft/office-js-helpers/dist/office.helpers.d.ts:628:10 - TS1319:默认导出只能在ECMAScript样式的模块中使用. 628导出默认函数stringify(值: 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. 去Console标签。
3. 在右边的角落，你会发现Settings图标。点击它。
4. 检查选项中的Preserve Log并刷新页面。

你应该能看到日志。

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

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