安装和启动模拟器

安装ios模拟器

安装Xcode，则自动安装了ios模拟器——simulator

在此次安装中，要求mac系统升级到10.15.5

启动ios模拟器

1. 同时点击Command + space，打开搜索栏
2. 输入simulator，选择搜索到的程序，即可打开

使用技巧：

• 同时打开多个ios模拟器

• 使用模拟器自带的输入键盘

安装Android模拟器

1. 安装Android Studio，下载链接
2. 启动Android Studio
3. 安装flutter、dart插件
   • 打开插件首选项 (Preferences>Plugins on macOS).
   • 搜索flutter和dart插件，点击install
   • 安装完成，重启Android Studio
4. 安装Android sdk
   • 打开插件首选项 (Preferences>Appearance on Behavior>System Settings>Android SDK).
   • 至少安装一个sdk版本
   • 选择安装sdk tools
5. 安装模拟器
   • 打开ADV
   • 点击按钮 Create Virtual Device,打开新弹框
   • 选择一个phone机型，点击next，直至安装完成

启动Android模拟器

• 打开ADV
• 点击安装的模拟器对应的三角按钮

注意事项：在Android模拟器中，如果出现网络连接问题，可以进行dns配置。系统偏好设置>网络>高级>DNS，增加8.8.8.8

启动Flutter项目

编辑器：Visual Studio Code,打开当前的flutter项目

• 点击F5按钮,选择一个模拟器,即可启动flutter项目
  

编辑器：Android Studio,打开当前的flutter项目

• 选择一个模拟器,点击“三角”按钮,即可启动flutter项目
  

debug APP中的web开发

使用safari浏览器

• 在启动模拟器后，重新打开safari浏览器
• 选择（开发）,可以看到模拟器选项
  
• 在每个模拟器选项后面，选择当前打开的网页地址，即可打开该网页的debug界面

使用Google/inspect

• 将手机与PC通过数据线连接，同时打开手机上的 开发者选项、USB调试
• 在谷歌浏览器打开 chrome://inspect/#devices，可以看到该手机上的页面信息
  
• 在flutter项目的配置中，打开debug调试 debuggingEnabled: true,在该手机上启动flutter项目。则该项目的网页信息也会出现在 chrome://inspect/#devices页面

使用charles调试

• 安装Charles，下载链接
• 打开Charles
• 安装证书 Help>SSL Proxying>Install Charles Root Certificate/Install Charles Root Certificate in IOS Simulators
• 同时将上面的证书加入PC的信任列表
• 开启 Proxy>macOS Proxy

备注：

• 如果电脑还有其他的网络代理设置，需要在Charles启动之后在开启。否则Charles可能无法代理PC请求