Eclipse Wild Web Developer won't stop on JavaScript breakpoints with Chrome Remote Debugging

Question

I cannot get Eclipse Wild Web Developer top stop on breakpoints, despite communication with the browser succeeding over port 9292.

Take this simple page: test.html

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html>
<head></head>
<body>
    <script src="test.js"></script>
</body>
</html>

and script, test.js

test = function() {
    console.log("############ this function was totally called!");
}

test();

I have Chrome setup in Eclipse and it connects over port 9292. In the Eclipse Console, I see the following when setting the breakpoint:

############ this function was totally called!

....remove for brevity

From client: setBreakpoints({"source":{"name":"test.js","path":"/Users/jonathan.fisher/dev/projectx/projectx/src/main/webapp/test.js"},"breakpoints":[{"line":4}],"lines":[4],"sourceModified":false})
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.8.11","Versions.DebugAdapter":"4.13.0","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@9f2101830b56fd2ea1408287f6c74e253ebcb7c6","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36","Versions.Target.V8":"10.6.194.18","Versions.Target.Project":"Chrome","Versions.Target.Version":"106.0.5249.119","fileExt":".js"}}}
SourceMaps.setBP: /Users/jonathan.fisher/dev/projectx/projectx/src/main/webapp/test.js 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/jonathan.fisher/dev/projectx/projectx/src/main/webapp/test.js.
→ To target: "{\"id\":17,\"method\":\"DOMDebugger.setInstrumentationBreakpoint\",\"params\":{\"eventName\":\"scriptFirstStatement\"}}"
← From target: {"id":17,"result":{}}
To client: {"seq":0,"type":"response","request_seq":5,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"id":1000,"verified":false,"message":"Breakpoint set but not yet bound"}]}}
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"ClientRequest/setBreakpoints","data":{"Versions.DebugAdapterCore":"6.8.11","Versions.DebugAdapter":"4.13.0","Versions.Target.CRDPVersion":"1.3","Versions.Target.Revision":"@9f2101830b56fd2ea1408287f6c74e253ebcb7c6","Versions.Target.UserAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36","Versions.Target.V8":"10.6.194.18","Versions.Target.Project":"Chrome","Versions.Target.Version":"106.0.5249.119","successful":"true","timeTakenInMilliseconds":"3.689982","requestType":"request"}}}

I this line is the key:

SourceMaps.setBP: /Users/jonathan.fisher/dev/projectx/projectx/src/main/webapp/test.js can't be resolved to a loaded script. It may just not be loaded yet

As basically Eclipse is telling the browser to install a breakpoint, but Chrome doesn't know which file to put it into.

I'm not sure what I need to do for Chrome and Eclipse to figure out they're talking about the same file.

I need to solve this problem using Eclipse JEE Developer Edition, not WebClipse or another platform.

score 0 · Accepted Answer · answered Oct 24 '22 at 20:30

I was able to get this to work, but not exactly "automatically". Like most things these days, we don't have schema definitions anymore and instead are overly reliant on unstructured data and examples. I read a lot of how it works in vscode and was able to determine there's a setting called pathMapping. Further digging into source I was able get it to work by putting this json in the Launch Parameters (Json): Dialog under the Debug Adapter menu of the Chrome Debug launch configuration:

{
   "pathMapping":{
      "pws-7.0.0.jsfc.js.jsf":"/Users/jonathan.fisher/dev/jsf-components/src/main/resources/META-INF/resources/js/pws-7.0.0.jsfc.js"
   }
}

The json key is the filename as it appears to the browser, and the value is the fully qualified path to a file in an open project in your workspace.

The chrome debugger does not offer all of the features the JVM debugger does (for example: conditional breakpoints) but it is nice to be able to do all of your debugging in one place.

Eclipse Wild Web Developer won't stop on JavaScript breakpoints with Chrome Remote Debugging

1 Answers1