4

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.

Tuma
  • 603
  • 1
  • 7
  • 35
  • Your config does not look like debugger for Chrome config. Do you have the chrome debugger installed? Have you tried debugging directly in Chrome? – Leon Mar 22 '19 at 04:16
  • 1
    I had a quick look, if you used the yo generator to start your project it is using React with webpack. Debugging directly in Chrome or Firefox should work – Leon Mar 22 '19 at 04:29
  • Hi @Leon. I have to apologize for taking so long to get back to this question, but I was busy with other things. I'm confused: opening localhost:3000 on a browser shows outputs on the console, yes, but the code behaves differently if you're in an Office app or not. E.g., On Excel, a button is rendered and when pressed, changes the color of a cell. This behavior doesn't happen on a browser. So I don't see how a console.log on that method would be printed on a browser console. Could you elaborate? – Tuma Mar 26 '19 at 15:25
  • 1
    Did you ever fix this? I have had the same problem for years with the office.helpers.d.ts file. All I do is open the file in node_modules and then delete the "default". The file has not been updated in many years so this little workaround fixes it...sort of – JimbobTheSailor Sep 13 '22 at 04:59

1 Answers1

0

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.

Sathvik Chinnu
  • 565
  • 1
  • 7
  • 23
  • Hi, I'm really sorry I couldn't get back to this question earlier. I checked the preserve logs option on Chrome's console settings, the output didn't change, and filtering for props doesn't show any results. I also don't think it will work, since it's a non-Office application and the generated project differently in that case. – Tuma Mar 26 '19 at 14:48
  • Strange, I followed your steps and it worked out for me. – Sathvik Chinnu Apr 01 '19 at 02:14