VSCode Extendscript Debugger: Issues Debugging CEP Panel

[itsenouphoto]

Hi. I'm trying to set up debugging of the CEP panel in VSKCode instead of debugging in Chrome DevTools. In general it works, but when I run run debug "attach" request in VSCode something strange happens with styles and elements. Some text elements had broken style settings.

And the main - a white rectangle appears over part of the page after each launch. It disappears if I call some changes in styles through, for example, disabling some style in Chrome DevTools or in the JS script. 

But not everywhere. Sometimes I switch to another extension page and the rectangle is there too, and of a different size. Chrome DevTools displays it the same way when opening localhost, but does not allow you to select it as an element and does not display anything in the page code

Experimentally, it has been found that this happens if switching extension pages occurs by changing style.display from null to something else (flex in my case, but I tried a block and got the same result).
And the text becomes readable if I reset its font-family css to the default in Chrome DevTools (it is currently set as the @Blissful_help0D4E-face variable)

I set up launch.json like this (with some attempted changes hoping to fix this issue)
https://gist.github.com/zlovatt/da7376bd3a53519732fa8754d4959940

I would be very grateful if someone could tell me how to fix this.

[Bruce Bullis · Accepted solution]

The "ExtendScript" in the title is confusing; your post is about JavaScript debugging, and has nothing to do with ExtendScript, or the ExtendScript debugger. 🙂

I've never encountered or heard of the issue you're reporting; in case it's helpful, here are the debugging configurations I use to debug PProPanel, at both the ExtendScript and JavaScript levels.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "extendscript-debug",
            "request": "attach",
            "name": "Debug ExtendScript in PPro",
            "script": "${workspaceFolder}/jsx/PPRO/Premiere.jsx",
            "stopOnEntry": true,
            "trace": true,
            "selectTargetColor": "green"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 7777,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

[itsenouphoto · Accepted solution]

I found this same problem while developing another extension. Luckily, it was early on so I didn't have to search through too many options. Everything is fine if I reload the extension with
- location.reload()

It was tiring to figure out every time what was updated on reload and what wasn't, so I used
- location.reload(true)
more often to at least clear the cache and increase the chance that I wouldn't have to go through line by line looking for an issue that was already fixed, but a function just didn't update.

It seems that trying to clear the cache in some cases (maybe one of the options is connecting to Chrome for debugging) breaks something. I'll keep an eye on this