How to debug a React add-in

Question

I'm trying to start developing an internal-use add i, but I'm having a lot of difficulties to even console.log things. I have asked a previous question here .

I used the yo office command from the generator-office tool, with React and Excel as options. 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). 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). 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. 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. After that, the error changed to "Property outfiles is not allowed" in launch.json, as well as the following in VSCode console: :

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;

Below is some code:

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
}

I'm on 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.

Answer 1

Can you try running the application in chrome and do the following steps:

1. Right Click on the project page and Click Inspect
2. Go to the Console Tab.
3. On the Right Corner, you will find Settings Icon. Click it.
4. Check Preserve Log from the options and refresh the page.

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.

Use console.log('props content', props); and type props content in the console -> filter field.