Question

我无法在我的环境中正确运行Chrome的Visual Studio代码调试器。我能够安装并设置基本配置

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO",
            "webRoot": "${workspaceFolder}",
            "trace": true,
            "sourceMaps": true
        }
    ]
}

对于现在允许我从VSCode启动Chrome浏览器的项目，但我实际上无能为力，例如在尝试在源代码中设置断点时，编辑器会在断点上显示Breakpoint set but not yet bound消息点，并没有按预期停止。

我很确定我所缺少的是以某种方式将我正在使用的TypeScript源与浏览器将加载的实际资源链接在一起，但是我似乎无法理解如何配置它。 / p>

我的环境如下：

源位于项目根目录中的src目录中，其中的目录为src，然后分为modules，framework和global。
我正在使用webpack将devtool设置为eval-source-map的资源。
起始页（index.html）是使用url localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO在Apache Web服务器上动态生成的。
使用基本URL localhost:7777/q/p/lj_unittest/访问资源（JS，CSS，HTML，图像等）。
vscode-chrome-debug.txt文件开始如下：

2019-6-15, 11:15:08.169 UTC
[11:15:08.169 UTC] OS: win32 x64
[11:15:08.169 UTC] Adapter node: v10.2.0 x64
[11:15:08.169 UTC] vscode-chrome-debug-core: 6.7.45
[11:15:08.169 UTC] debugger-for-chrome: 4.11.3
[11:15:08.169 UTC] From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"chrome","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en-us"})
[11:15:08.169 UTC] To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLoadedSourcesRequest":true,"supportsRestartRequest":true,"supportsSetExpression":true,"supportsLogPoints":true}}
[11:15:08.169 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/initialize","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","successful":"true","timeTakenInMilliseconds":"3.207824","requestType":"request"}}}
[11:15:08.169 UTC] From client: launch({"type":"chrome","request":"launch","name":"Launch Chrome","url":"localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO?agency=1&usercode=cgable&password=secret&loglevel=7&logtag=dtr&options=test,force,development","webRoot":"D:\\MyDev\\ljs_app\\trunk\\periscope","trace":true,"sourceMaps":true,"__sessionId":"d2726268-a461-4537-8972-aecfffbbb303"})
[11:15:08.169 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"debugStarted","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","request":"launch","args":["type","request","name","url","webRoot","trace","sourceMaps","__sessionId","breakOnLoadStrategy","pathMapping","sourceMapPathOverrides","skipFileRegExps","targetFilter","smartStep","showAsyncStacks"]}}}
[11:15:08.169 UTC] Getting browser and debug protocol version via http://127.0.0.1:9222/json/version
[11:15:08.169 UTC] Discovering targets via http://127.0.0.1:9222/json/list
[11:15:08.315 UTC] [chromeSpawnHelper] spawn('C:\Program Files (x86)\Google\Chrome\Application\chrome.exe', ["--remote-debugging-port=9222","--no-first-run","--no-default-browser-check","--user-data-dir=C:\\temp\\vscode-chrome-debug-userdatadir_9222","about:blank"])
[11:15:08.326 UTC] got chrome PID: 12120
[11:15:09.206 UTC] Got browser version: Chrome/74.0.3729.169
[11:15:09.206 UTC] Got debug protocol version: 1.3
[11:15:09.211 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetDebugProtocolVersion","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3"}}}
[11:15:09.217 UTC] To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"targetCount","data":{"Versions.DebugAdapterCore":"6.7.45","Versions.DebugAdapter":"4.11.3","numTargets":2}}}
[11:15:09.218 UTC] Attaching to target: {"description":"","devtoolsFrontendUrl":"/devtools/inspector.html?ws=localhost/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65","id":"F69F154D5460FC5DFAEFFF707BE33B65","title":"","type":"page","url":"about:blank","webSocketDebuggerUrl":"ws://127.0.0.1:9222/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65","version":{}}
[11:15:09.218 UTC] WebSocket Url: ws://127.0.0.1:9222/devtools/page/F69F154D5460FC5DFAEFFF707BE33B65
[11:15:09.310 UTC] → To target: "{\"id\":1,\"method\":\"Console.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":2,\"method\":\"Debugger.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":3,\"method\":\"Runtime.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":4,\"method\":\"Log.enable\"}"
[11:15:09.310 UTC] → To target: "{\"id\":5,\"method\":\"Runtime.runIfWaitingForDebugger\"}"
[11:15:09.311 UTC] → To target: "{\"id\":6,\"method\":\"Runtime.run\"}"
[11:15:09.311 UTC] → To target: "{\"id\":7,\"method\":\"Page.enable\"}"
[11:15:09.311 UTC] → To target: "{\"id\":8,\"method\":\"Network.enable\",\"params\":{}}"

...

[11:15:12.850 UTC] SourceMaps.getMapForGeneratedPath: Finding SourceMap for d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css by URI: data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi92ZW5kb3IvcmVzZXQuY3NzPzU2NTAiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiLi92ZW5kb3IvcmVzZXQuY3NzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gZXh0cmFjdGVkIGJ5IG1pbmktY3NzLWV4dHJhY3QtcGx1Z2luIl0sInNvdXJjZVJvb3QiOiIifQ== and webRoot/pathMapping: {"/":"d:\\MyDev\\ljs_app\\trunk\\periscope"}
[11:15:12.850 UTC] SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css
[11:15:12.851 UTC] SourceMap: creating for d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css
[11:15:12.851 UTC] SourceMap: sourceRoot: 
[11:15:12.851 UTC] SourceMap: sources: ["webpack:///./vendor/reset.css?5650"]
[11:15:12.851 UTC] SourceMap: pathMapping: {"/":"d:\\MyDev\\ljs_app\\trunk\\periscope"}
[11:15:12.851 UTC] SourceMap: no sourceRoot specified, using script dirname: d:\MyDev\ljs_app\trunk\periscope\vendor
[11:15:12.852 UTC] SourceMap: mapping webpack:///./vendor/reset.css?5650 => D:\MyDev\ljs_app\trunk\periscope\vendor\reset.css?5650, via sourceMapPathOverrides entry - "webpack:///./*": "D:\MyDev\ljs_app\trunk\periscope/*"
[11:15:12.854 UTC] SourceMaps.scriptParsed: d:\MyDev\ljs_app\trunk\periscope\vendor\reset.css was just loaded and has mapped sources: ["d:\\MyDev\\ljs_app\\trunk\\periscope\\vendor\\reset.css"]

...

Answer 1

我自己能够解决此问题，实际上唯一的问题似乎是我生成源地图的方式。将webpack从使用eval-source-map切换到普通的source-map即可完成工作！

如何为Chrome配置Visual Studio代码调试器

1 个答案: