Chromium Embedded Framework Forum

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

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.

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

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.

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 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