Programmatically controlling devtools Emulation

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

Programmatically controlling devtools Emulation

Postby itsthetaste » Tue Jul 15, 2014 8:19 pm

I'm looking for a programmatic way to control the Emulation panel within the dev tools so that I can change my CEF browsers useragent, viewport and devicePixelRatio.

I've searched around and the best info I can find is within this thread.
https://code.google.com/p/chromium/issu ... ?id=345610

In the thread somebody suggests using the chrome.debugger API and sending in commands like
Network.enable
Network.setUserAgentOverride
Page.enable
Page.setDeviceMetricsOverride

I can't find any information here relating to this, but am wondering, is this possible with CEF and if so could you point me in the right direction.

Thanks in advance
Richard
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 3:52 pm

So I've done some more research and think I might have a way.

https://www.igvita.com/2012/04/09/drivi ... ocket-api/

Probably not news to a lot here, but was for me, turns out that the remote debug port is actually a websocket which you can send messages to.
So, I might be able to do what I want without the need for chrome.debugger which after reading a lot more posts here looks like it needs to be used within a chrome extension which is not supported with CEF.
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 4:34 pm

Its definitely going to work. :)

Opened the cefclient like this
cefclient.exe --remote-debugging-port=8888
then opened another instance of chrome.
and navigated to http://localhost:8888/json
that gave me this
Code: Select all
[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/devtools.html?ws=localhost:8888/devtools/page/C5E727BD-6A8D-44B3-8DDF-5430F1EE29D1",
   "id": "C5E727BD-6A8D-44B3-8DDF-5430F1EE29D1",
   "title": "About Version",
   "type": "page",
   "url": "chrome://version/",
   "webSocketDebuggerUrl": "ws://localhost:8888/devtools/page/C5E727BD-6A8D-44B3-8DDF-5430F1EE29D1"
} ]

So I opened the console in that browser and created a websocket using the webSocketDebuggerUrl above
Code: Select all
var ws = new WebSocket('ws://localhost:8888/devtools/page/C5E727BD-6A8D-44B3-8DDF-5430F1EE29D1');

checked it was connected
Code: Select all
ws.readyState

came back with 1 so its connected
Then sent a command to change the url
Code: Select all
ws.send(JSON.stringify({
        id: 1,
        method: 'Page.navigate',
        params: {url: 'http://www.vee24.com'}
      }));

and it changed :)
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 6:08 pm

sending
Code: Select all
ws.send(JSON.stringify({
   id:1,
   method: 'Page.setDeviceMetricsOverride',
   params: {
      width: 640/2,
      height: 960/2,
      deviceScaleFactor: 2,
      emulateViewport: true,
      fitWindow: false,
      textAutosizing: true,
      fontScaleFactor: 1
   }
}));

allowed me to change the size.
So what I need to find now is the documentation for the version of the protocol implemented by the cef version Im using which is 3.1916.1749, as this documentation http://src.chromium.org/viewvc/blink/tr ... ion=178062 doesnt match.

If I cant find it, then I read here https://developer.chrome.com/devtools/d ... r-protocol that you can attach a debugger to a debugger and watch the websocket messages and work out whats sent.
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 6:20 pm

itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 7:14 pm

currently downloading chromium 35.0.1916.138 following the instructions here https://code.google.com/p/chromiumembed ... ndBuilding.
taking a while, but at least it will be the exact version of protocol.json that matches what im using.
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 7:39 pm

Whilst downloading I realised that the Protocol.json doesnt belong to the chromium source but is in fact part of blink.
Further browsing revealed this
http://src.chromium.org/viewvc/blink/br ... ion=170401
So, I think this is what I will use, as it looks like there is one blink branch for each major version of chromium.
Going to let the chromium finish downloading anyway, as it cant hurt and Im sure theres lots to learn in there.
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 8:31 pm

Inspecting the Inspector is also cool as it shows the commands being sent via the websocket.

I've attached a screenshot.

Enough playing around, now I need to go and use this in my project.
Attachments
Inspecting the Inspector.png
Inspecting the Inspector
Inspecting the Inspector.png (324.24 KiB) Viewed 16450 times
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm

Re: Programmatically controlling devtools Emulation

Postby itsthetaste » Thu Jul 17, 2014 8:44 pm

itsthetaste wrote:Whilst downloading I realised that the Protocol.json doesnt belong to the chromium source but is in fact part of blink.
Further browsing revealed this
http://src.chromium.org/viewvc/blink/br ... ion=170401
So, I think this is what I will use, as it looks like there is one blink branch for each major version of chromium.
Going to let the chromium finish downloading anyway, as it cant hurt and Im sure theres lots to learn in there.


Actually I was half wrong here.
After letting chromium download fully the file is there
src\third_party\WebKit\Source\devtools\protocol.json

Getting it directly from the blink source is probably easier though, but i've got it now and they match each other :)
itsthetaste
Techie
 
Posts: 35
Joined: Mon Jun 10, 2013 8:03 pm


Return to Support Forum

Who is online

Users browsing this forum: No registered users and 27 guests