Thursday, December 15, 2016

chrome's mobile device emulation with the phone around it

Shown: the "before" from an
upcoming redesign...
I guess it wasn't too too many years ago that Firefox's "Firebug" was the web developer's friend, the main way of getting insight into the piecesparts of a webpage, but Chrome's devtools have become the new standard.

One useful part of it is the emulation of various phones and devices, so that sites with specialized mobile modes can be accurately emulated. For one page I also wanted some fake-y "screenshots on phone" with the gadget's hardware bezel etc visible around the sides of the content. It wasn't easy to google for, but eventually I realized at the top right of the bar with the device picker was a "..." menu (except the dots were arranged vertically) and one of the options was "Show Device Frame"

So, just mentioning it here for reference for my future self, or in case it helps some trying to google for it.

No comments:

Post a Comment