【准备】
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/
相关推荐
betwixt, 在 Chrome DevTools网络面板上,基于Web调试代理 Betwixt将帮助你使用熟悉的Chrome DevTools接口来分析浏览器外部的网络流量。 安装从你的操作系统下载最新版本,构建你自己的包或者从源代码运行Betwixt...
TiInspector, 通过 Chrome DevTools调试 Titanium Mobile 应用程序 #Ti 检查器Ti检查器允许在 Chrome DevTools web界面中调试 Appcelerator Titanium 应用程序。工具通过将命令和消息转换为 Chrome 调试协议和 ...
由于chrome调试android webview出现空白页,或者404错误,因为没有,该工具用于调试android webview
polydev, 在 Chrome devtools中,自动web组件配置 polydevpolydev是聚合物DevTools扩展- 一种帮助开发聚合物和定制元件的工具。 目前,它主要关注网络组件的性能跟踪。:如何使用安装扩展插件。在使用web组件的页面...
(1)vue 2.x 调试工具:vue_devtools_chrome_5.3.4.crx Chrome浏览器Vue调试插件; (2)直接安装使用无需自己编译; (3)安装方法:打开Chrome浏览器,输入“chrome://extensions/”打开扩展程序,启用开发者模式...
Chrome DevTools(Chrome 开发者工具) 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。官网还推荐一款叫做 Chrome 金丝雀版本(Chrome Canary)的 Chrome 浏览器,从这里你可以获得最新版本的 DevTools...
前言工欲善其事必先利其器。有些时候一个技巧可以节省我们很多的时间,也会让调试的过程变得更加简单直接。本次分享从不同的情景来说明应该如何搭配使用 Chrome D
谷歌浏览器 chrome vue 调试插件 vue-devtools chrome(谷歌浏览器)vue代码调试插件, 已打包。解压后,通过chrome扩展程序加载即可使用。 使用方法: 1、chrome浏览器输入地址“chrome://extensions/”进入扩展...
chrome devtools
chrome--devtools Mac
chrome(谷歌浏览器)vue代码调试插件, 已打包。...4、添加完vue-devtools扩展程序之后,我们在调试vue应用的时候,chrome开发者工具中会看一个vue的一栏,点击之后就可以看见当前页面vue对象的一些信息
使用chrome调试手机web程序
面板显示任意页面的请求信息
该图像捆绑了最新版本的无头Chrome,因此调试器可以使用(访问进行验证)。 产品特点 彩色输出 协议帧过滤 :vulcan_salute: 请求-响应合并, 解释请求, 使用解释响应和事件, 理解扁平化会话( ) 计算并显示...
Chrome DevTools前端 Chrome DevTools的客户端,包括用于运行DevTools网络应用程序的所有JS和CSS。 源代码 前端可在。 设计准则 请注意,DevTools遵循其他。 问题分类 问题分类指南可以找到。 工作流程 可以找到...
Chrome Canary 指向chrome-devtools://devtools/bundled/devtools.html?ws=localhost:9800/localhost:5858以开始调试。 演示步骤: 转到来源面板按 Cmd(Ctrl)+P 转到文件,输入myscript.js 在第 10 行设置...
ShaderEditorExtension, Google Chrome DevTools扩展,实时编辑GLSL着色程序 web x GLSL着色器编辑器用于 Google ChromeChrome DevTools扩展,可以帮助你编辑浏览器中的着色程序。 非常基于 Firefox DevTools明暗器...
ec-devtools是支持canvas库的chrome调试工具,能对canvas的元素的样式、物理属性等进行修改,达到所见即所得的效果,提高调试效率
chrome(谷歌浏览器)vue代码调试插件, 已打包。解压后,通过chrome扩展程序加载即可使用。 使用方法: 1、chrome浏览器输入地址“chrome://extensions/”进入扩展程序页面 2、勾选开发者模式 3、点击“加载已解压...
vue devtools chrome扩展离线下载