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

简介: 我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示:第二步,最好是电脑和安卓手机都连接了谷歌浏览器第三步,打开电脑上的谷歌浏览器,调出控制台,我们点击More tools,再选择在之后的页面中,如图所示选项必须打对勾。

我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。

第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示:

img_8b0a353ab027803596895736adacd865.png

第二步,最好是电脑和安卓手机都连接了谷歌浏览器

第三步,打开电脑上的谷歌浏览器,调出控制台,

img_bd7760030ccd78181993fd27c8928ed2.png
img_1f9b1debd5e39c4472fa262b5cb45516.png

我们点击More tools,再选择

img_3fd6bdfa92eb81a789ab13eb1b55cbfd.png

在之后的页面中,如图所示选项必须打对勾。

img_4daebdf2e5da6a17ce92f874d75dc447.png

然后用数据线连接电脑和手机,手机就会弹出一个连接提示,你点是就可以了,连接成功就会跟上图中红色箭头标注的一样,出现带绿色小圈的你的手机型号。

第四步,在电脑上的谷歌浏览器输入这个网址chrome://inspect/,就会出现如下图页面

img_26d54034f0b9602a6e3ff05ce80e9864.png

第五步,打开你手机上的谷歌浏览器,输入你想要调试的网页,我一般都是把网页放到我的本地服务器,在手机浏览器上输入我的本地网址,如果是一个百度页面的例子

img_c12f0505529a9588a6885c31d0575f26.png

最后一步,我们点击inspect就可以审查手机页面了,审查方法就跟审查PC网页一样了。

img_4fdcc266d7e1d69a87b4d9248bfb9a8f.png

以上,欢迎大家提供更多更好的想法。

相关文章
|
4月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
583 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
4月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
7天前
|
人工智能 API 数据库
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
Browser Use 是一款专为大语言模型设计的智能浏览器工具,支持多标签页管理、视觉识别、内容提取等功能,并能记录和重复执行特定动作,适用于多种应用场景。
128 0
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
|
2月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
155 2
|
2月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
692 2
|
2月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
351 9
|
3月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
57 1
 H5微信外支付(移动端浏览器)
|
2月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
102 0
|
3月前
|
Web App开发 开发者
|
3月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】