使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices

我使用的是小米（红米NOTE2 ）,电脑是win 10 系统，以下几步就可以轻松使用浏览器内置的功能调试移动端网页了：

1. 手机开启调试模式连接电脑，确保是调试模式连接的（不知道怎么打开调试模式的可以参考：http://jingyan.baidu.com/article/046a7b3ee3b565f9c27fa9b2.html）；

2. 手机上打开一个网页，只要是webview形式的网页应该都是可以的；

3. 电脑chrome浏览器地址栏输入：chrome://inspect/#devices ，会看到如下图的情况（上面会看到你所连接的设备的名称和信息，下面就是当前设备上可以用于在电脑上调试的页面的一下信息，地址、标题、网页大小。。。，如果没有显示设备信息，则表示没有连接好，可以插拔手机或关闭调试模式重开一下）；

4. 找到你准备调试的那个，并且确保手机上的那个页面也是处于激活状态的的，然后点击蓝色的 inspect 链接，会弹出一个新的窗口；

5. 熟悉的界面出现了，接下来你应该知道怎么用了，（恭喜！！！）

检查元素↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

控制台↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

查看网络情况↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

最后补充一下, 实在连接不成功, 可以尝试使用微信官方给的这个办法, 使用 adb 工具进行运行命令 adb kill-server -> adb start-server -> adb devices

4. 电脑死活adb连接不成功？

解决方案：

方案一：确保USB与PC的连接

1) 请确保USB连线能正常连通PC和手机（非常重要呀！）

简单确认方法：手机状态栏显示为充电状态。

2) 请确保PC的USB驱动已正常安装，可以在控制面板“设备管理器” “通用串行总线控制器”中确认无异常USB设备显示。

3) 点击重置，再次“启动检测”。

方案二：使用adb启动

1) 使用内置adb包（ win下载, mac下载），手动启动adb

运行 adb devices

2) 找到设备，点击重置，再次“启动检测”

3) 未找到设备，或者offline

　　① 运行命令 adb kill-server -> adb start-server -> adb devices

　　② 重拔usb链接调试设备

　　③ 重启调试设备

　　④ 重启电脑...

方案三：安装PC应用宝

方案四：安装android SDK

使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices相关推荐

电脑端浏览器调试移动端网页支持调试Android和ios
Android 1. 谷歌浏览器 Chrome (需要翻墙) ① USB连接电脑并开启USB调试 (以vivo为例其他手机找到版本号多次点击) 设置--更多设置--关于手机--多次点击软件版本号(开 ...
Chrome 浏览器调试移动端
1.手机用数据线连接电脑,打开USB调试,选择连接方式为媒体设备MTP. 2.电脑打开谷歌浏览器,输入 :chrome://inspect/#devices ,手机上打开APP. 3.会看到如下图的情 ...
浏览器调试移动端网页包括安卓和苹果两种设备
情景:手机浏览器上打开一个网页发现界面出错了,可在电脑浏览器上运行的明明很完美,但是我无法对手机浏览器上的页面进行审核元素:这可怎么调试啊,怎样才能知道它在哪里错了! 解决方案有两个: 一:引入vco ...
移动端适配：font-size设置方案的理解（浏览器调试移动端网页工具使用）
进过前面几篇相关的知识学习,使用rem布局是主流选择,而使用rem最核心的确定html根节点里面的font-size大小,即根永远是 1rem=?px为换算单位, 有一种处理办法,是在css里面,通过 ...
用mac的chrome浏览器调试Android手机的网页
一.参考链接 read chrome remote debugging documentation 调出开发者选项二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...
用mac的chrome浏览器调试 Android 手机的网页
一.参考链接 read chrome remote debugging documentation 调出开发者选项二.设置android 在安卓4.2及更新的版本中,默认情况下,[开发者选项]是隐藏 ...
chrome手机版打开调试模式_移动端利用chrome浏览器在PC端进行调试方法
由于最近工作中遇到需要在电脑上调试手机端的功能和样式,之前也没有遇到过,所以就各种百度和试验.最后终于功夫不负有心人,成功了.(那一刻心情真滴很鸡冻啊~~~~~~~~~).所以暂时记录下来.以免鸡冻过 ...
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页（微信网页、浏览器皆可）
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页(微信网页.浏览器皆可) 1.打开开发者选项中的USB调试功能(狂点"关于手机"中的版本号,然后返回到系统设置中就能看到 ...
Chrome 浏览器调试的日常使用总结
这篇文章对日常开发中使用 Chrome 浏览器进行调试的方法总结. 使用 F12 或右键"检查(Inspect Element)"即可打开浏览器的调试工具(笔者使用的 Mac,Wi ...

使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices

4. 电脑死活adb连接不成功？

使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices相关推荐

最新文章

热门文章