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

Posted

技术标签:

【中文标题】使用 VSCODE 进行调试无法在 Webpack + Typescript + 无框架中工作【英文标题】:Debugging with VSCODE not working in a Webpack + Typescript + no-framework 【发布时间】:2020-09-04 13:59:49 【问题描述】:

背景

试图让 vscode 调试器在这个项目中运行浪费了几个小时。使用:

网页包 打字稿 没有外部库

这个想法是生成一个兼容 ie11 的纯原生 JS 组件。这是它的实际应用:

实例链接:https://gilsoncav.github.io/emails-tags-input/dist/index.html

回购链接:https://github.com/gilsoncav/emails-tags-input

问题

我在开发过程中使用 Live Server 扩展进行测试(但我怀疑这个问题与它有什么关系)。

当我尝试启动调试会话时,断点没有“挂载”。

相关数据

我的package.json相关部分

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

我的 webpack.config.js 文件:

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'],
  ,
;

我的.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/*"
      
    

调试控制台转储:

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\"]"

【问题讨论】:

【参考方案1】:

在寻找vscode拒绝附加断点的原因后,我找到了原因以及如何解决它。

好吧,使用launch.json 设置"trace": "verboser", 我找到了这条踪迹:

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.

我去了 Chrome DevTools 来检查 SourceMap 在那边的情况...

请注意,源映射脚本的路径是 webpack://EmailsInput/./...,这就是为什么 launch.json 中的以下传统设置不起作用

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

因此,解决方法是将其设置为:

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

为什么有这个该死的EmailsInput?我发现罪魁祸首是我在 webpack.config.js 中使用的 library 设置:

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

【讨论】:

感谢详细的跟踪提示。检查了它吐出的路径并最终使用了类似的东西:"webpack://$workspaceFolderBasename/*": "$workspaceFolder/*"

以上是关于使用 VSCODE 进行调试无法在 Webpack + Typescript + 无框架中工作的主要内容,如果未能解决你的问题,请参考以下文章

VSCode调试vue项目

如何使用vscode断点调试laravel

如何调试打字稿代码,在 vscode/vs2015 中使用 webpack 捆绑

如何用vscode调试webpack

带有自定义 webpack 构建的 vscode 节点调试器

vscode 调试显示数组完整个数