Feedback

[paulirish]

Please use this issue thread to report your non-bug feedback.

• How does this work within your design & development workflow?
• How could this idea be improved?
• Do you load in 10 devices or just three to doublecheck?
• If we could evolve this into something just perfect, what would things look like?

Again, this extension is an experiment and will hopefully help guide the features and UX inside of Chrome DevTools.

Fire away!

[Qix-]

First off, I'm not sure how I'm just finding out about this. As a nearly exclusive desktop developer, web stuff is something that is almost a decade behind me. This is something I'll be adding to my toolbelt, despite its quirkiness.

I assume the Stream to EDL manual step is a Chrome limitation, which is fine. Even with the guide it wasn't immediately clear what I needed to do. It's a small fix, but adding why you have to do that would have been clearer for me (e.g. Pages won't show up in the lab view until they are streamed to the EDL.)

As well, having to go to the individual windows in order to check touch interaction would definitely slow me down. Is there any way to get that inlined directly on the device view? Ideally, I would never have to go back to the individual windows unless I'm doing something more in-depth with that specific device. I see you can scroll, but that's not the only interaction I'd want to test.

Is there a way to show a Desktop version of the site as well? That could be in its own window, especially if I have a dual screen setup, which would make it incredibly useful.

What about developer tools? It'd be awesome to be able to access and monitor CSS calculations side by side for each device, to be able to see where media queries were acting up for example.

Further, I know I'd run into situations where I'd want to run a javascript command in each device simultaneously. Being able to debug all of them at once would be a damn miracle.

As well, what if I have a physical device for at least one of them that I'd like to accompany? I hate Adobe Edge because it's clunky (though that was back when I did web development more prominently) - a Chrome variation of that, speaking from experience, would be life changing for sure. As a developer, I don't trust emulations to be 100% accurate - sometimes I want to see if there's a quirk between the emulation and a physical device, but being able to debug that device from the device lab panel would be amazing.

Small, but any way to not allow resizing of the individual device windows?

I would definitely load in every device I possibly could. Being able to zoom is great, but you can't click+drag to pan. Being able to click and drag on the grid area where there isn't a device would be awesome.

This is feedback after using it for about 30 seconds; stuff that jumped out at me. I understand that it's early development but more device configurations would be neat (i.e. iPhone 6 [Plus], etc.)

Awesome stuff. I could easily see this becoming a go-to tool for developers and designers alike.

[kdzwinel]

@Qix- thank you for a wonderful feedback!

Stream to EDL manual step is a Chrome limitation

Correct - faq .

adding why you have to do that would have been clearer for me

Good input! Not sure where that fits in the UI though - maybe we should just add it to the guide?

having to go to the individual windows in order to check touch interaction

Touch events should work just fine and be synced between devices ( faq ). Let me know about your specific issue.

Is there a way to show a Desktop version of the site as well?

You are free to create your own devices using "Device Manager".

What about developer tools?

You can open devtools for each device window, but there are no plans to incorporate devtools in EDL window ATM. That'd be a huge challenge.

I know I'd run into situations where I'd want to run a javascript command in each device simultaneously

Code-wise it's simple to implement, not sure what about the UI though - how should it look? Should it report JS results back from all devices?

As well, what if I have a physical device for at least one of them that I'd like to accompany?

I like the idea, but there is no easy way for a Chrome extension to debug remote target AFAIK. It might be doable though.

Small, but any way to not allow resizing of the individual device windows?

Why do you think that's useful? IMO it's better to keep the correct proportions between the devices.

you can't click+drag to pan

Good idea! That should make navigation much easier.

---

Thanks again for input, I'll create separate issues for these ideas.

[Qix-]

Good input! Not sure where that fits in the UI though - maybe we should just add it to the guide?

Either in the guide, or on the device itself when no streaming is happening (a hint of some sort).

Touch events should work just fine and be synced between devices ( faq ). Let me know about your specific issue.

They do in the individual windows, sure, but not on the device dashboard itself. At least for me, when I click and drag it tries moving the device itself.

EDIT: Which I see here that that's a known thing. All devices marked mobile should have mouse input forwarded as touch interactions IMO.

Code-wise it's simple to implement, not sure what about the UI though - how should it look? Should it report JS results back from all devices?

Yeah, ideally. Could be as simple as hooking console functions and showing the output in a console somewhere on the UI, pertaining to that device. I don't know if I'd want all of them open at once, or just a few - I can think of situations for both. How it would be shown in the UI is the challenge.

I like the idea, but there is no easy way for a Chrome extension to debug remote target AFAIK. It might be doable though.

I know it's at least possible but I'm not sure if that interface is accessible to extensions.

Why do you think that's useful? IMO it's better to keep the correct proportions between the devices.

I agree; I think the not was missed in that sentence. Currently individual windows can be resized. Not sure if Chrome honors the window.open() parameters but IIRC you can restrict the resizing of child windows, which is what should happen.