Mac端调试iphone移动端网页

0.前言

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

1.配置

  1. 在iOS设备上打开允许调试:设置→Safari→高级→打开”web检查器“
  2. 在MAC上打开Safari的开发菜单:顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单
  3. 在iOS设备上的Safari浏览器中打开要调试的页面,然后切换到MAC的Safari,在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页,即可开始远程调试
  4. 如果没有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里面有

 <pre id="mdArea"></pre>

所以在js里面就不能用mdArea作变量名了,哎,移动端的命名空间也太少了吧,html和js居然一个命名空间的。
最后把把变量都加了一个$号解决的问题。

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

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

3.彩蛋

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


image.png

参考链接
https://aotu.io/notes/2017/02/24/Mobile-debug/index.html
https://github.com/jieyou/remote_inspect_web_on_real_device#%E8%B0%83%E8%AF%95ios%E4%B8%8A%E7%9A%84safari

推荐阅读更多精彩内容