我正在尝试开始开发一个内部使用的 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
的内容有任何建议,我将非常感激
最佳答案
您能否尝试在 chrome 中运行该应用程序并执行以下步骤:
- 右键单击项目页面并单击
Inspect
- 转到
控制台
选项卡。 - 在右上角,您会找到
设置
图标。点击它。 - 从选项中选中
Preserve Log
并刷新页面。
您应该能够看到日志。
注意:如果您无法在 WDS
生成的列表中找到它,您可以使用 filter
功能来查找您的日志。
使用 console.log('props content', props);
并在 console -> filter
字段中键入 props content
。
关于reactjs - 如何调试 React 加载项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55162493/