其实在 Chrome 里是可以方便的截到带手机外壳的网页图片，现在再也不用花时间去找网站，下载手机壳模板。

其中只需要进入 Chrome 的开发者模式，进入的方式有多种。包括：从设置→更多工具→开发者工具；或者直接使用快捷键 F12，Mac 用户快捷键为 Cmd+Opt+I ；以及在打开的页面中直接查看元素等方式直接打开开发者工具。

然后点击左下角的设备图标，变蓝之后，就能从内置的各种设备预览中选择一个，然后选择 100% 的比例，看自己需求可以旋转横屏或者竖屏。然后在右侧选择『Show device frame』，这个时候就会弹出你所选择的移动设备的外壳了。

然后再选择『Capture Screenshot 』，这时就会将完整的截图给下载到本地了，图片格式是 PNG 的哦。

其实在 Firefox 里面也支持网页截图的，不过这个可以截图的整个网页页面，并且并不会带上移动设备的外壳。

同样在进入开发者模式后，点击设置，找到『可用的工具箱按钮』，然后就会出现一个相机的图标，点击该图标就能截图整个的网页了。

via:labnol