真机上调试移动端的页面

mac safri ios设备safri

  • 在手机里找到 设置 -> safari -> 高级 -> Web 检查器 ,打开此功能。
  • 用数据线连接到你的 Mac
  • 打开 Mac 下的 safari , 到偏好设置里,高级一栏最下部,勾选在菜单栏中显示“开发”菜单
  • 用手机 safari 访问一个网页,在Mac上的 safari 开发菜单里找到你的手机,二级菜单里找到这个网页

做完这些,我们就进入了熟悉的 safari developer tools ,调试 css , js 网络请求等。

调试webview

iOS APP 里的 webview 同样支持远程调试,不过限制更多一点。这个 APP 必须是自己编译安装进手机的,也就是你必须要有 iOS 开发者账号。对于做 Hybrid APP 开发的来说,这不是什么难事,团队肯定有开发者账号。你需要做的是了解一点 iOS 开发基础,起码能自助把代码编译安装到你的手机。

拥有授权证书的IOS开发者,然后把ios设备添加到授权文件里面,在连接上他的电脑,就可以给ios设备安装一个可以调试的包啦

 

环境准备

1.在pc上安装测试机的驱动,建议使用豌豆荚,安装各种机型驱动,非常方便。

2.手机开启usb调试模式,由于安卓升级以及各大rom厂商的原因,开启的方式可能会有些不一样,有些被隐藏了,需要特殊操作后才显示出来,如果找不到,可以搜一下开启方法。

3.usb数据线一根

UC浏览器开发版

1.adb tool。

2.UC浏览器开发版本(apk)。

3.usb数据线一根

WIFI的调试方法,保证pc和手机在同一个网段,在PC上打开Chrome或Safari,在地址栏输入:手机IP + :9998,在手机端会弹出确认按钮,点击确认后,就可在pc上看到效果了

Chrome

1.翻墙。

2.PC Chrome最新版

3.安卓 Chrome最新版

4.插线后,在chrome浏览器输入 chrome://inspect

Firefox

1.PC Firefox 15+

2.Android Firefox 15+

3.一根数据线

4.adb驱动(UC浏览器那步已经安装过了)

5.adb devices(查看连接的设备)

6.adb forward tcp:6000 tcp:6000(本地开一个接口做代理接受数据)

7.手机端Firefox点击菜单栏的”设置”->”开发者工具”,勾选”远程调试”。

8.PC端Firefox打开about:config,设置devtools.debugger.remote-enabled为True

9.接下来找到桌面端Firefox-菜单-工具-Web开发者-远程链接。保证端口号和上面开启的端口号一致就好了。

Opera

稍微麻烦一点,因为要装一些软件,上面参考链接上有软件的下载地址,以及对应的配置方法,配置完成后可以用pc端模拟器调试也可以用真机调试。

1.打开pc opera control+shift+i 打开调试,点击右上角远程调试设置端口,在用模拟器输入opera:debug,链接端口,就可以了

2.这个方法有些过时 打开新版的手机opera浏览器,输入opera:debug,里面讲解了调试方式,工具就是adb和pc chrome浏览器

Weinre

这个最厉害了,一次安装,可以调试手机端的所有浏览器

1.windows安装 npm -g install weinre

2.

weinre --httpPort 8081 --boundHost -all-

用这个打开8081调试端口

3.浏览器打开 http://localhost:8081,会看到weinre的介绍信息

4.<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>需要调试的页面加上这个脚本,需要将上面代码中的localhost替换为电脑ip,手机访问页面也可以

可以在开发机上安装weinre,然后用nohup命令,让服务一直开启,可以通过一段Js,让那段script标签append到页面上,用手机访问网址,在电脑上打开相应的地址进行调试,

#anonymous 这个可以换成自己的标识,这样多人调试的时候也不会混乱了。

详细讲解

vorlon

基于 Node.js 和 Socket.IO 开发。

调试css比较靠谱,其安装方法以及调试方式和Weinre比较类似,但是更容易定位问题,忽略内容,直观的都是dom结构

1.安装 npm i -g vorlon

2.运行 vorlon

3.需要调试的页面上添加 <script src="http://localhost:1337/vorlon.js"></script> 这样一段标签

4.浏览器访问 http://localhost:1337 就可以调试了

同理,在开发机上安装vorlon ,使用forever命令,让服务一直在开发机运行,大大方便了touch真机调试

 

 

参考链接

http://cnbin.github.io/blog/2015/09/10/2015-zui-xin-ios-kai-fa-chuang-jian-zhen-ji-diao-shi-zheng-shu/

http://blog.jobbole.com/68606/

原文地址:https://www.cnblogs.com/lecheng/p/5917120.html