{"id":13778268,"url":"https://github.com/vsch/Javafx-WebView-Debugger","last_synced_at":"2025-05-11T11:35:20.142Z","repository":{"id":89762782,"uuid":"121605740","full_name":"vsch/Javafx-WebView-Debugger","owner":"vsch","description":"Full Featured Google Chrome Dev Tools to JavaFX WebView browser debugging.","archived":false,"fork":false,"pushed_at":"2022-01-04T17:31:17.000Z","size":763,"stargazers_count":63,"open_issues_count":10,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-02-13T20:31:49.596Z","etag":null,"topics":["chrome-dev","debugger","java-websocket","javafx-webview","javafx-webview-debugging","javascript","webview-javascript-debugging"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vsch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-15T08:23:21.000Z","updated_at":"2024-01-22T18:40:42.000Z","dependencies_parsed_at":"2024-01-06T22:45:39.383Z","dependency_job_id":null,"html_url":"https://github.com/vsch/Javafx-WebView-Debugger","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsch%2FJavafx-WebView-Debugger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsch%2FJavafx-WebView-Debugger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsch%2FJavafx-WebView-Debugger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsch%2FJavafx-WebView-Debugger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vsch","download_url":"https://codeload.github.com/vsch/Javafx-WebView-Debugger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253560089,"owners_count":21927729,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-dev","debugger","java-websocket","javafx-webview","javafx-webview-debugging","javascript","webview-javascript-debugging"],"created_at":"2024-08-03T18:00:52.550Z","updated_at":"2025-05-11T11:35:19.846Z","avatar_url":"https://github.com/vsch.png","language":"Java","funding_links":[],"categories":["Libraries, Tools and Projects"],"sub_categories":[],"readme":"# JavaFX WebView Debugger\n\n##### Via WebSocket connection to Google Chrome Dev Tools\n\n[![Build status](https://travis-ci.org/vsch/Javafx-WebView-Debugger.svg?branch=master)](https://travis-ci.org/vsch/Javafx-WebView-Debugger)\n[![Maven Central status](https://img.shields.io/maven-central/v/com.vladsch.javafx-webview-debugger/javafx-webview-debugger.svg)](https://search.maven.org/search?q=g:com.vladsch.javafx-webview-debugger)\u003c!-- @IGNORE PREVIOUS: link --\u003e\n\nJavaFx WebView debugging with Chrome Dev tools is highly dependent on Google Chrome version and\nJavaFx Version.\n\nIf you can debug your scripts using another environment, I would highly recommend doing that instead.\nOnly use JavaFx WebView based debugging when you absolutely need to debug the code under this\nenvironment.\n\nJavaFx I use for debugging is JetBrains OpenJDK 1.8.0u152 build 1136 which I found to be the\nmost stable for JavaFx WebView debugging. Other versions are more quirky and after starting\ndebug server they need a page reload from the context menu before connecting Chrome Dev Tools.\nOtherwise, JavaFX crashes and takes the application with it.\n\nI use Chrome version 65.0.3325.181 under OS X. Later versions work but console has no output. I\nhave not investigated what is causing this. You can download older Chrome versions from\n**[Google Chrome Older Versions Download (Windows, Linux \u0026 Mac)](https://www.slimjet.com/chrome/google-chrome-old-version.php)**\n\nHere is a teaser screenshot of dev tools running with JavaFX WebView, showing off the console\nlogging from scripts, with caller location for one click navigation to source:\n\n![DevTools](images/DevTools.png)\n\n### Requirements\n\n* Java 8 (not tested with 9)\n* The project is on Maven: `com.vladsch.javafx-webview-debugger`\n* dependencies:\n  * `org.glassfish:javax.json`\n  * `org.jetbrains.annotations`\n  * `com.vladsch.boxed-json`\n  * `org.apache.log4j`\n\n### Quick Start\n\nTake a look at the [Web View Debug Sample] application for a working example. You can play with\nit and debug the embedded scripts before deciding whether you want to instrument your own\napplication for Chrome Dev Tools debugging.\n\nFor Maven:\n\n```xml\n\u003cdependency\u003e\n    \u003cgroupId\u003ecom.vladsch.javafx-webview-debugger\u003c/groupId\u003e\n    \u003cartifactId\u003ejavafx-webview-debugger\u003c/artifactId\u003e\n    \u003cversion\u003e0.7.6\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\n### Credit where credit is due\n\nI found out about the possibility of having any debugger for JavaFX WebView in\n[mohamnag/javafx_webview_debugger]. That implementation in turn was based on the solution found\nby Bosko Popovic.\n\nI am grateful to Bosko Popovic for discovering the availability and to Mohammad Naghavi creating\nan implementation of the solution. Without their original effort this solution would not be\npossible.\n\n### Finally real debugging for JavaFX WebView\n\nWorking with JavaScript code in WebView was a debugging nightmare that I tried to avoid. My\nexcitement about having a real debugger diminished when I saw how little was available with a\nbare-bones implementation due to WebView's lack of a full Dev Tools protocol. The console did\nnot work and none of the console api calls from scripts made it to the Dev Tools console. No\ncommandLineAPI for the same reason. Having to use logs for these is last century.\n\nA proxy to get between Chrome Dev Tools and WebView solved most of the WebView debugging\nprotocol limitations. It also allowed to prevent conditions that caused WebView to crash and\nbring the rest of the application with it. I don't mean a Java exception. I mean a core dump and\nsudden exit of the application. For my use cases this is not an acceptable option.\n\nNow the console in the debugger works as expected, with completions, evaluations and console\nlogging from scripts, stepping in/out/over, break points, caller location one click away and\ninitialization debugging to allow pausing of the script before the JSBridge to JavaScript is\nestablished. Having a real debugger makes minced meat of script initialization issues.\n\nThe current version is the the code I use in my [IntelliJ IDEA] plugin, [Markdown Navigator].\nWith any functionality specific to my project added using the API of this library.\n\nIf you are working with JavaFX WebView scripts you need this functionality ASAP. Bugs that took\nhours to figure out now take literally seconds to minutes without any recompilation or major log\nreading. Take a look at the [Web View Debug Sample] application to see what you get and how to\nadd it to your code.\n\n#### What is working\n\n* all `console` functions: `assert`, `clear`, `count`, `debug`, `dir`, `dirxml`, `error`,\n  `exception`, `group`, `groupCollapsed`, `groupEnd`, `info`, `log`, `profile`, `profileEnd`,\n  `select`, `table`, `time`, `timeEnd`, `trace`, `warn`. With added extras to output to the Java\n  console: `print`, `println`\n* all commandLineAPI functions implemented by JavaFX WebView: `$`, `$$`, `$x`, `dir`, `dirxml`,\n  `keys`, `values`, `profile`, `profileEnd`, `table`, `monitorEvents`, `unmonitorEvents`,\n  `inspect`, `copy`, `clear`, `getEventListeners`, `$0`, `$_`, `$exception`\n  * Some limitations do exist because `Runtime.evaluate` is simulated. Otherwise, there was no\n    way to get the stack frame for any console log calls that would result from the evaluation.\n    Mainly, it caused the application to exit with a core dump more often than not. I figured it\n    was more important to have the caller location for console logs than for the commandLineAPI\n    calls.\n* No longer necessary to instrument the page to have `JSBridge` support code working. Only\n  requires a page reload from WebView or Dev Tools.\n* Ability to debug break on page reload to debug scripts running before JSBridge is established\n* Safely stop debug session from Dev Tools or WebView side. This should have been easy but\n  turned out to be the hardest part to solve. Any wrong moves or dangling references would bring\n  down the whole application with a core-dump message.\n\n#### In progress\n\n* highlighting of elements hovered over in the element tree of dev tools. Node resolution is\n  working. Kludged highlighting by setting a class on the element with translucent background\n  color defined instead of using an overlay element or the proper margin, borders, padding and\n  container size.\n\n#### Not done\n\n* Debugger paused overlay\n\n#### Probably not doable\n\n* profiling not available. Don't know enough about what's needed to say whether it is doable.\n\n### JSBridge Provided Debugging Support\n\nThe missing functionality from the WebView debugger is implemented via a proxy that gets between\nchrome dev tools and the debugger to fill in the blanks and to massage the conversation allowing\nchrome dev tools to do their magic.\n\nFor this to work, some JavaScript and the `JSBridge` instance need to work together to provide\nthe essential glue. The implementation is confined to the initialization script. Most other\nscripts can be oblivious to whether the `JSBridge` is established or not. Console log api is one\nof the missing pieces in the WebView debugger, any console log calls made before the `JSBridge`\nto Java is established **will not have caller identification** and will instead point to the\ninitialization code that played back the cached log calls generated before the connection was\nestablished.\n\nThe `JSBridge` implementation also provides a mechanism for data persistence between page\nreloads. It is generic enough if all the data you need to persist can be `JSON.stringify'd`\nbecause the implementation does a call back to the WebView engine to serialize the passed in\nstate argument. This text will need to be inserted into the generated HTML page to allow scripts\naccess to their state before the `JSBridge` is hooked in. Scripts can also register for a\ncallback when the `JSBridge` is established.\n\nThe down side of the latter approach, is by the time this happens, WebView has already visually\nupdated the page. If the script is responsible for any visual modification of the page based on\npersisted state then the unmodified version will flash on screen before the script is run.\n\nAllowing scripts to get their state before `JSBridge` is established makes for smoother page\nrefresh.\n\n### Getting Full Featured Debugging\n\nThis requires a little support from the Java to JavaScript bridge and the debug proxy. See the\n[Web View Debug Sample] application for an example.\n\nI have not tried it with Java 9, and suspect that the debug protocol has changed and the proxy\nmay not work with it without modifications.\n\nHowever, these are the instructions to compile for Java 9 WebView debugger access as given by\n[mohamnag/javafx_webview_debugger].\n\n`WebEngine.impl_getDebugger()` is an internal API and is subject to change which is happened in\nJava 9. So if you are using Java 9, you need to use following code instead to start the debug\nserver.\n\n:information_source: This code is now part of `DevToolsDebugProxy` and if it works on the JRE then debugging will\nbe available. Otherwise, it will not.\n\n```java\nClass webEngineClazz = WebEngine.class;\n\nField debuggerField = webEngineClazz.getDeclaredField(\"debugger\");\ndebuggerField.setAccessible(true);\n\nDebugger debugger = (Debugger) debuggerField.get(webView.getEngine());\nDevToolsDebuggerServer devToolsDebuggerServer.startDebugServer(debugger, WEBVIEW_DEBUG_PORT, 0, null, null);\n```\n\nFor this to work, you have to pass this parameter to Java compiler: `--add-exports\njavafx.web/com.sun.javafx.scene.web=ALL-UNNAMED`.\n\nAs examples, this can be done for Maven as follows:\n\n```xml\n\u003cplugin\u003e\n    \u003cgroupId\u003eorg.apache.maven.plugins\u003c/groupId\u003e\n    \u003cartifactId\u003emaven-compiler-plugin\u003c/artifactId\u003e\n    \u003cversion\u003e3.7.0\u003c/version\u003e\n    \u003cconfiguration\u003e\n        \u003csource\u003e9\u003c/source\u003e\n        \u003ctarget\u003e9\u003c/target\u003e\n        \u003ccompilerArgs\u003e\n            \u003carg\u003e--add-exports\u003c/arg\u003e\n            \u003carg\u003ejavafx.web/com.sun.javafx.scene.web=ALL-UNNAMED\u003c/arg\u003e\n        \u003c/compilerArgs\u003e\n    \u003c/configuration\u003e\n \u003c/plugin\u003e\n```\n\nor for IntelliJ under **Additional command line parameters** in **Preferences \u003e Build,\nExecution, Deployment \u003e Compiler \u003e Java Compiler**.\n\n[IntelliJ IDEA]: http://www.jetbrains.com/idea\n[Markdown Navigator]: http://vladsch.com/product/markdown-navigator\n[mohamnag/javafx_webview_debugger]: https://github.com/mohamnag/javafx_webview_debugger\n[Web View Debug Sample]: https://github.com/vsch/WebViewDebugSample\n[Javafx Web View Debugger Readme]: https://github.com/vsch/Javafx-WebView-Debugger/blob/master/README.md\n[JavaFx WebView Debugger]: https://github.com/vsch/Javafx-WebView-Debugger\n[Kotlin]: https://kotlinlang.org\n[TooTallNate/Java-WebSocket]: https://github.com/TooTallNate/Java-WebSocket\n[WebViewDebugSample.jar]: https://github.com/vsch/WebViewDebugSample/raw/master/WebViewDebugSample.jar\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsch%2FJavafx-WebView-Debugger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvsch%2FJavafx-WebView-Debugger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsch%2FJavafx-WebView-Debugger/lists"}