Safari 浏览器 调试App H5页面

前言

三人行，必有我师！
这句话是真的，哈哈哈，我服~~，或许是自己太low，不知道

image.png

孔子曰： 好东西，要分享~~up！up！

下面说下和公司小伙伴学习的新技能>>>>>利用强大的Safari 浏览器 来调试H5页面

操作如下

首先手机设置一下，步骤如下：

image.png

然后进入高级，打开Web检查器

image.png

Mac 电脑上，打开Safari 浏览器，偏好设置，勾选 在菜单栏显示开发菜单

image.png

然后电脑链接手机，打开Safari 浏览器，会看到有开发，找到手机

image.png

最上面的这个就是你打开的app的web页面，当你鼠标放上面的时候，会看到app的界面会出现全选中状态

image.png image.png

ps： 如果你有多个界面调试，可能会不知道那一个html对应那一个界面，那么老铁可以根据是否是全选中状态来做对应

然后看到Safari 浏览器，界面如下，

image.png

断点调试

选中一个js文件，然后设置断点，直接和Xcode设置断点一样，

image.png

然后操作App的web页面，断点会走，然后调试就和xcode一样了,你可以一步一步调试，也可以只走断点，如下图

image.png

如果在控制器查看哪一个参数，也可以如下操作，

• 可以使用console.log()
• 可以直接写要打印的参数
  ps： 不可以使用Xcode中的p或者po

image.png

你也可以删除断点，如下图

image.png

-->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
除了可以调试手机，模拟器也可以，你的Mac电脑也可以调试_{各位小伙伴可以耍耍}
其他还有很多地方可以玩，路过的各位大佬有兴趣可以留言交流~~😄