Closed
Description
- Electron version: v0.37.8
- Operating system: OSX 10.11.4
Hi, I've some problem with electron on devtools(both BrowserWindow and webview)/deviceEmulation.
I use <webview>
tag to load url which page i wanna test.
If i use enableDeviceEmulation
in BrowserWindow
, the <webview>
wouldn't render any content, unless i open BrowserWindow's devtools and click [toggle device mode]
.
Code here:
let mainWindow = new BrowserWindow({
show : false,
width : 1024,
height: 728
});
const webContents = mainWindow.webContents;
webContents.enableDeviceEmulation({
screenPosition: 'mobile',
screenSize: { width: 480, height: 640 },
deviceScaleFactor: 0,
viewPosition: { x: 0, y: 0 },
viewSize: { width: 480, height: 640 },
fitToView: false,
offset: { x: 0, y: 0 }
});
// whether you open devtools and click toggle device button.
// mainWindow.openDevTools();
Then i remove above code. Just wait webview dom-ready
, and open webview's devtools , i found the devtools doesn't contain toggle device mode
button, and i can't enableDeviceEmulation
in webview
.
I found if i detach the BrowserWindow's devtools window, it's toggle device button will miss as the same, but it seems no way to dock the webview's devtools window...
Activity
deepak1556 commentedon May 11, 2016
screenPosition: mobile
will disable plugins, hencewebview
doesn't show up.detach
devtools mode is mostly used to inspect processes with no views, hencetoggle device mode
is not available, its a feature on chromium side.zcbenz commentedon May 12, 2016
I'm closing this since it is an expected behavior of Chromium, and we are not able to change this on Electron's side, if you would like to change this I suggest creating an issue at Chromium's issues list.
GnorTech commentedon May 12, 2016
@soulteary Consider NW.js which supports deviceEmulation.
soulteary commentedon May 12, 2016
@deepak1556 @zcbenz thx.
zcbenz commentedon May 12, 2016
@GnorTech Thanks for answering this issue, even though you didn't actually read it.
Please allow me to share you some experience on how to promote an open source project, since you are trying hard to do that. One of the keys is issues management, you need to answer every issue, categorize them, and close them when they are resolved, so people can trust your project and are confident to contribute to it.
I'm not saying you do not understand that, it is just amusing that you spend more time answering issues in Electron instead of NW.js, while trying to persuade people to use the latter.
GnorTech commentedon May 12, 2016
@zcbenz I do read the requirement. I'm just helping @soulteary and give him a way out with a feature in NW which you don't want to support. I don't see any problem in it. Promoting NW is just a side effect.
If you're curious on my role in NW, unfortunately that doesn't include issue scrubbing. My work has been focused on helping Chromium rebase so that NW could release after Chromium upgrade soon.
zcbenz commentedon May 12, 2016
@GnorTech No you didn't, if you really read it you will find out it is not about
enableDeviceEmulation
working, it is about<webview>
. You are not helping people, you are just trolling.GnorTech commentedon May 13, 2016
Hey @zcbenz the issue is about webview and the device emulation, as OP said
open webview's devtools , i found the devtools doesn't contain toggle device mode button, and i can't enableDeviceEmulation in webview"
.btw, NW's webview has more features than the one in Chromium, you probably didn't know it.
soulteary commentedon May 13, 2016
Hey @GnorTech / @zcbenz , thank you again, both of you're nice and plz take it easy.
** SORRY FOR MY POOR ENGLISH 😁 **
You're right but no all, is my fault, i should describe more clearly.
I'm trying to make a software, aimed at helping front-end coders to test GUI and users action on web page easier, just like someone suggest that electron may able to.
The web page running in standard browser/any kind of webview.
I've tried these way to collect user action:
They work find at most scenes, but i'm trying to record case by case, there're so many case need to managed.
Because developer's testing target in different network environment as usual, replay user action in server by casper.js/phantomjs is a way but not a wise choice.
Because browser plugin api possible changes with browser release new version, and it often update, it won't be a reliable base for replay or manage test case which record by developer.
So, make browsers or use browser like container(just like electron or node-webkit) is better way to help me finish the job.
that's all my demands.
But when i try to use electron to record my test case, i found it's
<webview>
can't offer the device emulator, so many mobile website will doesn't work, then i ask you this question.We know that two heads are better than one.
Both electron and nw.js are great one, it is not necessary to quarrel or angry.
Maybe we should seeking common ground while putting aside differences.
gengdaoping commentedon Jan 5, 2017
how to emulate mobile page in electron ?
wbpmrck commentedon Apr 25, 2017
so the answer is no?
76765357 commentedon May 31, 2018
i have the same question, but no idea........