In the latest version of Chrome Canary, a beta channel for the browser, a new
featured was added to the DevTools responsive layout allowing you to easily
create a screenshot, including a mobile frame.
As shown in the animation, the steps are:
- Open DevTools
- Select Device Type
- In Settings, select “Show device frame”
- In Settings, select “Capture screenshot”
Here is the example screenshot it captured:
It will show the proper device frame for which ever device you select. You will
need to use the Canary version until these new features make it into
the main version of Chrome.
Another nice feature is to view what it looks like with the system keyboard
open, and browser chrome showing.
These tips and more were included in the Google I/O talk, DevTools in 2016:
Accelerate your workflow, now available on YouTube.