Warm tip: This article is reproduced from stackoverflow.com, please click
reactjs visual-studio-code firefox react-devtools

How to preserve extensions in Firefox with VSCode and request Launch

发布于 2020-03-31 23:02:18

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

Questioner
Diesel
Viewed
83
Jona Paulus 2020-01-31 20:18

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.

enter image description here

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.