Unable to debug frontend code in vscode

[groyee]

Hi

I followed the documentation to setup development environment for home assistant frontend: Frontend development | Home Assistant Developer Docs

Everything works, except the breakpoints.

I run this command in the terminal: script/develop_and_serve -c http://homeassistant.local:8123

Then in vscode, I just tun the “Debug Frontend” profile:
“configurations”: [
{
“name”: “Debug Frontend”,
“request”: “launch”,
“type”: “Chrome”,
“url”: “http://localhost:8124/”,
“webRoot”: “${workspaceFolder}/hass_frontend”,
“disableNetworkCache”: true,
“preLaunchTask”: “Develop Frontend”,
“env”: { “HASS_URL”: " http://homeassistant.local:8123/" },
“sourceMaps”: true,
},]

But breakpoints don’t work:

[karwosts]

Not sure how to fix, but personally I always just set breakpoints in Chrome browser, I've never felt the need to use breakpoints in vscode for frontend.

[groyee]

After fighting with my computer for 4 hours, it works! In case anyone else having this problem. I was able to make it work with the following configuration in vscode launch.json:

    {
      "name": "Debug Frontend",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8124/",
      "webRoot": "${workspaceFolder}/hass_frontend",
      "disableNetworkCache": true,
      "preLaunchTask": "Develop Frontend",
      "env": { "HASS_URL": " http://homeassistant.local:8123" },
      "sourceMaps": true,
      "trace": true,
      "sourceMapPathOverrides": {
        "webpack://home-assistant-frontend/./src/*": "${workspaceFolder}/src/*",
        "webpack:///src/*": "${workspaceFolder}/src/*",
        "webpack://./src/*": "${workspaceFolder}/src/*",
        "webpack://*": "${workspaceFolder}/*",
        "*": "*"
      }
    },

When there is no proper documentation, thank God there is GPT to help solve the problem. Thank you AI once again :-)

[joeldickson]

I'd recommend push the launch settings into git to solve the problem for others. The. vs folder is sometimes in the git ignore that prevents people, I don't know why, some people say it's because individuals customise it, ime they don't.

[Misiu]

I also think this should be added to repo, so anyone can use it if needed