移动端调试

最近两年无线端的html页面很火，博主最近也做了几个手机项目。相信做过的人都会碰到调试这个棘手的问题。一是没有相应的设备，所以很多人使用虚拟机调试，二是没有较好的调试工具，没法实时得到调试信息。现在将我的一些调试经验总结一下：

本文介绍了无线端调试的四种方式，分别是：

  • charles设置代理 
  • fiddler设置代理
  • MTL 工具使用
  • weinre （查看dom元素，查看console.log输出的数据）

（如果大家还有其它的调试方法，欢迎补充）

一、charles设置代理

 charles 一个比fiddler更强大的http调试工具。如果想对charles有更一步的了解，可以猛戳这里.  下面我们用 Mac+ipone/ipad进行演示

1.设置入口

2.设置，端口设置为 7999，这里可以随意

3.手机设置

4.点开右侧箭头，进入代理设置，主机名为你电脑的IP，mac下通过 ifconfig 命令查看，IP为 charles 设置的监听地址

5.手机尝试连接时，charles 会提示

6. 也可以直接设置允许连接

7.配置好了之后记得启动监听程序（command+r）

8.打开手机浏览器，进入百度，可以看到

二、fiddler设置代理

1.设置入口

2.设置端口，并允许远程连接

3.cmd下查看自己的ip，填入手机代理设置（同charles手机代理设置），并将上面设置的监听端口填入 8088

4.打开你的手机浏览器，进入百度，你会在 fiddler 中看到

然后就尽情调试你的程序吧~

三、MTL工具使用

MTL是我们公司内部的一个无线测试平台。原理就是将无线端的请求代理到这个平台，可以看到接口的返回数据，也可以自己mock一些ajax数据进行响应。呵呵，由于一些大家都知道的原因，具体的就不讲了。相信你们公司也一些自己的测试平台

四、weinre

上面讲的三种方式都是查看接口的，下面就简单介绍一下Weinre。Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS，查看console输出信息等

1.安装

npm install –g weinre

2.打开

weinre -httpPort 7999 -boundHost -all-

  • httpPort 监听端口
  • boundHost –all- 绑定主机

3.说明都写在图片里头，相信聪明的你可以悟到

4.真机调试

移动设备须有有wifi无线连接，且和电脑在同一网段。把要调试的页面放在服务器中相应的文件夹中。在手机的页面中打开要测试的页面地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。

　　2、接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上

MAC系统更为简单，不用命令行，直接运行app即可启动weinre，接下来的步骤和windows一样。

 欢迎大家提供其它更多的调试方案，有问题可以联系我哦！ [email protected]

(最后特别感谢阎王同学的支持！)

移动端调试

时间： 2024-10-09 05:39:46

移动端调试的相关文章

移动端调试方法

移动端的页面我们要想调试最常用的应该属于是chrome的机型的模拟了,但是如果遇到一些只有在某种机型上面才能看到的bug的话就不好调试了. iphone端调试 首先苹果端是可以调试的,苹果模拟器和苹果浏览器是同一套系统,可以无缝对接调试,Xcode有苹果模拟器,打开模拟器,再打开safari浏览器找到开发下来就能找到这个页面的源码,前提是这个页面是web做的. 安卓端的调试 安卓也是可以的利用chrome,只是需要多点流程, 需要准备 1,pc安装最新chrome. 2,安卓手机(系统需要4.1

移动端调试、布局以及常见的问题解析

rem原理与简介: 依据html根元素大小定,px转rem动态调整根元素font-size大小: 1rem = 16px; html的字体大小就是可以默认为浏览器的字体大小: 移动端适配:方式一 媒体查询@media @media screen and (max-width:320px){ html{ font-size:20px; } } @media screen and (max-width:360px)and(min-width:321px){ html{ font-size:20px;

移动端调试 — 安卓机+chrome

移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备. 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢? 下面介绍一种针对Android机的调试方法 1. 在pc和android手机上都安装最新版本的chrome 2. 使用usb将手机的PC相连接 3. 手机中打开"设置"->"开发人员选项"->"USB调试" 4. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devi

移动端调试 - UC浏览器开发者版 - WIFI

Chrome  功能特性 支持PC或Pad设备,实时调试手机网页 DOM.CSS.JS调试 多功能面板满足多种调试需求 1   准备工作 保证手机与PC处于同一个无线网段. 下载Android平台的UC浏览器开发者版(UCBrowser_Dev_RI.apk,下载地址),安装到手机中. 2   调试方式 在地址栏输入:手机IP + :9998 例,手机IP为192.168.112.244,则输入192.168.112.244:9998 此时手机端的UC浏览器开发者版会弹出对话框,如下: 选择确定

移动端调试 — iPhone +Safari

1   开启iOS设备的调试功能 打开"设置"程序,进入"Safari"->"高级"页面开启"Web检查器": 2   mac safari浏览器设置开发者工具 safari ->偏好设置 -> 高级 ->勾选在在菜单栏中显示开发菜单 3   链接USB线,在手机端发送url请求,并在mac Safari中加载本地请求,进入调试页面

移动端调试 — Pure|微信环境调试方案|App环境调试方案

Pure 详细参见: 中文文档:http://leeluolee.github.io/2014/10/24/use-puer-helpus-developer-frontend/ 源码:https://github.com/leeluolee/puer 微信环境调试方案 微信开发者工具现在不能用了,对于前端来说,主要调试分享,和微信授权,这两块都有成熟解决方案. 其次,需要调试一些浏览器样式兼容问题,这个..微信浏览器内核是X5内核,兼容性良好,具体兼容性问题具体分析吧 如下,分享下微信环境踩过

NodeJs 服务端调试

调试NodeJs工具 node-inspector 1.全局安装 npm i node-inspector -g 如果安装不成功,需要切换npm源 npm config set registry http://registry.cnpmjs.org npm info underscore 2.以debug模式启动node项目 node --debug=5858 app.js 3.启动 node-inspector   node-inspector 默认使用8080端口,如果被占用需要使用--de

移动端调试html页面的方法

weinre这种方法. 1.首先你要安装nodejs,要装一个低版本的,最新版本的装weinre会装不上.这里给个下载地址 https://nodejs.org/dist/v0.10.20/node-v0.10.20-x86.msi 2.然后npm命令 npm install -g weinre 3.运行wernre weinre --httpPort 8081 --bounHost -all- 在浏览器输入上面的 localhost:8081 4.你会看到这样的一个界面 复制红线框里面的一段

移动端调试 vConsole

<head> <script src="path/to/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> </head> CDN地址:https://www.bootcdn.cn/vConsole/github地址: https://github.com/Tencent/vConsole/blob/dev/doc