您的位置: 首页  >  文章  >  whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

分类: 文章 • 2022-10-31 16:37:33

问题：移动端页面适配不同型号手机和不同浏览器调试

使用whistle原因

在前端页面开发过程中经常遇到真机页面与PC上的Chrome浏览器调试器不一致，例如iPhone上的Safari浏览器、微信自带浏览器等自带的底部导航栏无法在PC上的Chrome浏览器上模拟。
在真机上调试页面又无法查看页面文档结构以及元素属性等代码，导致页面Bug无法定位等问题。
因此，在开发过程中需要使用whistle在真机上进行移动端页面跨平台调试，在PC上预览移动端的页面结构等调试功能。
whistle是基于Node实现的跨平台web调试代理工具，具体详情请自行百度，在此只介绍使用方法不多做赘述。

whistle使用方法

（Windows7环境下，其他环境请参考对照使用）

1、下载安装

  1. 首先下载 node.js 并安装
  2. 打开CMD（win+R 输入cmd点击确定）
  3. 通过NPM下载whistle全局安装（在CMD中输入npm install -g whistle）
  4. 下载完成后运行whistle（在CMD中输入w2 start默认打开端口8899，也可输入w2 start -p 8888修改端口号为8888，以此类推）
  5. 安装Chrome代理插件：推荐安装 SwitchyOmega 。下载SwitchyOmega_Chromium.crx文件，将其拖动Chrome扩展程序（在Chrome浏览器地址栏中输入chrome://extensions/）中。
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
    若直接拖动到Chrome扩展程序中报错：
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
    可以把.crx后缀改为.rar后缀直接解压，再通过点击“加载已解压的扩展程序”选择解压后的文件夹进行插件安装。
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
  6. 配置SwitchyOmega代理服务器

whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

2、配置Wi-Fi代理

1.移动端Wi-Fi配置（以iPhoneX为例）

将移动设备与PC接入同一局域网Wi-Fi，并手动配置代理，输入PC服务器及设置的端口号
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

2.PC端防火墙配置（以Windows7为例）

手机调试或者远程访问时，可能会因为whistle所在机器的防火墙设置，导致无法远程访问，可以通过设置白名单，或者关闭防火墙，具体操作如下：

在控制面板中打开Windows防火墙
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
选择高级设置
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
选择入站规则
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
选择新建规则
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
选择端口点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
选择特定的本地窗口，输入w2 start时填写的端口号（默认为8899），点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
点击下一步
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
输入名称，命名为test，点击完成
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
查看test规则
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

3.访问配置页面

启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

方式1：域名访问 http://local.whistlejs.com/
方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx
whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

3、配置whistle规则

  1. 点击Rules输入要调试页面的本地服务器地址及端口号加weinre://test使用whistle内置的weinre进行调试。
    如下图所示，其中“test”为weinre分类名，可随意设置。
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
  2. 点击Weinre再选择分类名“test”
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
  3. 点击选择访问的页面链接
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）
  4. 再点击Elements就可以在PC上调试真机的移动端页面啦
    whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

本文相关链接

https://nodejs.org/zh-cn/download/
https://github.com/FelisCatus/SwitchyOmega/releases/
http://wproxy.org/whistle/install.html

本文参考链接

https://segmentfault.com/a/1190000019969743
https://segmentfault.com/a/1190000016058875?utm_source=tag-newest
https://www.cnblogs.com/fafa-coding/p/10833547.html
https://imweb.io/topic/5981a34bf8b6c96352a59401
https://jingyan.baidu.com/article/870c6fc317cae7b03ee4be48.html
https://www.jianshu.com/p/2584ebdb88c9

相关推荐