如何調試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 。