https://discord.umbraco.com logo
Join Discord
Powered by
Does anyone use or get VSCode to attach
# package-development
w
Does anyone use or get VSCode to attach a debuuger, when debugging your Typescript bits for extensions/customisations for Bellissima ?
m
I've got it working with Rider (does that count?) 🙂 But with that said, I prefer VS Code for the Lit-stuff. If you create sourcemaps the debugger in Chrome is quite nice as well.
w
I never really ever figured how best to use the browser debugger in devtools
Oooh interesting - not tried Rider or WebStorm (But not sure how well it is for lit completions and what not)
j
I usually just write 
debugger
in the code where I want to debug and Chrome automatically halts there
works best with sourcemaps, tho
w
Do I need to do anything magic to make sourcemaps work, think Vite is compiling them out for me. I assume browser just sees them alongside the js file with the 
map.js
file extension instead?
j
yeah, vite should just work
m
I tend to to the same as Jacob, adding 
debugger;
somewhere to trigger dev tools to stop. You can set break points, resume (F8), step over (i think its F10). I also think Vite adds source maps by default, I have this to avoid them during build. https://cdn.discordapp.com/attachments/1309465278102376468/1312208146818928714/image.png?ex=674ba891&is=674a5711&hm=00ec0bbda61b5b59b19c8adaff7d706145542c0a10079cc9d51cfdba5e82ae09&
j
@Markus Johansson I/we include source maps in production as well. It's just nice being able to debug a production issue back to the source files. Besides, our products are Open Source so we have nothing to hide, haha. However, I did the same back in my agency days, which helped tools like AppInsights and Sentry (and myself, lol)
Did anyone figure out how to launch Vite in debug mode and/or attach a debugger to a vite server (= start debug session from vscode)? I haven't looked much into it to be honest.
m
@Jacob Overgaard I get it 😄 Make sense for Open Source packages, this example was from the Newsletter Studio-core package which is not open source. I'm not sure, maybe I should consider shipping the source maps - it I guess it would take days to assemble them into something useful so at that point it would be cheaper to buy a license haha.. I have not tried or got that to work with VS Code, I did it with Rider - but like @Warren Buckley says, VS Code feels better when working with Lit.
j
I would say you have bigger problems if clients can steal your whole product by seeing the javascript source code. At any rate, I am sure your license has got you covered 😊
Maybe I'll try and see what can be done with vscode later on this week. We have a couple of days of "hacking time" in my team 🙂
w
Let me know if you do this Jacob as I am back at my desk on Thursday and was gonna take a punt.
Seems to JUST work
Copy code
json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "https://localhost:44365/umbraco/",
            "webRoot": "${workspaceFolder}",
        }
    ]
}
j
is that running against an iis express server?
w
Nah think this was on MacBook
So Kestrel
j
yeh, but it was against a real backend and not just the vite server?
w
Yeh a real backend 😄
Just done it now for a project I am working on for a client
But this on Windows and with IIS Express
Dont think I have any magic extensions installed, I believe it just works out of the box these days AFAIK Jacob
j
Yeah, believe you are right
think it could be good to have default "launch" and "attach" tasks in the core
as well as in the templates
w
Yep agree - will do a PR
Added to my backlog of 101 things
Did you get attach working, as for me it didn't wanna work ?!
j
I got launch to work, but I think attach will not work with a standard browser as you need to launch the browser in "debug mode"
currently trying to see if I can integrate the vite dev server with either a prelaunchTask or a serverReadyAction
so I've got these two, which work:
Copy code
json
    {
      "name": "Backoffice Launch (Chrome)",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": ["vite"],
      "type": "node",
      "cwd": "${workspaceFolder}/src/Umbraco.Web.UI.Client",
      "skipFiles": ["<node_internals>/**", "node_modules/**"],
      "serverReadyAction": {
        "action": "debugWithChrome",
        "pattern": "Local:   http://localhost:([0-9]+)",
        "uriFormat": "http://localhost:%s",
        "webRoot": "${workspaceFolder}/src/Umbraco.Web.UI.Client"
      }
    },
    {
      "name": "Backoffice Attach (Chrome)",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:5173/",
      "skipFiles": ["<node_internals>/**", "node_modules/**"],
      "webRoot": "${workspaceFolder}/src/Umbraco.Web.UI.Client"
    },
they are both launch tasks, tho.. vite does not seem to expose any node.js debugger which would allow you to attach in the classic .NET sense
you can attach to the vite.js nodejs process id, but I think all you can achieve by that is to debug the config file of vite
but I think this is some great process
trying to get it to attach to a kestrel server is harder.. we rewrite the backoffice files with a cachebusting path as well, so the paths do not really map back to the source files
w
WOW thats a lot more config/prop's needed to be set
So my custom stuff I assume doesn't go through cachebusting things and hence it just works ?!
j
yeah, they are loaded as-is from disk, so that "just works"
4 Views
PreviousNext
Powered by