search

vsch / Javafx-WebView-Debugger

Full Featured Google Chrome Dev Tools to JavaFX WebView browser debugging.
MIT License
65 stars 11 forks source link

Open The Elements Panel Like like in Google Chrome with ctrl+shift+c #2

Open ilkerceng opened 5 years ago

ilkerceng commented 5 years ago

Is it possible to integrate to java fx WebView: inspect elements in real-time like Google Chrome ctrl+shift+c capabbility on hover html elements and send selected data to the server app?

vsch commented 5 years ago

@ilkerceng, the only thing I figured out for now is to highlight the element which is being hovered over in Chrome Dev Tools.

It is a bit of a kludge since it adds a class to the element to provide the highlight.

webviewdebugger

ilkerceng commented 5 years ago

Thank you @vsch. How could you do that? is it possibble to share code?

vsch commented 5 years ago

@ilkerceng, it is all part of the WebViewDebugSample with all source code.

The highlighting code is part of the debugger script used to provide the bridging between debugger, java and HTML javascript: https://github.com/vsch/Javafx-WebView-Debugger/blob/master/src/main/resources/markdown-navigator.js#L169-L186

I have to admit getting it all to work resulted in somewhat convoluted code but all that Async and modalities of the script engine don't make it easy.

I also found that the only Chrome version which works reliably for console output is 65.0.3325.181 under OS X. Newer versions work but console pane is not enabled. The readme has a link to chrome version downloads and I opted out to install the working version rather than trying to figure out what is different in the newer versions that causes them not to work.

ilkerceng commented 5 years ago

@vsch thanks for detailed info. i am trying to understand, i will dive into details of each module used in java and js separately later. i have just imported the project and run it. for now, it is ok for me. i am trying to create a robot for any webpage to be able to crawl selected area, i will design a simple IDE integrating a browser in it. i will wrap with custom fields any selected area, so my process should be -> click any html element, highlight with any drawing, and go to the IDE, wrap selected data with some customization, then repeat this process. so later i really need when a user click on an HTML element, it should be wrapped with some drawing to know which data is selected. thanks for your excellent work.

vsch commented 5 years ago

@ilkerceng, one thing to look out for is the need for Java to setup a JsBridge for JavaScript to use for call backs.

The webview script engine is created on page load so this bridge cannot be setup before page is loaded. This complicates the initialization since the script in the page will run before JsBridge is setup.

roughloadsequence

The injected helper script sets up the calls so that ones which need JsBridge are stored as lambdas which will execute when JsBridge is setup. This means that timing of these calls will not occur when they are invoked but at a later time when JsBridge is setup.

This also means that console log calls before JsBridge is setup will have the stack trace showing the markdown-navigator.js source not the original source because JsBridge is used to get the stack trace.