iOS手机在浏览器中调试页面展示

背景：

比如：本次我遇到一个兼容性问题，开发的一个页面在其他iOS系统手机上都好好的，偏偏在iOS11系统上面展示个大白屏，通过此方法可以很容易发现，原来是[].flat()这个方法不适用。还可以直接在控制台中输出验证。

实例.png

优点：

1、当遇到兼容性问题时，可用此调试方法得出浏览器不兼容的地方，很方便。
2、通常我们在调试页面的时候都会在浏览器上进行页面展示的调试与测试，但那并不是真机；如果直接在手机上访问该页面调试，又无法看到页面的元素及接口相关信息。此方法可以实现浏览器页面和真机展示的联动。

步骤：

1、准备：iOS手机一台，电脑端Safari浏览器
2、数据线连接iOS手机并在手机的Safari浏览器中打开要调试的页面
3、电脑打开Safari浏览器，选中浏览器选项：「开发」-- 「选中连接的手机」-- 「选中要调试的页面」，如图1-1:

1-1.png

4、然后就会自动打开一个调试页面，如图：选择元素一栏就可以查看页面元素了，并且有报错的话也会在控制台中直接报出来，方便查找问题：

浏览器展示.png 手机展示.png 控制台输出.png

5、在上面可以直接修改或修改代码，就可以立即呈现在连接的手机上了，如图:

修改后浏览器展示.png 修改后手机展示.png