Skip to content

webview doesn't render and support deviceEmulation #5488

Closed
@soulteary

Description

@soulteary
  • 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

deepak1556 commented on May 11, 2016

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

zcbenz commented on May 12, 2016

@zcbenz
Contributor

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

GnorTech commented on May 12, 2016

@GnorTech

@soulteary Consider NW.js which supports deviceEmulation.

soulteary

soulteary commented on May 12, 2016

@soulteary
Author
zcbenz

zcbenz commented on May 12, 2016

@zcbenz
Contributor

@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

GnorTech commented on May 12, 2016

@GnorTech

@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

zcbenz commented on May 12, 2016

@zcbenz
Contributor

@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

GnorTech commented on May 13, 2016

@GnorTech

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

soulteary commented on May 13, 2016

@soulteary
Author

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

gengdaoping commented on Jan 5, 2017

@gengdaoping

how to emulate mobile page in electron ?

wbpmrck

wbpmrck commented on Apr 25, 2017

@wbpmrck

so the answer is no?

76765357

76765357 commented on May 31, 2018

@76765357

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @zcbenz@deepak1556@wbpmrck@soulteary@76765357

        Issue actions

          webview doesn't render and support deviceEmulation · Issue #5488 · electron/electron