首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何配置用于Chrome的Visual代码调试器

如何配置用于Chrome的Visual代码调试器
EN

Stack Overflow用户
提问于 2019-06-15 11:30:38
回答 1查看 1.1K关注 0票数 0

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

代码语言:javascript
运行
复制
{
    "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源与将由浏览器加载的实际资源链接起来,但我似乎无法理解如何配置这些资源。

我的环境如下:

  • 源位于项目根目录中的src目录中,其中包含一个src目录,然后拆分为modulesframeworkglobal
  • 我使用webpack来构建我的资源,将devtool设置为eval-source-map
  • 起始页(index.html)是在Apache服务器上使用url localhost:7777/pls/lj_unittest/LAS_DLG_Startup.GO动态生成的。
  • 资源(JS、CSS、HTML、图像等)使用基url localhost:7777/q/p/lj_unittest/访问。
  • vscode-chrome-debug.txt文件的启动方式如下:
代码语言:javascript
运行
复制
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"]

...
EN

回答 1

Stack Overflow用户

发布于 2019-06-16 20:56:39

我自己解决了这个问题,实际上唯一的问题似乎是我如何生成我的源地图。webpack从使用eval-source-map改为普通的老source-map完成了这一工作!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56609959

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档