I'm attempting to debug a React app with React Dev Tools and Firefox Developer Edition. I can't install React Dev Tools to the profile Firefox is using when it is launched via VSCode. I have React Dev Tools installed when I launch Firefox myself via opening it in /Applications.
However, when I run the below launch.json
profile, there are no extensions shown under Preferences -> Extensions & Themes -> Extensions in FireFox after it launches.
{
"name": "Launch localhost",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
However, I can follow the directions here and launch Firefox with the terminal and attach my debugger to it. This Profile has React Dev Tools and it works fine running:
/Applications/Firefox\ Developer\ Edition.app/Contents/MacOS/firefox -start-debugger-server
launch.json:
{
"name": "Attach",
"type": "firefox",
"request": "attach",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
But how do I make the first one work with a launch
request instead of attach
? From reading it seems to have something to do with the profile
I had the same problem and was able to fix it by adding to my launch.json:
"profile": "my-firefox-profile"
Firefox can have miltiple profiles installed. You can check them by typing about:profiles
in firefoxes adress bar.
It will show you a list of profiles. The one marked as Default profile: yes
should be the one to choose.
My launch.json now looks like this:
{
"name": "Firefox",
"type": "firefox",
"request": "launch",
"reAttach": true,
"url": "http://localhost:4300",
"webRoot": "${workspaceFolder}",
"profile": "default-release-1"
},
Background:
Firefox profiles hold settings like browsing history, bookmarks - and most importantly - add-ons. By telling VSCode to use a specific profile it serves with the installed plugins.
This will also work if you have the same problem with Angular or Vue.