Unable to debug home assistant frontend

Development
1

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”: “pwa-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:

Screenshot 2568-02-07 at 10.52.41
Screenshot 2568-02-07 at 10.52.411146×272 20.4 KB

What am I doing wrong?

2

Just 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 documentation, thank God there is GPT to help solve the problem. Thank you AI once again :slight_smile:

3

i am trying to add frontend support for Create hotspot which involves changes to supervisor, cli and operating-system. i’m a long-time kernel, service and system developer but this is my first experience with UI and typescript so debugger support would be very helpful. i tried both suggestions above but my pretty red circles also become grey outlines when i launch the debugger so something did not work.

some information regarding my set up:

  • i have a raspberry pi 4b running a custom HAOS with all changes noted above serving homeassistant.local:8123.
  • CREATE AN ACCESS POINT works properly and my phone can connect to ha-example.
  • when i Run development frontend over existing HA instance i see the effect of my changes thus far and the AP ha-example but my inexperience really slows the process.

a debugger allows deep inspection and confident fixes instead of the current fumbling around. i just don’t have the experience right now to enable it. solutions very much appreciated.

p.s. the two link limit for noobs destroyed providing ample information for comprehension.