Chrome 调试手机端网页

简介: Chrome 调试手机端网页

目的

Step1. 开启USB调试功能

开启USB调试功能,在调试配置时,要注意勾选 启用视图属性检查功能

手机端USB调试配置.jpg


提示

USB线出问题的概率也很大!最好用原装充电器上的线。


Step2. Chrome浏览器配置

手机浏览器中打开任意网页,例如 www.baidu.com ,接下来在电脑Chrome浏览器地址栏中输入: chrome://inspect/#devices ,就能看到手机中打开的网页了,如下所示:

Chrome查看手机网页列表.png


接下来点击 inspect 按钮,就开始了调试功能,如下所示:

Chrome调试网页示例.png


番外

局域网WiFi调试

首先通过USB数据线连接到电脑,并正常开启USB调试功能,进行如下操作:

$ adb devices
List of devices attached
1575531506008TA    device
$ adb devices
List of devices attached
1575531506008TA    device
$ adb tcpip 5555
restarting in TCP mode port: 5555
$ adb connect 192.168.3.160:5555
connected to 192.168.3.160:5555
$ adb devices
List of devices attached
192.168.3.160:5555    device点击复制复制失败已复制


提示

台式机没有无线网卡是不行的哦!

目录
相关文章
|
4月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
7月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
165 0
|
10天前
|
Web App开发 前端开发 JavaScript
【专栏:工具与技巧篇】网页调试工具(Chrome DevTools)的使用
【4月更文挑战第30天】Chrome DevTools是谷歌浏览器内置的网页调试利器,提供Elements(查看编辑HTML/CSS)、Console(JavaScript调试)、Sources(JS/CSS文件调试)、Network(网络请求分析)和Performance(性能瓶颈排查)等面板。通过掌握这些功能,开发者能有效优化网页性能和用户体验。本文详细介绍了各面板的使用方法,助力开发者高效工作。
|
12天前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
4月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
5月前
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
|
2月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
31 0
|
2月前
|
JavaScript 前端开发 UED
JS自动跳转手机移动网页
JS自动跳转手机移动网页
456 0
|
7月前
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
58 0
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
|
3月前
|
Web App开发 Windows
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
一个好用的设置所有网页成暗黑背景的 Chrome 扩展
22 0

热门文章

最新文章