`
Fonkie
  • 浏览: 67676 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

如何利用Chrome devTools调试android手机上的web网站?

阅读更多


 【准备】

1、在Android手机上安装Chrome( Chrome for Android

应用超市、或者google官网即可下载。

 

2、电脑系统安装了最新版的Chrome

最新版Chrome,确保开发者工具正常使用

 

3、Android手机装了USB驱动

在设备管理器查看是否正确安装了驱动,如无,则需要到手机的官网下载,例如:小米1S的驱动http://bbs.xiaomi.cn/thread-121613-1-3.html



 

 

【开始】

一、安装Android SDK

下载Android SDK,地址:http://developer.android.com/sdk/index.html,本人的机器是windows,下载的文件为adt-bundle-windows-x86,解压并释放到D:/soft/android/adt(你也可以选择其他路径)

 

二、允许Android 手机启用USB调试

1、android系统设置:“设置”》“开发人员选项”》“USB调试”;

2、手机上Chrome浏览器设置:打开Chrome浏览器,点击左下角菜单按键,“设置”》“开发者工具”》“启用USB网页调试”

 

三、运行Android SDK

1、设置环境变量:右击“我的电脑”》“属性”》“高级”》“环境变量”》编辑“PATH”变量值,在末尾添加“;D:\soft\android\adt\sdk\platform-tools”

 

2、运行adb

打开cmd,输入如下命令:

adb forward tcp:9222 localabstract:chrome_devtools_remote

 详情如图:

 

四、调试

 

1、在手机上用Chrome打开需要调试的网站

 

2、在电脑上用Chrome打开http://localhost:9222/,如图所示:

 

 

3、调试

点击需要调试的网站,熟悉的Developer Tools就出来了,如图所示:

 

 【完成】

至此,利用Chrome在android手机上调试网站的方法告一段落。

 

更详细的方法请看:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

 

更多的资料请参考:

http://www.html5rocks.com/en/mobile/profiling/

 

 

 

 

  • 大小: 4.6 KB
  • 大小: 30 KB
  • 大小: 33.6 KB
  • 大小: 136.2 KB
分享到:
评论

相关推荐

    使用chrome调试手机web程序

    首先,你需要在PC上安装Android SDK,这是调试Android设备的基础。Android SDK可以从官方网站下载,并按照官方文档(http://developer.android.com/sdk/installing/index.html)中的指示进行安装。安装完成后,你...

    remote-redux-devtools-android,android studio上的android redux devtools-intellij插件和库.zip

    这款工具集成了IntelliJ IDEA插件和库,允许开发者在Android设备或模拟器上实时监控和调试Redux的状态变化,从而提升开发效率和代码质量。 首先,Redux是一个JavaScript的状态容器,提供可预测化的状态管理。它通过...

    网页真机调试DEMO(Android)

    5. **Android SDK**:Android软件开发工具包,提供了开发、测试和调试Android应用所需的各种工具。了解SDK的使用对于理解这个DEMO的工作原理至关重要,因为调试工具可能依赖于ADB(Android Debug Bridge)来与设备...

    移植Android的UI组件到Web端以Android的方式来制作高性能优体验的WebApp

    8. **调试工具**:为了便于开发者调试和测试,AndroidUI4Web可能提供了专用的开发者工具,类似于Chrome DevTools,帮助开发者查看和调整组件状态,定位性能问题。 在实际应用中,开发者可以通过学习AndroidUI4Web...

    chrome-inspect离线开发者工具包@194530_@196351.rar

    Chrome Inspect 是一款强大的开发工具,它允许开发者对运行在各种设备上的网页应用进行远程调试。这个"chrome-inspect离线开发者工具包@194530_@196351.rar"文件很可能包含了离线版本的Chrome开发者工具,这在没有...

    解决inspect调试空白页问题

    在IT行业中,尤其是在Web开发领域,开发者经常遇到各种调试问题,其中之一就是Chrome DevTools的WebView Inspector出现空白页的情况。这可能会极大地影响开发进度和效率。本文将深入探讨这个问题,提供解决方案,并...

    手机端Web项目开发

    手机端Web项目的测试和调试过程需覆盖多种设备和屏幕尺寸,可以使用模拟器、真机测试、远程调试工具(如Chrome DevTools)等方法,确保应用在各种环境下都能正常工作。 综上所述,手机端Web项目开发涵盖的技术范围...

    基于Android的Web APP开发技术.pdf

    基于Android的Web APP开发,主要是利用Web技术(如HTML5, CSS3, JavaScript等)结合Android平台的WebView组件来构建可以在手机上运行的Web应用。这种开发方式有以下几个关键点: 1. **WebView组件**:WebView是...

    android_simulator_web.rar_Help!_andriod simulator_android web_w

    由于模拟器与本地开发环境的紧密连接,我们可以使用Chrome DevTools或Firefox Developer Tools的远程调试功能,直接在模拟器中进行网页的调试。 总结,"Android模拟器访问本地Web应用"这一主题涵盖了从创建和配置...

    Apress.Pro.Android.Web.Apps.Developing.HTML5.JavaScript.CSS.and.Chrome.OS.Web.Apps

    - **调试工具**:Chrome DevTools 是调试Android Web应用的强大工具。 - **步骤**: - 将Android设备通过USB连接到电脑。 - 在Chrome浏览器中启用开发者模式,连接设备。 - 利用DevTools查看网络请求、修改样式、...

    移动端web开发调试.zip

    8. **Web Inspector工具**:对于iOS设备,可以使用Safari的Web Inspector,对于Android设备,可以使用Chrome浏览器内置的开发者工具,或者使用Weinre(Web Inspector Remote)进行远程调试。 9. **JavaScript调试**...

    Android- stetho-master.rar

    通过在应用中集成Stetho,开发者可以利用Chrome Developer Tools(简称Chrome DevTools)进行远程调试,这与在Web开发中使用DevTools的方式相似。 1.2 主要功能 - SQLite数据库查看与操作:查看、编辑、执行SQL语句...

    Go-chromedp使用Chrome调试协议以一种更快更简单的方式来操作浏览器

    Go-chromedp是利用这个协议编写的一个Go语言库,它允许开发者直接控制和支持多种浏览器,包括Chrome、Edge、Safari以及Android上的浏览器,而无需依赖像Selenium或PhantomJS这样的外部工具。本文将深入探讨Go-...

    Android启动http运行vue程序.rar

    6. **调试与优化**:Android Studio提供了一系列工具,如Chrome DevTools,可以远程调试WebView中的Vue应用,进行性能优化和问题排查。 7. **安全与性能**:为了提高安全性,可以考虑使用HTTPS而非HTTP,尽管对于...

    Android应用源码之使用html5得到手机设备信息的.rar

    9. **调试与优化**:使用Chrome开发者工具(Chrome DevTools)的远程调试功能,可以对`WebView`内的JavaScript进行调试,优化网页性能和用户体验。 10. **学习资源**:对于想深入学习这一领域的开发者,可以参考...

    chromium for android系列用图

    在 Android 平台上,Chromium 提供了一个强大的、高度可定制的 Web 渲染引擎,使得开发者能够构建高性能的 Web 应用和浏览器。本系列文章用图将深入探讨 Chromium 在 Android 上的关键组件、工作原理以及如何进行...

    svg动画手机调试

    在Android设备上,可以使用Chrome DevTools的远程调试功能,将手机连接到电脑并同步浏览器视图进行调试。iOS设备则可以通过Safari的Web检查器进行类似操作。 5. **性能优化**:手机硬件资源有限,过多的SVG动画可能...

    chrome-remote-源码.rar

    这一功能允许开发者在远程设备上运行Chrome,并通过本地开发工具进行实时调试,极大地提高了Web应用的开发与调试效率。源码分析通常包括对通信协议、调试接口、数据传输机制等方面的研究。 【标签】"Chrome","远程...

    chrome源码学习文档

    7. **调试工具DevTools**:Chrome DevTools是开发者调试Web应用的重要工具,源码可以揭示其内部工作原理,帮助你理解如何调试JavaScript、查看性能瓶颈等。 8. **性能优化**:Chrome源码还涉及到性能优化技巧,例如...

    js与android交互

    利用Chrome DevTools的远程调试功能,可以在Chrome浏览器中调试Hybrid App中的JavaScript代码,提高开发效率。 总结,"js与android交互"涉及JavaScript Interface、WebView方法调用、异步通信机制以及安全性和生命...

Global site tag (gtag.js) - Google Analytics