Mac——基于Similator和Safari调试移动端页面

简介: 最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。

前言

最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了Mac,所以就可以先用Simulator来调试下;

macOS Sonoma: 14.6.1(23G93)

内容

主要基于simulatorSafari来实现完整的配合调试,Simulator模拟设备,Safari进行调试;

创建设备

打开聚焦搜索(command+空格),输入simulator打开应用后,可以在File->Open Simulator下选择你需要模拟的设备,如下图所示;

devtool_04.pngdevtool_04.png

如果没有你需要模拟的设备,你可以同样点击File->New Simulator创建一个新的设备,通过选择Device Type来确定要模拟的设备类型,创建后设备默认不会自动打开,依然要在File->Open Simulator下去选择打开;

devtool_03.pngdevtool_03.png

调试页面

如果Mac端的Safari没有打开显示网页开发者功能,记得先打开下;

开发->开发者设置->高级->勾选显示网页开发者功能

调试的时候,请务必按着以下的操作步骤进行操作:

  1. simulator下,先打开模拟器
  2. 打开模拟器中的Safari浏览器,输入要调试的项目地址
  3. 打开Mac下的Safari浏览器,选择对应的设备并点击页面,即可进行调试;
    devtool_02.pngdevtool_02.png

devtool_01.pngdevtool_01.png

目录
相关文章
|
Web App开发 Android开发 iOS开发
iOS 调试:通过 Safari/Chrome 调试 WebView
iOS 调试:通过 Safari/Chrome 调试 WebView
6334 0
iOS 调试:通过 Safari/Chrome 调试 WebView
|
8月前
|
计算机视觉 C++
Mac系统下vscode调试opencv环境搭建
Mac系统下vscode调试opencv环境搭建
171 1
|
Web App开发 iOS开发
Mac Safari 配置 IE 代理 (支持 IE 调试)
Mac Safari 配置 IE 代理 (支持 IE 调试)
1159 0
|
iOS开发 MacOS
Mac版网络调试助手打开多个页面
网络调试助手,直接在APP store下载。因为是两个网络调试助手之间的通信,因此我们需要双开该软件。
275 0
|
C语言 C++ iOS开发
mac下vscode调试c的环境配置
mac下vscode调试c的环境配置
|
Java Shell Linux
Mac阅读spring 5.0.x版本源码准备(windows差不多一样),附报错解决及准备阶段调试
Mac阅读spring 5.0.x版本源码准备(windows差不多一样),附报错解决及准备阶段调试
Mac阅读spring 5.0.x版本源码准备(windows差不多一样),附报错解决及准备阶段调试
|
Web App开发 iOS开发 开发者
mac 下用 safari 调试 iOS 端页面
第一步:打开iphone手机的开发者模式,流程是:【设置】->【Safari】->【高级】->开启【Web检查器】
688 0
mac 下用 safari 调试 iOS 端页面
|
Android开发 iOS开发 MacOS
Mac os系统android studio无法识别部分安卓手机,无法进行调试
Mac os系统android studio无法识别部分安卓手机,无法进行调试
|
4月前
|
iOS开发 MacOS Windows
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
Mac air使用Boot Camp安装win10 ,拷贝 Windows 文件时出错
|
2月前
|
开发工具 git 开发者
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置
本篇将专注于如何在 DevEco Studio 中安装和配置必要的插件,以增强开发功能和提升效率。通过正确配置插件,开发流程能够得到简化,开发体验也会更加顺畅。
141 1
「Mac畅玩鸿蒙与硬件3」鸿蒙开发环境配置篇3 - DevEco Studio插件安装与配置