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 @Font-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}"
        }
    ]
}