如何在电脑上调试安卓手机HTML界面

1、首先将手机设置为调试模式，方法：设置——应用程序——开发——USB调试，打上√即可。
2、用数据线连接至电脑，在电脑上安装豌豆荚，此时豌豆荚会帮你安装驱动，安装好后豌豆荚就可以连接上手机了用adb命令测试是否有装置已连接。
3、如果无法测试装置是否连接，就是用adb server启动服务项开始在真机上调试，在eclipse中选择Run——Run Configurations，在左边选择好你要调试的工程，然后将右边切换至Target标签下。
6连接至真机调试，可选第一个或第二个，这里我直接选择第一个，点击Run，等待几秒钟出现以下界面。

一、iOS + Safari
1、打开手机web检查器。
通过设置>Safari>高级>Web检查器打开。见下图（大图），并且会看到该选项下面对电脑 *** 作的相应描述，照做就好。

2链接电脑（Mac）

21 先在手机Safari中打开你想调试的网页，并用数据线连接到电脑（我这里是Mac）

22 再在电脑上打开Safari点击Develop菜单，就会看到如下图所示（大图）：

33 点击22中的网站名就会在电脑上打开Safari的控制台，如下图（大图）：

3调试网页
如上33图所示，此时可以查看手机网页的DOM结构，并且和电脑端网页调试无异，当鼠标滑过这些DOM节点的时候手机上的相应布局也会高亮起来，如下图（大图）：

二、Android + Chrome
1设置手机
11设置>关于手机>版本号（Build number），对版本号这一项连点7下（这是官方文档里的说法）就会提示“已成为开发者”。

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

2设置电脑（Mac）

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

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

22 设置环境变量 。打开终端在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 出现命令帮助信息就是成功了。

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

3链接电脑

31 在手机上的Chrome里打开想要调试的网页，用数据线连接手机和电脑（我的是Mac。唉～只是强调平台的不同，不要误会）。

32 打开电脑上的Chrome，在地址栏里输入 about:inspect 选中 Discover USB Devices前面的复选框。出现下图画面（大图）

4调试网页

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

42 点击上图中的网站缩略图，就会跳转到Google的一个代理链接（链接可能被墙……，挂代理）就会打开如下图所示的控制台（大图）

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

好的，完结。

按F12进入控制台模式 或者选中内容 右键 审查元素
ELements html css调试 选中html标签右边就是css
右键标签Edit as HTML 为修改当前标签html代码 Edit as Text 是修改text内容
css去掉钩子 就能失效了 右上角加号添加新选择器 元素后面点击添加新元素
还有一些常用的
sources 来源文件 CSS JavaScript之类文件调试debug
Network 页面请求 get post之类 一般用来抓包的
Application 存websql Local Storage cookies增删改查的地方
console 就是控制台了 可以输入JavaScript代码 或者console函数输出的地方

---