Make screenshot of website with device frame in Chrome
source link: https://www.panayiotisgeorgiou.net/make-screenshot-of-website-with-device-frame-in-chrome/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Make screenshot of website with device frame in Chrome
All modern browsers offer mobile emulation tools, and one of the best can be found in Chrome. The post will show you how to Make screenshot of website with device frame in Chrome. It is very useful for developers to check how their web sites look on smartphones and small screen devices.
Here what you need to do:
1. Start Chrome, navigate to the web page you want to test and open the Developer Tools
(Menu > Tools > Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux).
2. Click the mobile device emulator button to switch the Developer Tools mode
3. Show device frame
4. Select device to emulate
The drop-down menu on the left allows you to select a device. Several dozen presets are provided for popular smart phones and tablets, including iPhones, iPads, Kindles, Nexus tablets, Samsung Galaxy, and so on.
Not all devices are presented at once. Click Edit… at the bottom of the device drop-down or click the DevTools Settings
That’s it for now.
If you liked this article, then please subscribe to my YouTube Channel for video tutorials.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK