替代Chrome扩展程序"Window Resizer"

Question

鉴于最近针对名为"Window Resizer"的Chrome扩展的争议(2013年12月),有哪些替代解决方案可以快速调整Chrome浏览器的大小以进行响应式开发测试？

Answer 1

另一种测试响应式设计的原生解决方案是使用内置的Chrome开发者工具.选择Tools-> Developer Tools,然后单击弹出窗口右下角的齿轮图标.单击"启用",然后单击"设备指标",您可以指定要复制的任何分辨率.

此外,通过更改该屏幕上的"用户代理",Chrome会为所选设备设置设备指标,这可能会在确定响应断点应该位于更受欢迎的设备的位置时派上用场.

这不像双击扩展那么容易,但它具有无扩展解决方案的优势,并且还使用实际设备的精确屏幕测量.

这是一个非常好的建议**,但我需要更好的指示......这是[Google的链接来执行此操作](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) (10认同)

Answer 2

分辨率测试可能是一种可能的选择.

Resolution Test会更改浏览器窗口的大小,以便开发人员以不同的屏幕分辨率预览其网站.它包括常用分辨率列表和自定义列表的功能.它还为用户提供了打开Google浏览器大小的选项.

它可以在Chrome网上商店中找到:

Answer 3

是!

我建议避免扩展,使用键盘快捷键掌握chrome dev工具.

使用
F12
或
ctrl+ shift+ i(Gnu/Linux或Windows)
cmd+ opt+ i(Mac)
或
菜单>工具>开发人员工具打开它们

编辑:更新屏幕截图以反映chrome dev工具最近的更改.

截图 - 第1步,共2步截图 - 第2步,共2步

一个gif说它更好!

所有步骤的gif截屏视频 (提示:在新标签中打开图片)

事实证明,自从我上次使用该功能以来,情况发生了变化.现在你必须点击小手机/手机图标.仿真选项卡中有说明.但是gif总是说它更好.你去,希望它是有帮助的;) (2认同)