What is the best debugging approach

[glenne]

What have people found useful for debugging client side code in dev mode? I've been using Console.log and internal logging but sorely miss being able to step thru code is vscode. Is this possible in dev mode?

[enuchi]

Was able to set it up to debug in the browser (Chrome) by adding source maps like this:

React-Google-Apps-Script/webpack.config.js

Line 238 in 18bbcb1

devtool: isProd ? 'none' : 'inline-source-map',

See 18bbcb1

This probably hurts performance (adds build time in dev) and there may be better ways to do it. Anyway if you open Chrome dev tools and open source like SheetEditor.jsx you can set breakpoints and see in scope variables etc.

There's probably a way to do it in vs code, just needs some configuration.

Let me know if you have any luck!

[glenne]

I tried this but React Dev Tools says 'This page doesn’t appear to be using React'. It recognizes other sites though so that part is working. I tried on a fresh clone from the repo as well including the same git version with your commit to no avail. Live reload works when I change a file.

I also found that the devtool option 'none' choked the build when deploying a production build. I changed it to

devtool: isProd ? undefined : 'inline-source-map',

I think I'm missing something as the Sources tab doesn't show source files like SheetEditor.jsx.

I'm using

npm run start

[enuchi]

Ah thanks for that -- didn't try the prod build version but wanted to make sure it was clear source maps aren't needed for prod.

If you go to the Sources tab and search for "sheeteditor" (command-P on Mac) it should show up. Make sure the app is running. Showing the file path as it appears for me in the sidebar in case it's useful:

Also these steps are for debugging code and being able to set breakpoints / step through code. If you want to use the React Dev Tools setup it won't work out of the box because the app is loaded in an iframe and it can't detect the embedded react app. I give some info here on how to set up React Dev Tools using "standalone" mode: https://github.com/enuchi/React-Google-Apps-Script#-using-react-devtools-

[glenne]

That cleared things up considerably! Works as you describe now. Thanks.

[tomzacchia]

@enuchi did you have to make any changes to the webpack config to see code before its transpiled by the loaders?

I see the following in devtools

    // original
    useOnClickOutside(conversationListRef, () => {
      if (isDeleting) {
        setIsDeleting(false);
      }
    });
  
  // transpiled
    (0, useOnClickOutside_1["default"])(conversationListRef, function () {
        if (isDeleting) {
            setIsDeleting(false);
        }
    });

[enuchi]

Yes try adding the line above that @glenne shared:

devtool: isProd ? undefined : 'inline-source-map',

Add to the client config and try again?

[tomzacchia]

Yes try adding the line above that @glenne shared:

devtool: isProd ? undefined : 'inline-source-map',

Add to the client config and try again?

In addition to this, sourceMap: true needs to be enabled in tsconfig! I opened this PR #186