使用 VSCODE 进行调试无法在 Webpack + Typescript + 无框架中工作

Question

The Context

Lost hours trying to get vscode debugger to run in this project. Using:

• Webpack
• Typescript
• no external libs

The idea is to generate a pure vanilla JS component ie11 compatible. Here is it in action:

Link to live example: https://gilsoncav.github.io/emails-tags-input/dist/index.html

Link to the repo: https://github.com/gilsoncav/emails-tags-input

The Issue

I'm testing during development using the Live Server extension (but I doubt that the issue has anything to do with it).

When I try to start the debugging session, the breakpoint isn't "mounted".

Relevant data

My package.json relevant parts

      "scripts": {
        "dev": "webpack --mode development --watch",
        "build": "webpack --mode production"
      },

My webpack.config.js file:

const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
  target: 'web',
  externals: [nodeExternals()],
  entry: './src/emails-input.ts',
  output: {
    filename: 'emails-input.js',
    // Setting webpack to generate the library with a global variable as
    // the spec of the test is suggesting
    library: 'EmailsInput',
    libraryTarget: 'var',
    libraryExport: 'default',
    globalObject: 'this',
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: '/node_modules/',
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

My .vscode/launch.json :

  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "chrome",
      "url": "http://127.0.0.1:5500/dist/emails-input__form-example.html",
      "webRoot": "${workspaceFolder}/dist",
      "sourceMaps": true,
      "trace": "verbose",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/src/*",
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }

Debug console dump:

ECONNREFUSED 127.0.0.1:9222
[17:04:48.761 UTC] HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222
[17:04:48.761 UTC] Discovering targets via http://127.0.0.1:9222/json
[17:04:48.761 UTC] HTTP GET failed: Error: connect ECONNREFUSED 127.0.0.1:9222
[17:04:48.962 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[17:04:48.963 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[17:04:50.349 UTC] Got browser version: Chrome/81.0.4044.138
[17:04:50.349 UTC] Got debug protocol version: 1.3
[17:04:50.350 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetDebugProtocolVersion","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7"}}}
[17:04:50.350 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetCount","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","numTargets":1}}}
[17:04:50.351 UTC] Attaching to target: {"description":"","devtoolsFrontendUrl":"/devtools/inspector.html?ws=localhost/devtools/page/064DC8B5E5403FED12A152F9A42B4893","id":"064DC8B5E5403FED12A152F9A42B4893","title":"","type":"page","url":"about:blank","webSocketDebuggerUrl":"ws://127.0.0.1:9222/devtools/page/064DC8B5E5403FED12A152F9A42B4893","version":{}}
[17:04:50.351 UTC] WebSocket Url: ws://127.0.0.1:9222/devtools/page/064DC8B5E5403FED12A152F9A42B4893
[17:04:50.372 UTC] → To target: "{\"id\":1,\"method\":\"Console.enable\"}"
[17:04:50.372 UTC] → To target: "{\"id\":2,\"method\":\"Debugger.enable\"}"
[17:04:50.372 UTC] → To target: "{\"id\":3,\"method\":\"Runtime.enable\"}"
[17:04:50.373 UTC] → To target: "{\"id\":4,\"method\":\"Log.enable\"}"
[17:04:50.373 UTC] → To target: "{\"id\":5,\"method\":\"Runtime.runIfWaitingForDebugger\"}"
[17:04:50.373 UTC] → To target: "{\"id\":6,\"method\":\"Runtime.run\"}"
[17:04:50.373 UTC] → To target: "{\"id\":7,\"method\":\"Page.enable\"}"
[17:04:50.373 UTC] → To target: "{\"id\":8,\"method\":\"Network.enable\",\"params\":{}}"
[17:04:50.450 UTC] ← From target: {"id":1,"result":{}}
[17:04:50.451 UTC] ← From target: {"id":2,"result":{"debuggerId":"-1670810346772519526.-4357034156310313082"}}
[17:04:50.451 UTC] ← From target: {"method":"Runtime.executionContextCreated","params":{"context":{"id":1,"origin":"://","name":"","auxData":{"isDefault":true,"type":"default","frameId":"064DC8B5E5403FED12A152F9A42B4893"}}}}
[17:04:50.452 UTC] ← From target: {"id":3,"result":{}}
[17:04:50.452 UTC] ← From target: {"id":4,"result":{}}
[17:04:50.453 UTC] ← From target: {"id":5,"result":{}}
[17:04:50.455 UTC] ← From target: {"error":{"code":-32601,"message":"'Runtime.run' wasn't found"},"id":6}
[17:04:50.456 UTC] ← From target: {"id":7,"result":{}}
[17:04:50.456 UTC] ← From target: {"id":8,"result":{}}
[17:04:50.456 UTC] → To target: "{\"id\":9,\"method\":\"Debugger.setBlackboxPatterns\",\"params\":{\"patterns\":[\"^chrome-extension:.*\"]}}"
[17:04:50.457 UTC] → To target: "{\"id\":10,\"method\":\"Schema.getDomains\"}"
[17:04:50.468 UTC] ← From target: {"id":10,"result":{"domains":[{"name":"Inspector","version":"1.2"},{"name":"Memory","version":"1.2"},{"name":"Page","version":"1.2"},{"name":"Emulation","version":"1.2"},{"name":"Security","version":"1.2"},{"name":"Network","version":"1.2"},{"name":"Database","version":"1.2"},{"name":"IndexedDB","version":"1.2"},{"name":"CacheStorage","version":"1.2"},{"name":"DOMStorage","version":"1.2"},{"name":"CSS","version":"1.2"},{"name":"ApplicationCache","version":"1.2"},{"name":"DOM","version":"1.2"},{"name":"IO","version":"1.2"},{"name":"DOMDebugger","version":"1.2"},{"name":"DOMSnapshot","version":"1.2"},{"name":"ServiceWorker","version":"1.2"},{"name":"Input","version":"1.2"},{"name":"LayerTree","version":"1.2"},{"name":"DeviceOrientation","version":"1.2"},{"name":"Tracing","version":"1.2"},{"name":"Animation","version":"1.2"},{"name":"Accessibility","version":"1.2"},{"name":"Storage","version":"1.2"},{"name":"Log","version":"1.2"},{"name":"Runtime","version":"1.2"},{"name":"Debugger","version":"1.2"},{"name":"Profiler","version":"1.2"},{"name":"HeapProfiler","version":"1.2"},{"name":"Schema","version":"1.2"},{"name":"Target","version":"1.2"},{"name":"Overlay","version":"1.2"},{"name":"Performance","version":"1.2"},{"name":"Audits","version":"1.2"},{"name":"HeadlessExperimental","version":"1.2"}]}}
[17:04:50.469 UTC] → To target: "{\"id\":11,\"method\":\"Debugger.setAsyncCallStackDepth\",\"params\":{\"maxDepth\":4}}"
[17:04:50.472 UTC] ← From target: {"id":9,"result":{}}
[17:04:50.475 UTC] ← From target: {"id":11,"result":{}}
[17:04:50.476 UTC] → To target: "{\"id\":12,\"method\":\"Runtime.evaluate\",\"params\":{\"expression\":\"navigator.userAgent\",\"silent\":true}}"
[17:04:50.477 UTC] → To target: "{\"id\":13,\"method\":\"Browser.getVersion\"}"
[17:04:50.477 UTC] To client: {"seq":0,"type":"response","request_seq":2,"command":"launch","success":true}
[17:04:50.477 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/launch","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","successful":"true","timeTakenInMilliseconds":"2351.187907","requestType":"request"}}}
[17:04:50.482 UTC] ← From target: {"id":13,"result":{"protocolVersion":"1.3","product":"Chrome/81.0.4044.138","revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","jsVersion":"8.1.307.32"}}
[17:04:50.483 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"target-version","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138"}}}
[17:04:50.487 UTC] ← From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"5","url":"","startLine":0,"startColumn":0,"endLine":0,"endColumn":19,"executionContextId":1,"hash":"3a6f8cb8708878331cc2be2ec90de0ab25738855","executionContextAuxData":{"isDefault":true,"type":"default","frameId":"064DC8B5E5403FED12A152F9A42B4893"},"isLiveEdit":false,"sourceMapURL":"","hasSourceURL":false,"isModule":false,"length":19}}
[17:04:50.492 UTC] → To target: "{\"id\":14,\"method\":\"Debugger.getPossibleBreakpoints\",\"params\":{\"start\":{\"scriptId\":\"5\",\"lineNumber\":0,\"columnNumber\":0},\"end\":{\"scriptId\":\"5\",\"lineNumber\":1,\"columnNumber\":0},\"restrictToFunction\":false}}"
[17:04:50.496 UTC] ← From target: {"id":12,"result":{"result":{"type":"string","value":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"}}}
[17:04:50.496 UTC] Target userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
[17:04:50.496 UTC] → To target: "{\"id\":15,\"method\":\"Network.setCacheDisabled\",\"params\":{\"cacheDisabled\":true}}"
[17:04:50.499 UTC] ← From target: {"id":14,"result":{"locations":[{"scriptId":"5","lineNumber":0,"columnNumber":0}]}}
[17:04:50.499 UTC] To client: {"seq":0,"type":"event","event":"initialized"}
[17:04:50.502 UTC] To client: {"seq":0,"type":"event","event":"loadedSource","body":{"reason":"new","source":{"name":"VM5","path":"<eval>/VM5","sourceReference":1000}}}
[17:04:50.503 UTC] ← From target: {"id":15,"result":{}}
[17:04:50.710 UTC] From client: loadedSources(undefined)
[17:04:50.711 UTC] To client: {"seq":0,"type":"response","request_seq":3,"command":"loadedSources","success":true,"body":{"sources":[{"name":"VM5","path":"<eval>/VM5","sourceReference":1000}]}}
[17:04:50.711 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/loadedSources","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"1.048825","requestType":"request"}}}
[17:04:50.795 UTC] From client: setBreakpoints({"source":{"name":"emails-input.ts","path":"/Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts"},"lines":[29],"breakpoints":[{"line":29}],"sourceModified":false})
[17:04:50.796 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","fileExt":".ts"}}}
[17:04:50.796 UTC] From client: breakpointLocations({"source":{"name":"emails-input.ts","path":"/Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts"},"line":29})
[17:04:50.797 UTC] SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
[17:04:50.798 UTC] Paths.setBP: No target url cached yet for client path: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts.
[17:04:50.799 UTC] SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
[17:04:50.800 UTC] SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
[17:04:50.800 UTC] Paths.setBP: No target url cached yet for client path: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts.
[17:04:50.800 UTC] → To target: "{\"id\":16,\"method\":\"DOMDebugger.setInstrumentationBreakpoint\",\"params\":{\"eventName\":\"scriptFirstStatement\"}}"
[17:04:50.800 UTC] To client: {"seq":0,"type":"response","request_seq":5,"command":"breakpointLocations","success":true,"body":null}
[17:04:50.801 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/breakpointLocations","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"4.292901","requestType":"request"}}}
[17:04:50.801 UTC] ← From target: {"id":16,"result":{}}
[17:04:50.802 UTC] To client: {"seq":0,"type":"response","request_seq":4,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"id":1000,"verified":false,"message":"Breakpoint set but not yet bound"}]}}
[17:04:50.802 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/setBreakpoints","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"6.538855","requestType":"request"}}}
[17:04:50.845 UTC] From client: setExceptionBreakpoints({"filters":[]})
[17:04:50.845 UTC] → To target: "{\"id\":17,\"method\":\"Debugger.setPauseOnExceptions\",\"params\":{\"state\":\"none\"}}"
[17:04:50.846 UTC] ← From target: {"id":17,"result":{}}
[17:04:50.846 UTC] To client: {"seq":0,"type":"response","request_seq":6,"command":"setExceptionBreakpoints","success":true}
[17:04:50.846 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/setExceptionBreakpoints","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"1.558665","requestType":"request"}}}
[17:04:50.850 UTC] From client: configurationDone(undefined)
[17:04:50.850 UTC] → To target: "{\"id\":18,\"method\":\"Page.navigate\",\"params\":{\"url\":\"http://127.0.0.1:5500/dist/emails-input__form-example.html\"}}"
[17:04:50.850 UTC] To client: {"seq":0,"type":"response","request_seq":7,"command":"configurationDone","success":true}
[17:04:50.850 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/configurationDone","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"0.644701","requestType":"request"}}}
[17:04:50.854 UTC] From client: threads(undefined)
[17:04:50.855 UTC] To client: {"seq":0,"type":"response","request_seq":8,"command":"threads","success":true,"body":{"threads":[{"id":1,"name":"Chrome"}]}}
[17:04:50.855 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/threads","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"1.028673","requestType":"request"}}}
[17:04:50.863 UTC] ← From target: {"id":18,"result":{"frameId":"064DC8B5E5403FED12A152F9A42B4893","loaderId":"090E0F5CAC0AA9179D62839E3FBF8020"}}
[17:04:50.868 UTC] From client: breakpointLocations({"source":{"name":"emails-input.ts","path":"/Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts"},"line":29})
[17:04:50.868 UTC] SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
[17:04:50.868 UTC] SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
[17:04:50.869 UTC] Paths.setBP: No target url cached yet for client path: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts.
[17:04:50.869 UTC] To client: {"seq":0,"type":"response","request_seq":9,"command":"breakpointLocations","success":true,"body":null}
[17:04:50.869 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/breakpointLocations","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","successful":"true","timeTakenInMilliseconds":"0.61485","requestType":"request"}}}
[17:04:50.869 UTC] ← From target: {"method":"Page.frameStartedLoading","params":{"frameId":"064DC8B5E5403FED12A152F9A42B4893"}}
[17:04:50.869 UTC] ← From target: {"method":"Runtime.executionContextDestroyed","params":{"executionContextId":1}}
[17:04:50.870 UTC] ← From target: {"method":"Runtime.executionContextsCleared","params":{}}
[17:04:50.871 UTC] To client: {"seq":0,"type":"event","event":"loadedSource","body":{"reason":"removed","source":{"name":"VM5","path":"<eval>/VM5","sourceReference":1000}}}
[17:04:50.871 UTC] ← From target: {"method":"Page.frameNavigated","params":{"frame":{"id":"064DC8B5E5403FED12A152F9A42B4893","loaderId":"090E0F5CAC0AA9179D62839E3FBF8020","url":"http://127.0.0.1:5500/dist/emails-input__form-example.html","securityOrigin":"http://127.0.0.1:5500","mimeType":"text/html"}}}
[17:04:50.872 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"report-start-up-timings","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","RequestedContentWasDetected":"true","Steps":"[\"BeforeFirstStep\",\"ClientRequest/initialize\",\"ClientRequest/launch\",\"LaunchTarget.LaunchExe\",\"Attach\",\"Attach.RequestDebuggerTargetsInformation\",\"Attach.RequestDebuggerTargetsInformation\",\"Attach.RequestDebuggerTargetsInformation\",\"Attach.RequestDebuggerTargetsInformation\",\"Attach.RequestDebuggerTargetsInformation\",\"Attach.ProcessDebuggerTargetsInformation\",\"Attach.AttachToTargetDebuggerWebsocket\",\"Attach.ConfigureDebuggingSession.Internal\",\"Attach.ConfigureDebuggingSession.Target\",\"Attach.ConfigureDebuggingSession.End\"]","All":"2763.981103","Request.ClientRequest/loadedSources.startTime":"[1589821490710]","Request.ClientRequest/loadedSources.timeTakenInMilliseconds":"[1.048825]","Request.ClientRequest/breakpointLocations.startTime":"[1589821490796,1589821490868]","Request.ClientRequest/breakpointLocations.timeTakenInMilliseconds":"[4.292901,0.61485]","Request.ClientRequest/setBreakpoints.startTime":"[1589821490795]","Request.ClientRequest/setBreakpoints.timeTakenInMilliseconds":"[6.538855]","Request.ClientRequest/setExceptionBreakpoints.startTime":"[1589821490845]","Request.ClientRequest/setExceptionBreakpoints.timeTakenInMilliseconds":"[1.558665]","Request.ClientRequest/configurationDone.startTime":"[1589821490850]","Request.ClientRequest/configurationDone.timeTakenInMilliseconds":"[0.644701]","Request.ClientRequest/threads.startTime":"[1589821490854]","Request.ClientRequest/threads.timeTakenInMilliseconds":"[1.028673]","BeforeFirstStep":"[9.545124]","WaitingAfter.ClientRequest/initialize":"[12.160032]","ClientRequest/initialize":"[8.405613]","ClientRequest/launch":"[3.017412]","LaunchTarget.LaunchExe":"[4.081949]","Attach":"[5.006457]","Attach.RequestDebuggerTargetsInformation":"[213.829774,203.063936,205.105162,202.938851,1387.320519]","Attach.ProcessDebuggerTargetsInformation":"[1.456122]","Attach.AttachToTargetDebuggerWebsocket":"[3.125695]","Attach.ConfigureDebuggingSession.Internal":"[0.431934]","Attach.ConfigureDebuggingSession.Target":"[120.704226]","WaitingAfter.ClientRequest/launch":"[2369.170056]","WaitingAfter.NotifyInitialized":"[2391.895452]","RequestedNavigateToUserPage":"[2755.663593]","Attach.ConfigureDebuggingSession.End":"[395.650265]"}}}
[17:04:50.872 UTC] ← From target: {"method":"Runtime.executionContextCreated","params":{"context":{"id":2,"origin":"http://127.0.0.1:5500","name":"","auxData":{"isDefault":true,"type":"default","frameId":"064DC8B5E5403FED12A152F9A42B4893"}}}}
[17:04:50.873 UTC] ← From target: {"method":"Log.entryAdded","params":{"entry":{"source":"network","level":"error","text":"Failed to load resource: the server responded with a status of 404 (Not Found)","timestamp":1.589821490867167e+12,"url":"http://127.0.0.1:5500/dist/emails-input__form-example.html","networkRequestId":"090E0F5CAC0AA9179D62839E3FBF8020"}}}
[17:04:50.874 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"stderr","output":"Failed to load resource: the server responded with a status of 404 (Not Found) [http://127.0.0.1:5500/dist/emails-input__form-example.html]\n"}}
[17:04:50.992 UTC] ← From target: {"method":"Page.loadEventFired","params":{"timestamp":33991.827034}}
[17:04:50.993 UTC] ← From target: {"method":"Page.frameStoppedLoading","params":{"frameId":"064DC8B5E5403FED12A152F9A42B4893"}}
[17:04:50.993 UTC] ← From target: {"method":"Page.domContentEventFired","params":{"timestamp":33991.925795}}
[17:04:50.998 UTC] ← From target: {"method":"Log.entryAdded","params":{"entry":{"source":"network","level":"error","text":"Failed to load resource: the server responded with a status of 404 (Not Found)","timestamp":1.589821490996633e+12,"url":"http://127.0.0.1:5500/favicon.ico","networkRequestId":"11571.2"}}}
[17:04:50.998 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"stderr","output":"Failed to load resource: the server responded with a status of 404 (Not Found) [http://127.0.0.1:5500/favicon.ico]\n"}}
[17:04:58.109 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"target/notification/onScriptParsed","data":{"Versions.DebugAdapterCore":"6.8.9","Versions.DebugAdapter":"4.12.7","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@8c6c7ba89cc9453625af54f11fd83179e23450fa","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36","Versions.Target.V8":"8.1.307.32","Versions.Target.Project":"Chrome","Versions.Target.Version":"81.0.4044.138","aggregated.startTime":"[\"1589821490488\"]","aggregated.successful":"[\"true\"]","aggregated.timeTakenInMilliseconds":"[\"6.963062\"]"}}}

Answer 1

After a huge suffering to find the reason why vscode refused to attach the Breakpoints, I found the why and how to fix it.

Well, with launch.json setting "trace": "verboser", I found this trace:

SourceMaps.setBP: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts can't be resolved to a loaded script. It may just not be loaded yet.
Paths.setBP: No target url cached yet for client path: /Users/gilsoncav/dev-js/emails-tags-input/src/emails-input.ts.

I went to Chrome DevTools to check how's the SourceMap is over there...

note that the path to the source mapped script is webpack://EmailsInput/./... that's why the following traditional setting in launch.json don't work

      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceFolder}/*"
      }

So, the fix was to set it to:

      "sourceMapPathOverrides": {
        "webpack://EmailsInput/./*": "${workspaceFolder}/*"
      }

Why this damn EmailsInput is there?? I found the culprit is this library setting that I'm using in my webpack.config.js:

...
  output: {
    filename: 'emails-input.js',
    // Setting webpack to generate the library with a global variable as
    // the spec of the test is suggesting
    library: 'EmailsInput',
    libraryTarget: 'var',
    libraryExport: 'default',
    globalObject: 'this',
    path: path.resolve(__dirname, 'dist'),
  },
...