在h5开发移动端时,兢兢业业的开发的完成后,本地电脑测试,无bug,完美。在自己的新手机上测试,也没有bug,ok,交付。

然而,在测试阶段,bug来了,这个按钮怎么点击无反应?这个样式怎么不对?。。。明明没有bug呀,难道又是兼容性问题?头疼,到底是什么原因呢。

这个时候加入你在mac的Safari 浏览器上稍加调试,问题就出现了,我们可以清晰的看到错误原因和报错信息。ok,那就解决问题了。

具体怎么调试呢,看下方:

一、参考链接

ios开发者文档

safari开发者工具

remote debugging safari

二、设置iphone

设置 -> Safari -> 高级 -> 开启web检查器

三、设置mac

Safari -> 偏好设置 -> 高级 -> 勾选显示开发菜单

四、连接手机和电脑

1、用数据线,mac转接头把iphone和mac连接起来;
2、打开iphone的Safari浏览器中需要调试的网页;
3、打开mac的Safari浏览器,开发 -> 手机名称 -> 选择正在调试的网站;
4、选择元素,用电脑调试手机真机页面。

转载至:https://www.cnblogs.com/camille666/p/mac_safari_debug_ios_page.html

mac的safari浏览器调试ios手机网页的更多相关文章

  1. 用mac的safari浏览器调试ios手机的网页

    iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...

  2. 在mac上如何用safari浏览器调试ios手机的移动端页面

    第一步 打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] 第二步 打开Mac上Safari的开发者模式,流程是[Safari ...

  3. 用mac的chrome浏览器调试Android手机的网页

    一.参考链接 read chrome remote debugging documentation 调出开发者选项 二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...

  4. 使用Safari远程调试iOS设备网页

    最近在做HTML 5游戏时,发布到手机上访问网页总是莫名其妙出现问题,苦于没有remote debug功能一直没有查找到问题. 这边博客详细介绍了iOS, Android, Windows Phone ...

  5. 在mac上如何用safari调试ios手机的移动端页面

    第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图1 图2第二步:打开Mac上Safari的开发者 ...

  6. 用Chrome 浏览器调试移动端网页 chrome://inspect/#devices

    谷歌输入(chrome://inspect/#devices) 我使用的是小米(红米NOTE2 ),电脑是win 10 系统,以下几步就可以轻松使用浏览器内置的功能调试移动端网页了: 1. 手机开启调 ...

  7. Chrome浏览器调试移动端网页 chrome://inspect/#devices

    我使用的是魅族(魅蓝NOTE6 ),电脑是win 7系统,以下几步就可以轻松使用浏览器内置的功能调试移动端网页了: 注意:谷歌浏览器需要先FQ,不然调试页面会空白或者报404错误,(不会FQ的可以联系 ...

  8. 使用chrome浏览器调试移动端网页(非模拟访问)

    1. 使用数据线连接手机与电脑 2. 打开手机调试模式 参考:http://jingyan.baidu.com/article/f79b7cb35ada4d9145023e63.html 本人使用的m ...

  9. Mac使用Charles抓取ios手机APP中的https请求

    1.配置Http代理 Port为监听端口号,默认为8888,勾选Enable transparent HTTP proxying,接着勾选SOCKS proxy,可以监听Socks请求 2.安装Cha ...

随机推荐

  1. js 一些兼容检测

    1. IE5.0之前不支持 document.getElementById(),但存在 document.all[] function getElementById(id) { if(document ...

  2. redis在windows系统下的安装和两个问题

    今天首次接触redis,遇到一些问题,查了一些资料,在这里汇总整理下. redis的安装看这个:http://www.runoob.com/redis/redis-install.html. 问题1: ...

  3. Python设计模式 - UML - 总览

    说到设计模式就不得不涉及建模思想,说到建模思想自然而然会应用UML,目前业界开源的UML工具很多,用起来也非常便捷.近几年来随着软件应用领域开发模式转向快速迭代试错,UML在敏捷开发,尤其是web及m ...

  4. FortiGate高校图书馆SSLvpn配置案例

    1.组网及需求 某高校有一台FGT系列防火墙放置于互联网出口,拓扑如下图: 现需求通过组建sslvpn web代理模式和隧道模式以实现: 1.web代理模式:能访问 http://lib.xxxx.e ...

  5. 设计原则之依赖倒置js

    依赖倒置 定义:高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象.(百科全书) 这个定义什么意思,太专业 感觉不像人话.. 什么叫高层模块,什么叫底层模块,什么叫 ...

  6. 2018-2019-2 20175234 实验一 Java开发环境的熟悉(Linux + IDEA)

    目录 20175234 实验一 Java开发环境的熟悉(Linux + IDEA) 第一部分 代码及运行结果截图 第二部分 要求 代码及截图 第三部分 题目 需求分析 设计 程序及运行结果 问题和解决 ...

  7. sendBroadcast无法接收消息可能原因

    Beginning with Android 8.0 (API level 26), the system imposes additional restrictions on manifest-de ...

  8. 粒子动画——Pygame

    你是否也想做出下图这么漂亮的动态效果?想的话就跟着我一起做吧=.= 工具: Python--Pygame 仔细观察上图,你能发现哪些机制呢?再在下面对比一下是否跟你想的一样. 运行机制: 1.随机方向 ...

  9. HDU 6214.Smallest Minimum Cut 最少边数最小割

    Smallest Minimum Cut Time Limit: 2000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Oth ...

  10. python基础之Day10

    一.函数的返回值 1.什么是返回值返回值是一个函数的处理结果, 2.为什么要有返回值如果我们需要在程序中拿到函数的处理结果做进一步的处理,则需要函数必须有返回值 3.函数的返回值的应用函数的返回值用r ...