Developer Tools

voltov
Posts: 12
Joined: Tue Jun 13, 2017 11:01 am

Developer Tools

Post by voltov » Fri Feb 21, 2020 3:21 pm

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?

User avatar
salvadordf
Posts: 2223
Joined: Thu Feb 02, 2017 12:24 pm
Location: Spain
Contact:

Re: Developer Tools

Post by salvadordf » Fri Feb 21, 2020 4:29 pm

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/viewtopic.php?f=8&t=992&p=4370

voltov
Posts: 12
Joined: Tue Jun 13, 2017 11:01 am

Re: Developer Tools

Post by voltov » Tue Feb 25, 2020 5:01 pm

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?

User avatar
salvadordf
Posts: 2223
Joined: Thu Feb 02, 2017 12:24 pm
Location: Spain
Contact:

Re: Developer Tools

Post by salvadordf » Tue Feb 25, 2020 5:18 pm

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

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
Posts: 12
Joined: Tue Jun 13, 2017 11:01 am

Re: Developer Tools

Post by voltov » Mon Mar 02, 2020 3:52 pm

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/chrome-devtools/console/utilities#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
Posts: 12
Joined: Tue Jun 13, 2017 11:01 am

Re: Developer Tools

Post by voltov » Mon Mar 02, 2020 4:36 pm

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
Posts: 81
Joined: Sat Sep 29, 2018 1:51 pm

Re: Developer Tools

Post by coater » Sat Mar 21, 2020 10:26 am

$0 is not a global variant, I guess

shobits1
Posts: 11
Joined: Wed Mar 04, 2020 9:16 pm

Re: Developer Tools

Post by shobits1 » Tue Mar 24, 2020 7:20 pm

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/devtools-protocol/tot/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
Posts: 81
Joined: Sat Sep 29, 2018 1:51 pm

Re: Developer Tools

Post by coater » Wed Mar 25, 2020 12:39 pm

"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
Posts: 11
Joined: Wed Mar 04, 2020 9:16 pm

Re: Developer Tools

Post by shobits1 » Wed Mar 25, 2020 5:32 pm

it doesn't work for me either :?: :!:

Post Reply