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