Developer Tools

[voltov]

Hello,

I tried searching the forum for same question, but couldn't find a clear answer.

Is there a framework or mechanism to interact with Developer Tools? For example get HMTL node that is currently selected by "Inspect element" tool? And so on. I need to get various details from the Developer Tools. Is it already possible somehow?

[salvadordf]

Hi,

You need to use the DevTools protocol to get that information.

Read this message for more information and the links to the protocol :
https://www.briskbard.com/forum/viewtop ... 992&p=4370

[voltov]

I'm looking into Puppeteer and DevTools protocol examples. But I can't quite figure out how to communicate with actively opened DevTools.

salvadordf, maybe you or someone else on the forum has experience or information on this. Basically I need to be able to track Inspector tool events and to be able to communicate with DevTool call from my Delphi executable code like "document.getElementById('username')" and receive the result Is that even possible in theory?

[salvadordf]

I'm sorry but I've never used that protocol to communicate with the DevTools.

If you just need to get results from a JavaScript function then you can use the existing CEF4Delphi demos inside the "JavaScript" directory.
You can execute any JavaScript code and call custom functions to send any information to your Delphi code in the browser.

Read the code comments in the JSExtension demo for more details.

[voltov]

Hello, I've made some progress in what I'm trying to do, but I'm facing a problem.

In Chrome, when I open DevTools and use Inspector tool to click and inspect any HTML element - then I can use $0 reference to access last selected element by "historical reference", as documented here:
https://developers.google.com/web/tools ... lities#dom

So in my project, I registered a simple extension in Chromium that sends a string to my "ProcessMessageReceived" method , but when I call the following code:

Code: Select all

Browser.MainFrame.ExecuteJavaScript('myExtension.getNodeData($0.innerHTML);', ABOUT_BLANK, 0)

then I get the following error message in Chromium log:

Code: Select all

[0302/171257.671:INFO:CONSOLE(1)] "Uncaught ReferenceError: $0 is not defined", source: about:blank (1)

Does CEF work with DevTools in some specific way? Or is JS executed somehow specifically?

[voltov]

Nevermind my last post, I noticed big red warning in the documentation: "Warning: These functions only work when you call them from the Chrome DevTools Console. They won't work if you try to call them in your scripts."

I guess I should try to extend DevTool somehow...

[coater]

$0 is not a global variant, I guess

[shobits1]

for the last 3 days, I was trying to figure out how to use Chrome DevTools Protocol.. and this is what I found:

1.You need to set enable remote debugging for CEF

Code: Select all

GlobalCEFApp.RemoteDebuggingPort := 9555 {port is 9555 in my case}

2.Use HTTP Get method to get information from page:
http://127.0.0.1:9555/json/list or http://localhost:9555/json/list
you'll get something like this :

Code: Select all

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9555/devtools/page/CCEA8242021218B9E36BBEEDA2B806F5",
   "id": "CCEA8242021218B9E36BBEEDA2B806F5",
   "title": "about:blank",
   "type": "page",
   "url": "about:blank",
   "webSocketDebuggerUrl": "ws://localhost:9555/devtools/page/CCEA8242021218B9E36BBEEDA2B806F5"
} ]

3.You need WebSocket Client to communicate with Chrome DevTools Protocol

4.Connect your WebSocket Client to webSocketDebuggerUrl

5.Now you can Send Requests and Receive Responses To and From Chrome DevTools Protocol,, all messages should be valid JSON

here in https://chromedevtools.github.io/devtoo ... ot/Browser you can find each supported method and it's parameters, for example if you wanna goto certain page you Send Request with JSON message like this

Code: Select all

{    "id" : 1,
     "method" : "Page.navigate",
     "params" : {
         "url" : "http://progres.mesrs.dz/webfve"
     }
}

for more information check:
https://github.com/aslushnikov/getting-started-with-cdp
https://chromedevtools.github.io/devtools-protocol/

[coater]

"name": "performSearch",
"parameters": [
{ "name": "query", "type": "string", "description": "Plain text or query selector or XPath search query." },
{ "name": "includeUserAgentShadowDOM", "type": "boolean", "optional": true, "description": "True to search in user agent shadow DOM." }
]
"name": "getSearchResults",
"parameters": [
{ "name": "searchId", "type": "string", "description": "Unique search session identifier." },
{ "name": "fromIndex", "type": "integer", "description": "Start index of the search result to be returned." },
{ "name": "toIndex", "type": "integer", "description": "End index of the search result to be returned." }
]

ws.send(JSON.stringify({
id: 0,
method: "DOM.enable"
}));
ws.send(JSON.stringify({
id: 2,
method: "DOM.performSearch",
params: {query: "-webkit-input-placeholder", includeUserAgentShadowDOM: true} //-webkit-input-placeholder is a string for your search
}));
ws.send(JSON.stringify({
id: 1462,
method: "DOM.getSearchResults",
params: {searchId: "1000004360.1137", fromIndex: 0, toIndex:10}
}));
------------------
May you run this successfully(after "performSearch", and the results in a user agent shadow DOM) ?
Although I can get another results if it is not in a user agent shadow DOM.
I always encounter error: "Invalid search result range"! (in a user agent shadow DOM)

[shobits1]

it doesn't work for me either