如何在移动设备上调试网页

这篇文章所讲到的方法已经过时,请移步《移动端真机调试终极利器-BrowserSync》,欢迎分享更多工具。

手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试。当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,希望你能留言告诉我。

一、iOS + Safari

1、打开手机web检查器。

通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图(点击查看大图),并且你会看到该选项下面对电脑操作的相应描述,照做就好。

2.链接电脑(Mac)

2.1 先在手机Safari中打开你想调试的网页,并用数据线连接到电脑(我这里是Mac)

2.2 再在电脑上打开Safari点击【Develop】菜单,就会看到如下图所示(点击查看大图):

3.3 点击2.2中的网站名就会在电脑上打开Safari的控制台,如下图(点击查看大图):

3.调试网页

如上3.3图所示,此时你可以查看手机网页的DOM结构,并且和电脑端网页调试无异,当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来,如下图(点击查看大图):

二、Android + Chrome

1.设置手机

1.1【设置】>【关于手机】>【版本号(Build number)】,对版本号这一项连点7下(这是官方文档里的说法)就会提示“你已成为开发者”。

1.2 再返回【设置】>【开发者选项】>【USB调试】打开手机USB调试。

2.设置电脑(Mac)

这块比较麻烦,因为要装一下Android的SDK。

2.1 下载Android SDK,并解压,我把整个adt目录放在了 /Users/David/adt/ 这里。

2.2 设置环境变量 。打开终端在David路径下(形如 DaviddeMacBook-Pro:~ David$)输入 open .bash_profile,如果文件存在则会打开,如果不存在则再输入touch .bash_profile创建并打开这个文件。在文件里输入export PATH=$PATH:/Users/David/adt/sdk/platform-tools:/Users/David/adt/sdk/tools ,关闭保存。最后在终端里输入 source .bash_profile 来更新环境变量使其生效。终端里输入adb 出现命令帮助信息就是成功了。

2.3 在终端里输入 adb forward tcp:9222 localabstract:chrome_devtools_remote  。

3.链接电脑

3.1 在手机上的Chrome里打开想要调试的网页,用数据线连接手机和电脑(我的是Mac。唉~我只是强调平台的不同,不要误会)。

3.2 打开电脑上的Chrome,在地址栏里输入 about:inspect 选中 【Discover USB Devices】前面的复选框。出现下图画面(点击查看大图):

4.调试网页

4.1 你可以点击图3.2中检测到的设备上正在运行的网站下面那个【inspect】,或者在浏览器中输入 localhost:9222 打开手机正在浏览的网页列表,如下图:

4.2 点击上图中的网站缩略图,就会跳转到Google的一个代理链接(链接可能被墙……,挂代理)就会打开如下图所示的控制台(点击查看大图):

4.3 这就和电脑上网页调试没什么差别了,鼠标经过DOM节点,手机上的布局同样也会高亮起来:

时间: 2024-10-22 05:58:07

如何在移动设备上调试网页的相关文章

在ios设备上调试

ZJAppleID2014 1.创建开发者证书 每个开发者人员一次仅允许使用一个开发者证书,证书的管理可以登录 ios开发中心的配置门户网站(https://developer.apple.com/devcenter/ios/manage/overview/index.action) 登录该网站时,需要苹果的ios开发者帐号,登录成功后的界面如下: 点击IOS Apps下的Certificates(证书)导航菜单,得到的证书管理界面如下图所示,在此处下载证书和删除证书. 创建证书的过程分成两部:

如何在移动设备上调试html5开发的网页

在我们用phoengap+html5做的移动app中,经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况,原因是手机端页面,大多运行在webkit内核的浏览器上,但还是会因平台.厂商的不同而有种种兼容性问题. 下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试.这里要说明的是,iOS平台只能用自带的Safari浏览器来调试,而Android平台也只能用google Chrome浏览器来调试.当然,我目前只发现这么两种手段,如果你还有其他方法可调试更多的浏览器,

在android设备上调试ionic应用

方法1: ionic run android -l -c 将会在console中输出日志信息 方法2: (1).使用usb连接android设备,并打开android设备的调试功能 (2).在chrome浏览器的地址栏中输入 chrome://inspect/#devices,此时会在浏览器中看到连接的设备 (3).点击chrome页面上的inspect按钮,将会弹出开发者模式窗口,可以看到应用程序的日志信息. 如图:

iOS - 免费开发者账户 - 在设备上调试应用

1. 申请一个Apple ID 2. 在Xcode的状态栏上选择"Xcode" -> "Preferences..." -> "Account" -> "+" -> "Add Apple ID",然后输入刚刚申请的Apple ID和密码 3. 就在当前“Account”页面点击选择刚刚加入的Apple ID,然后点击“View Details...”,在弹出的页面中,选择"

手机设备上调试接口,查看错误信息

在微信小程序开发的时候,请求接口不成功,手机上未反馈任何消息,不方便调式,这时候就需要把错误信息打印出来 在请求接口错误函数中将obj转换成字符串,再用一个弹窗显示出来... 代码如下: fail: function(res) { wx.showToast({ title: JSON.stringify(res), icon: 'success', duration: 2000 }) } 其中res.errMsg存放的是请求出错的原因,如果请求成功存放的是ok

在非越狱设备上使用 LLDB 调试第三方 App

说明 这个方法是在 iOS 8 刚发布的时候想到的,当时主要用来在非越狱的 iOS 8 设备上调试分析第三方已经支持 iOS 8 的 App,比如:UC 浏览器,下面也会使用 UCWEB 为例来说明一些命令. 原理 谈不上原理,主要就是利用 xcode 的工具链,当然如果对证书.签名.Entitlements 比较熟悉,可能会很自然的想到这个方法.当时想到方法后,就在 github 上搜索了一下发现已经有人写了相关的工具,下面跟大家说下具体如何操作. 工具 ios-deploy:https://

如何在手机设备上实时调试

[背景] 1.移动开发使用Chrome模拟设备,但是和真实设备还是有一定出入的 2.QQ和微信使用的X5内核与Chrome的webkit内核有差异,经常遇到奇葩的bug,这种场景又比较多,一般很难定位 3.手机型号颇多,如果遇到某个设备有bug,怎么调试 4.开发环境下手机设备因域限制访问不到办公网络,访问不了开发或测试中的产品页面 [目的] 1.对于Dev.Fe可以在真实设备上实时调试,快速定位原因并解决(包括QQ.微信的内置浏览器) 2.对于QA.PM.UI可以在真实设备上测试办公网络中在开

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

你的网页内容在移动设备上的体验可能和电脑上完全不同.Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容. 安卓远程调试支持: 在浏览器选项卡中调试网站. 在原生安卓应用中调试网页内容. 将屏幕从你的安卓设备上投影到你的开发机器上. 使用端口转发和虚拟主机映射来让安卓设备访问开发使用的服务器. 需求 要开始远程调试,你需要: 安装 Chrome 32 或者之后的版本. 连接安卓设备用的 USB 线缆. 对于通过浏览器调试:安卓 4.0 以上并且安装了 Ch

如何调试手机上的网页以及基于Cordova/Phonegap的Hybrid应用

开发手机页面以及Hybird应用时,调试曾经是个老大难问题,不时需要用写log等方式曲线救国. 实际上,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能,只是看样子还有好多人不知道,所以写下来分享给各位.本文遵循CC协议,欢迎转发,但请注明作者和出处(http://ngnice.com/posts/659f97a6f06c90 ). 操作分成电脑和手机(或模拟器)两个部分,操作流程如下: 在手机上打开“设置|开发者选项 | USB调试”.对于低版本的androi