polypane 是专为响应式开发优化的浏览器，支持同步多视口渲染、内置 css 调试面板、离线与网络模拟、跨设备触摸手势模拟及 html 结构差异对比五大核心功能。
如果您正在寻找一款专为响应式网页开发优化的浏览器，Polypane 提供了集成化的多设备预览与实时调试能力。以下是使用 Polypane 进行响应式开发时的核心功能操作说明：
一、同步多视口实时渲染
Polypane 允许在单个窗口中并排打开多个设备尺寸视图，并保持 DOM 与交互状态同步，便于快速验证布局在不同断点下的表现。
1、启动 Polypane 后，点击右上角 + Add viewport 按钮添加新视口。
2、从预设列表中选择 iPhone 14、iPad Pro 或自定义宽度/高度数值。
3、在任一视口中滚动或点击元素，其余视口将自动同步滚动位置与焦点状态。
二、内置 CSS 调试面板
该面板直接嵌入主界面底部，无需切换标签页即可查看并编辑当前选中元素的盒模型、媒体查询匹配状态及伪类激活情况。
1、使用鼠标右键点击页面任意元素，选择 Inspect element。
2、在底部面板中切换至 Styles 标签，修改 CSS 属性后即时生效。
3、勾选 Show media queries 复选框，高亮显示当前激活的断点规则。
三、离线与网络模拟控制
Polypane 支持模拟弱网环境与完全离线状态，帮助开发者验证资源加载失败时的降级逻辑与 Service Worker 行为。
1、点击顶部工具栏中的 Network 图标展开网络控制面板。
一套自选网上商城精美模版，自主商品管理，自行网店经营的网上商城平台，系统具有强大的商品管理、购物车、订单统计、会员管理等功能，同时拥有灵活多变的商品管理、新闻管理等功能，功能强劲的后台管理界面，无需登录FTP，通过IE浏览器即可管理整个网站。西亚购物平台经多方面权威调查和研究为您精心开发了很多特色实用功能。使商品展示、管理、服务全面升级。西亚购物平台为您提供了多款专业美观的店面样式、俱备完整的购物
2、下拉选择 Offline、Slow 3G 或自定义延迟与带宽参数。
3、刷新页面后，所有请求将按设定条件被拦截或延迟返回。
四、跨设备触摸与手势模拟
在桌面端即可模拟移动端特有的触摸事件链（如 touchstart/touchmove/touchend）及双指缩放行为，用于测试手势驱动组件。
1、确保至少一个视口设置为移动设备尺寸（如 375×812）。
2、按住 Ctrl（Windows/Linux）或 Cmd（macOS） 键，再用鼠标左键拖动模拟 touchmove。
3、同时按住 Ctrl + Alt（Windows/Linux）或 Cmd + Option（macOS） 并拖动实现 pinch-to-zoom。
五、HTML 结构差异对比模式
当启用多个视口且加载同一页面时，Polypane 可高亮显示各视口中 DOM 节点结构或属性值的不一致之处，辅助识别响应式 JS 注入逻辑偏差。
1、在两个以上视口中打开相同 URL。
2、点击顶部菜单栏 View → Compare DOM。
3、节点若存在 class 名称、data-* 属性或子元素数量差异，将以 红色背景 标记。
