要问我Mac上最好用的浏览器是什么,这个我还真不好回答,我目前一直在使用的是Chrome,不管是开发还是浏览,基本上都是使用Chrome来满足需求,但是safari在IOS的开发上有着天生的优势,这个优势就是我可以在Mac上直接远程调试手机上的界面,类似与Android的Remote Debugging on Android with Chrome - Google Chrome.
第一次打开Safari的时候在顶部菜单栏是看不到开发这个选项的,这时需要手工开启"在菜单栏中显示开发菜单这个选项"
开启了之后就会出现Safari的开发菜单,大概内容如下图
Safari的开发菜单已经配置好了,下面就开始着手调试我们的手机页面,这里有两种方式,一种是利用Xcode开启一个IOS模拟器,还有一种就是利用真机来调试.
先来说第一种,即使你手头上没有IOS设备(我认为这不太可能),你也可以调试IOS页面.
作为前端开发如果不是做Hybrid开发很少会去使用Xcode写代码,不过有些Xcode的功能还是需要了解下,下图的IOS Simulator就是Xcode内置的IOS设备模拟器
进入了模拟器,这里我们选择iPhone6作为模拟的设备
在iPhone6的模拟器里打开Safari,输入一个网址,这里我们选择了一个有意思的网址作为例子来演示下,然后我们可以看到在Mac的Safari开发菜单里出现了IOS Simulator(iPhone6)里我们通过Safari输入的网址.
点击这个网址就会出现我们渴望的开发工具界面,这时我们就可以像正常网页一样调试手机模拟器的页面了.
你也许会问,我只是用模拟器调试了下,感觉还是不真实.好,现在拿起你旁边的IOS设备,不要跟我说你没有,你有一个Mac但是没有IOS你是想让人鄙视你吗?我找了一个IOS设备先用数据线和Mac连接好,然后在设备里用Safari打开一个页面.
这时切换到Mac的Safari,你会看到在开发菜单里里面出现了设备的名称和正在访问的网址
我们来试着找一下页面里的一个元素,可以看到当鼠标在html结构里移动到相应位置,当前的元素就会被高亮,跟在Mac的Safari里调试基本一模一样.
通过这种调试方式,我们就可以精确的定位在IOS设备上的一些问题,并可以看到控制台输出的对象或者数组结构,彻底告别了alert,也提高了开发效率.
另外一些工具
MIHTool - iOS Web Debugger Pro
知音者诚希,念子不能别