0

I started work on my React add-in project for Excel yesterday and VSCode popped up with a recommendation to install 'Microsoft Office Add-in Debugger' extension. So I installed it, and ever since the lines in my console are not matching up to my VSCode console.log() lines....

Here's an example:

console.log not working

I'm not 100% the extension was the cause, however that was the last thing I remember doing before the issue started. I have since uninstalled the extension.

It seems like there is something going wrong in the compiling of the file .... but i'm not experienced enough to figure it out. Maybe a react expert will have some idea?

I've tried creating a new React project with yo office and the console log lines are fine.

Any help is seriously appreciated - debugging is a nightmare!! Thanks

Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
henry434
  • 97
  • 1
  • 9
  • Are you using a bundler like WebPack? Or a minifier? Either of those will change the line numbers so they no longer match the line numbers of the source files. – Rick Kirkham Nov 17 '22 at 18:54
  • Webpack I believe. I havent changed anything since creating the project with `yo` - quick update: i've just got home and the log lines are fine on my laptop – henry434 Nov 17 '22 at 19:11
  • React is not related to that. In the IDE you see a module while in the browser you deal with a bundled JS file generated from your modules. – Eugene Astafiev Nov 17 '22 at 23:16

1 Answers1

0

On the screenshot you see a log line in the module while in the web browser you deal the log line in the generated by the bundler (webpack) javascript file. In your IDE you deal with module that are bundled into a single JS file.

Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45