Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Debugging with VSCODE not working in a Webpack + Typescript + no-framework

Tags:

javascript

webpack

typescript

visual-studio-code

vscode-debugger

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: my vanilla JS component gct-emails-input

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).

GIF running liver server vscode webpack typescript

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

vscode webpack typescript issue activating breakpoints

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\"]"}}}
like image 354
Gilson Cavalcanti Avatar asked May 18 '20 17:05

Gilson Cavalcanti

People also ask

Is there a way to debug TypeScript code in VS Code?

That in combination with the Debugger for Chrome extension for VS Code and proper configuration should allow debugging and stepping through the typescript source code. I am able to step through and debug the .ts file from Chrome but my breakpoints within VS Code report

Can Visual Studio Code debug Node JS?

The Visual Studio Code editor has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, and many other languages that are transpiled into JavaScript.

How to debug a JavaScript program in Visual Studio Code?

1 Use auto attach to debug processes you run in VS Code's integrated terminal, 2 Use the JavaScript debug terminal, in a similar way, or. 3 Use a launch config to start your program, or attach to a process launched outside of VS Code.

How do I debug JavaScript source maps in typescript?

TypeScript debugging supports JavaScript source maps. To generate source maps for your TypeScript files, compile with the --sourcemap option or set the sourceMap property in the tsconfig.json file to true.

1 Answers

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:

enter image description here

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... enter image description here

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'),
  },
...
like image 173
Gilson Cavalcanti Avatar answered Sep 20 '22 12:09

Gilson Cavalcanti
Sign in to Comment

Related questions

Parse HTML String to DOM and convert it back to string
How to prevent Leaflet from scrolling the page when clicking the zoom buttons?
react native modal always visible
Check if a webapp has React, Angular or Vue installed
Is it possible to fetch GPS location from desktop browser in the background?
How to detect #enable-force-dark flag on Chrome v78+ using JavaScript?
Find minimum concat number of two strings
How to change nested property of an object using spread operator?
Yup schema validation: Exclude a certain pattern in the method '.matches()'
React Hooks setState of an element in an array
Why fetch returns promise pending?
The text of button at react native is always uppercase
currying function instead of if condition in javascript
Nuxt: how to prevent nuxt-link goes to another page?
How to customize react-native-gifted-chat in React Native 0.61
How to convert functional component using hooks to class component
How to override style of nested Material UI component from the ancestors?
How to use material-ui TextField with react-phone-number-input
Forward and Backward Pagination in DynamoDB
How to set custom HTTP response headers in Next.js without using a custom server?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!