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里面有

所以在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