Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webview doesn't render and support deviceEmulation #5488

Closed
soulteary opened this issue May 11, 2016 · 12 comments
Closed

webview doesn't render and support deviceEmulation #5488

soulteary opened this issue May 11, 2016 · 12 comments

Comments

@soulteary
Copy link

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

@deepak1556
Copy link
Member

screenPosition: mobile will disable plugins, hence webview doesn't show up. detach devtools mode is mostly used to inspect processes with no views, hence toggle device mode is not available, its a feature on chromium side.

@zcbenz
Copy link
Member

zcbenz commented 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.

@zcbenz zcbenz closed this as completed May 12, 2016
@GnorTech
Copy link

@soulteary Consider NW.js which supports deviceEmulation.

@soulteary
Copy link
Author

@deepak1556 @zcbenz thx.

@zcbenz
Copy link
Member

zcbenz commented 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
Copy link

@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
Copy link
Member

zcbenz commented 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
Copy link

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
Copy link
Author

soulteary commented 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:

  • use browser bookmark to inject record.js
  • use chrome extension to inject record.js

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

how to emulate mobile page in electron ?

@wbpmrck
Copy link

wbpmrck commented Apr 25, 2017

so the answer is no?

@76765357
Copy link

i have the same question, but no idea........

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants