visual studio code - How to setup DevTools-For-Chrome extension?

Question

I'm using mac, and i'm trying to setup DevTools-For-Chrome in VSCode but i'm getting all sort of errors.

I've used debugger-for-Chrome successfully with the following settings :

{ 
  "name": "Launch Chrome",
  "port": 8080,
  "url":"https://localhost/myproject#!/app/my-dashboard",
  "webRoot": "${workspaceFolder}/app/js"
},
{
  "type": "chrome",
  "request": "attach",
  "name": "attach to Chrome",
  "port": 8080,
  "url":"https://localhost/myproject#!/app/my-dashboard",
  "webRoot": "${workspaceFolder}/app/js"
 },

Now i've installed DevTools-For-Chrome and i've added the following settings (and run /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222)

       {
            "type": "devtools-for-chrome",
            "request": "launch",
            "name": "Launch Chrome DevTools",
            "port": 9222,
            "url": "https://localhost:8080/",
            //  "runtimeArgs":["--inspect=8080"],
            "file": "${workspaceFolder}/app/js"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "devtools-for-chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}/app/js",
            "urlFilter": "https://localhost:8080/*",
            "sourceMapPathOverrides": {
                "webpack:///*": "/*"
            }
        }

I still getting an error : Could not find any targets for attaching. Did you remember to run Chrome with '--remote-debugging-port=9222'? but first i just want to check that my settings are correct.

Answer 1

等待大神解答