[英]How to debug a React add-in
I'm trying to start developing an internal-use add i, but I'm having a lot of difficulties to even console.log
things. 我正在尝试开始开发内部使用的add i,但是即使在
console.log
方面也遇到很多困难。 I have asked a previous question here . 我在这里问过一个先前的问题。
I used the yo office
command from the generator-office
tool, with React and Excel as options. 我使用了
generator-office
工具中的yo office
命令,将React和Excel作为选项。 I was able to serve locally and sideload the add-in following the tutorial . 我可以在本地提供服务,并按照本教程的要求来加载该加载项。 After that, I added
console.log(props)
to the code to prod into it a bit, but couldn't find the output anywhere (Chrome console, Edge console, powershell or Excel itself). 之后,我在代码中添加了
console.log(props)
以便对其进行处理,但是在任何地方(Chrome控制台,Edge控制台,powershell或Excel本身)都找不到输出。 I followed instructions on how to attach a Visual Studio debugger to the process but that didn't work at all (described in my previous question). 我遵循了有关如何将Visual Studio调试器附加到该过程的说明,但这根本没有用(在我的上一个问题中进行了描述)。 I then moved on to Visual Studio Code, hoping that Microsoft's own tool would be able to debug a project generated by another Microsoft tool.
然后,我转到Visual Studio Code,希望Microsoft自己的工具能够调试另一个Microsoft工具生成的项目。 That doesn't seem to be the case, however.
但是,事实似乎并非如此。
At first, the debugger would not run at all, saying it could not find a program to run. 最初,调试器根本不会运行,并说它找不到要运行的程序。 I searched around and found some documentation on how to change
launch.json
and tsconfig.json
for Typescript projects. 我四处搜寻,并找到了一些有关如何更改Typescript项目的
launch.json
和tsconfig.json
的文档。 After that, the error changed to "Property outfiles is not allowed" in launch.json, as well as the following in VSCode console: : 之后,错误在launch.json以及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.
node_modules/@microsoft/office-js-helpers/dist/office.helpers.d.ts:628:10-错误TS1319:默认导出只能在ECMAScript样式的模块中使用。
628 export default function stringify(value: any): string;
628导出默认函数stringify(值:任何):字符串;
Below is some code: 下面是一些代码:
launch.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
: 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
}
I'm on Windows 10. 我在Windows 10上。
This is really setting me back on the development of this add in, so if anyone has any suggestions on how to go about debugging or just displaying the contents of console.log
I would very much appreciate it. 这确实使我回到了此外接程序的开发上,因此,如果有人对如何进行调试或仅显示
console.log
的内容有任何建议,我将非常感谢。
Can you try running the application in chrome and do the following steps: 您可以尝试在chrome中运行该应用程序并执行以下步骤:
Inspect
Inspect
Console
Tab. Console
选项卡。 Settings
Icon. Settings
图标。 Click it. Preserve Log
from the options and refresh the page. Preserve Log
”并刷新页面。 You should be able to see the logs. 您应该能够看到日志。
Note: If you are not able to find it in the list generated by WDS
, you can use the filter
feature to find your logs. 注意:如果在
WDS
生成的列表中找不到它,则可以使用filter
功能来查找日志。
Use console.log('props content', props);
使用
console.log('props content', props);
and type props content
in the console -> filter
field. 并在
console -> filter
字段中输入props content
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.