移动端html网页真机调试,Mac端调试iphone移动端网页

0.前言

今天写好了一个页面，在mac上跑的好好的，结果手机打开直接白屏了。打开chrome的移动端模拟，但是模拟上也是好的，所以就只能开启真机调试了。

1.配置

在iOS设备上打开允许调试：设置→Safari→高级→打开”web检查器“

在MAC上打开Safari的开发菜单：顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单

在iOS设备上的Safari浏览器中打开要调试的页面，然后切换到MAC的Safari，在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页，即可开始远程调试

如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试。

2.bug

找到bug了，因为之前定义的全局变量后面又赋值了一次，在移动端就崩了。

image.png

代码大约长这个样子

// 初始化的时候

let mdArea = $('#mdArea')

// 后面重复赋值

mdArea = $('.textEditor').children('div');

一开始的时候我就只是以为可能是不能重复赋值，所以又新建了一个变量

newMdArea = $('.textEditor').children('div');

结果还是不对，最后才猜到是因为js里面的变量名和html里面的类、id名重复了。

因为我的html里面有

所以在js里面就不能用mdArea作变量名了，哎，移动端的命名空间也太少了吧，html和js居然一个命名空间的。

最后把把变量都加了一个$号解决的问题。

const $codeArea = $('#codeArea');

const $styleArea = $('#styleArea');

const $mdArea = $('#mdArea');

哎，真是迷醉。看来移动端和PC端的代码执行解释差别还挺多啊。

3.彩蛋

第一次调试的时候，发现还能调试到网易云音乐的前端，然后在里面发现了神奇的fuck类，听说是为了解决ie兼容性的常用类(滑稽)。

image.png

移动端html网页真机调试,Mac端调试iphone移动端网页相关推荐

pc端debugger微信、电脑debugger微信、电脑调试微信支付、pc调试微信支付、电脑调试真机微信、通过电脑调试手机真机打开的微信H5页面、通过电脑chrome调试手机真机打开的微信H5
pc端debugger微信.电脑debugger微信.电脑调试微信支付.pc调试微信支付.电脑调试真机微信.通过电脑调试手机真机打开的微信H5页面.通过电脑chrome调试手机真机打开的微信H5 ...
WebApp网页真机调试工具-（Android）
待我年逾花甲,重新回到乡下. 池里养些鱼虾,坡上满是山茶. 不见雾霾黄沙,只有朝阳晚霞. 牛羊伴着鸡鸭,瓜田李下小麻. 孙儿承欢膝下,老伴陪与床榻. 纵是满口假牙,却也笑靥如花. 现在的移动端开发主要 ...
鸿蒙adb调试权限,真机ro.debuggable全局调试权限修改为1（Nexus 6为例）
真机ro.debuggable全局调试权限修改为1(Nexus 6为例) 如果你愿意每次开机都自己手动修改一次,就可以简单的用MT管理器,打开根目录下的default.prop,将ro.debugga ...
H5在iphone移动端如何实现真机调试
最近公司要实现苹果移动端和H5的交互,因为平时用H5的不多,对iOS的比较熟悉,用H5的界面出问题就定位不出问题出在原生端还是H5端.应运而出iphone真机调试H5界面. 设置iphone 1.设置 ...
vue移动端项目实现真机调试
在vue移动端项目中,我们可以通过真机调试来更好的看到项目实际运行在移动端的效果. 下面就来介绍一下实现的方法: 1.使手机与电脑连接在同一个wifi下 2.修改vue.config.js文件配置将 ...
React-Native 使用真机和指定模拟器调试
使用模拟器命令行中React native项目目录下键入 react-native run-ios 会启动iOS模拟器,默认情况启动模拟器调试. react-native run-ios 指定模拟器 ...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
前言为什么要使用阿里图标库: 图标现在是很多地方都会用到的一般我使用的时候都是直接在ui库中比如elementul自带的一些有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...
vue项目手机真机预览和调试
很多项目要模拟手机真机环境才能测的出效果比如像高斯模糊的一些样式特效只有在真机上才看得出来:但是如果要上线上每次都要打包所以很不方便,给大家介绍一下我的方法: 1.** 首先找到 config 下面的 ...
安卓手机调试微信网页, 真机调试模式开启
1. 使用腾讯TBS Studio 1.1 下载地址 https://x5.tencent.com/tbs/guide/debug/download.html 1.2 操作调试指南 https://x ...

移动端html网页真机调试,Mac端调试iphone移动端网页

移动端html网页真机调试,Mac端调试iphone移动端网页相关推荐

最新文章

热门文章