本地调试H5页面方案总结

http://www.jianshu.com/p/a43417b28280

Fiddler 手机抓包

http://blog.csdn.net/gld824125233/article/details/52588275

1、安装证书

2、重启wifi

安卓篇:

需要道具

1、安卓手机

2、usb数据线或充电线

3、一个测试用的安卓安装包apk包。里面必须包含webview页面。不然你远程调试个屁!

4、豌豆荚 、 91手机助手等第三方安卓助手平台

5、fq用的vpn工具

6、chrome 浏览器

具体实施步骤:

1、安卓手机开始【开发者模式】和【USB调试】并且允许手机访问

2、【连接类型】默认是【充电】,改为【媒体设备(MTP)】

3、使用第三方安卓助手平台,安装具有webview页面的安卓测试包.apk

4、打开具有webview页面的安卓APP。

4、电脑fq(你懂得) ,为了确保正常fq,请访问www.google.com看看是否正常

5、打开chrome浏览器,输入url: 【chrome://inspect/#devices】,在【Remote Target】中查看是否有自己的手机型号,如果没有请立即中止,检查上面的步骤

6、点击inspect即可看到下面的效果图

效果展示1:

效果展示2:

IOS篇

需要道具:

charles(跨域使用): https://www.charlesproxy.com/download/

Iphone手机

I苹果:http://rj.baidu.com/search/index/?kw=i苹果

准备事项:

让IOS开发人员,将webview的地址指向你本地资源。如10.110.1.27:8080/index.html

由于我本地使用了webpack,所以能开启热更新的服务器。每次保存时,APP中的webview就会自动更新。非常方便调试。

但还存在跨域的问题,这时候就要charles登场了,原理通过修改代理为本地来实现跨域

0、将项目中ajax的请求地址ip,改为本地Ip。其他不变,比如原本请求地址为:

   http://10.110.1.17:8081/bmapi/api/project/DoOld

修改本地IP:

  http://10.110.1.26:8081/bmapi/api/project/DoOld

1、首先电脑和手机要使用同一个局域网(无线网络)内

2、修改手机的无线网络配置,以我的Iphone手机为例:

3、打开charles->Tools->remote Map->Add

这样一来就可以跨域了。

IOS与安卓的远程调试的更多相关文章

  1. 安卓打开远程调试(免root)

    首先用数据线连接adb,在pc端执行: adb tcpip 5555 然后就能拔掉数据线了. pc执行这个: adb connect 172.19.208.2 就能连接上

  2. 通过Mac远程调试iPhone/iPad上的网页(转)

    我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非 ...

  3. 远程调试weinre的使用

    一.用途 *鉴于在浏览器调试移动端页面无法准确反映移动端实际情况并无法高效调试,故常常使用远程调试工具通过电脑连接手机进行调试,常用远程调试方式: 1.chrome连接安卓机远程调试 2.Mac连接苹 ...

  4. 真机远程调试 ( IOS Android 以及微信,weex)

    1.以前cordova远程调试,Android的直接连接USB后,用chrome打开chrome://inspect网址 IOS的打开Safari的developer下. 这是因为cordova的we ...

  5. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

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

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

  7. iOS逆向开发(3):锁定APP的目标类与函数 | reveal | lldb | debugserver | 远程调试

    之前介绍了怎么获取APP的所有类的结构信息,这个有什么用呢?用处大了,比如以这一步为基础,下一步通过注入来做更多研究工作. 注入的最小单位是函数,实际上,编译执行的程序在编译后,类就不复存在了,留下来 ...

  8. [转] 在安卓设备上使用 Chrome 远程调试功能

    你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原 ...

  9. 移动应用调试之Inspect远程调试

    移动应用调试之Inspect远程调试 一.准备工作 chrome浏览器,建议最新版本 如果你点击inspect打开的DevTools窗口一片空白,且刷新无效时,那极有可能是由于被墙的缘故. 二.Ins ...

随机推荐

  1. Centos的APK解包打包签名

    http://www.v5b7.com/other/apk.html vi /etc/profile PATH=/usr/local/mysql/bin:/usr/local/mysql/lib:/u ...

  2. 关于delphi编程的网络文件夹复制的代码精要

    首先必须引用windows api函数库 shellapi ***************************以下为复制文件夹的代码******************************** ...

  3. css伪类元素:after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

  4. MSSQL—列记录合并成一行

    在项目开发中,有时会碰到将列记录合并为一行的情况,例如根据地区将人员姓名合并,或根据拼音首字母合并城市等,下面就以根据地区将人员姓名合并为例,详细讲一下合并的方法. 首先,先建一个表,并添加一些数据, ...

  5. 本地虚拟机在ubuntu系统搭建nexus服务器

    本地虚拟机在ubuntu系统上搭建nexus服务器 本地虚拟机在ubuntu系统上搭建nexus服务器所需软件: 虚拟机:VM或者Oracle VM VirtualBox 系统:ubuntu-14.0 ...

  6. vs code 在windows10 64bit系统配置python开发环境

    一.搭建 python 环境 在 VSC 中点击 F1 键,弹出控制台,输入 ext install 界面左侧弹出扩展窗格,输入python,确认,开始搜索下载发布者为Don Jayamanne 的 ...

  7. MFC学习1

    引用:http://v.youku.com/v_show/id_XMjM3MTI1ODky.html MSG 窗口——一般是程序在屏幕上的不同的矩形区域。 窗口句柄——标识窗口类型的类(资源的标识) ...

  8. gedit插件配置

    Ubuntu用户 sudo apt-get install gedit-plugins Fedora用户 yum install gedit-plugins 使用gEdit搭配terminal来写程序 ...

  9. Linux文件名小写的好处(转)

    说明:来自老阮的<为什么文件名要小写>的文章,其实我觉得应该说是<Linux文件名为什么要小写>会更合适些. 一.可移植性 Linux 系统是大小写敏感的,而 Windows ...

  10. 【视频】 Linux高级程序设计01.2开发平台及Linux环境限制

    [课程笔记] Linux环境限制 遵循规范,使用现有资源,明确系统限制,增量开发. (1)规范问题 编码的规范,让程序更易读.Linux编码规范. “见着如意”:变量,函数命名等能够让人看到名称就知道 ...