如何在iPhone Simulator上以网页形式而非应用形式测试Flutter网站

你之前的操作是直接把iPhone Simulator作为Flutter的运行目标，这种方式默认会编译原生iOS应用安装到模拟器，自然是以APP形式运行，要测试网页形态的站点按以下步骤操作即可：

步骤1：启动允许外部访问的Flutter Web调试服务 #

不要选择iOS模拟器作为运行目标，在项目根目录执行以下命令启动Web调试服务，指定固定端口和允许局域网访问的主机地址：

flutter run -d chrome --web-port=8080 --web-hostname=0.0.0.0

参数说明：

• --web-port=8080 指定固定访问端口，你也可以改成其他未被占用的端口
• --web-hostname=0.0.0.0 允许同局域网下的所有设备访问本地调试服务，默认仅支持本机localhost访问，不加这个参数模拟器无法打开站点

步骤2：查询Mac本地局域网IP #

在终端执行命令查询你的Mac在当前局域网下的IP地址：

ifconfig | grep inet

找到en0网卡下格式为192.168.x.xxx的地址，就是你需要用到的本地IP。

步骤3：在iPhone Simulator中访问网页站点 #

• 启动你需要测试型号的iPhone Simulator
• 打开模拟器自带的Safari浏览器
• 在地址栏输入 http://[你刚才查询到的Mac本地IP]:8080 即可访问网页形态的Flutter站点

补充调试技巧 #

• 需要热重载时保持执行flutter run的终端窗口开启，修改代码后在终端按r，再刷新模拟器Safari页面就能同步最新修改
• 要测试生产环境表现的话，先执行flutter build web构建生产产物，再用任意静态文件服务工具托管build/web目录，后续访问方式和上述一致
• 调试时遇到接口跨域问题，可以在启动Web调试服务时追加参数 --web-browser-flag "--disable-web-security" 临时关闭安全限制，该配置仅可用于本地调试场景

内容的提问来源于stack exchange，提问作者Animalis App