飞雪团队

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 8197|回复: 0

远程调试 Android 设备网页

[复制链接]

5344

主题

5432

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
18354
发表于 2021-1-24 10:53:10 | 显示全部楼层 |阅读模式
网页在手机浏览器打开时,怎么调试?
                                                                                                                安卓设备的 Chrome 浏览器支持远程调试,可以使用桌面浏览器的开发者工具。本文介绍如何进行远程调试。
7eb8ced8b64783d341c27f90b9230b88.jpg

Step 1:启用开发者模式

远程调试需要打开”开发者模式”。如果你的手机已经打开,可以跳过这一步。
开发者模式的打开方法是,进入”设置 > 关于手机”菜单,找到”内部版本号”这一项(或类似名称的条目),在上面连续按七次。退回上一级菜单,应该就能看到”开发者模式”。
进入其中,打开”USB 调试”选项。
cd0ca1c940d492711b13a81a10a7133e.jpg

Step 2:连接手机

使用 USB 线将手机和电脑连接起来。手机可能会有弹框,询问是否允许访问手机数据,选择”允许”。
0e43a772983e39a43b8d0ed038fe5fd2.jpg

打开电脑的 Chrome 浏览器,进入”开发者工具”。点击右上角三个点,进入设置菜单,打开”更多工具 / 远程设备”窗口。
4bdc8244584ab4bc5ccdb98a20a6275c.jpg

选中 “Discover USB devices” 选项。
56f34f7275ed94392adcf46898661695.jpg

这时应该可以看到手机已经连接成功了。
db9c6bc09238e22ba1386592e183f4b8.jpg

Step 3:调试网页

安卓手机里面,打开 Chrome 浏览器。这时,桌面电脑的开发者工具应该会同步显示所有已经打开的 Tab 页。
并且,开发者工具还有一个输入框,让你输入想要访问的网址。输入以后,单击”打开”,就会在手机浏览器打开这个网址。
278a98c56379959dce474b0a42f765f9.jpg

在开发者工具里面,所有已经打开的 Tab 页,选中想要调试的网页,点击后面的”Inspect”按钮。
4cb959a58a6f43c37eb56148c7e120f9.jpg

这时,就会弹出一个独立的调试窗口。左侧是手机浏览器的预览,右侧是各种调试工具,供开发者使用。
2cb7f5642cf79a8fdfaca047c6bd0e49.jpg

“Inspect”按钮旁边的”更多选项”,还提供了重载、关闭等操作。
08d1bd0f4d16228f2536e1cdb4df3df1.jpg

参考链接


  • Debugging your website from Android Devices,  Tapas Adhikary
  • Get Started with Remote Debugging Android Devices, Kayce Basques
(完)
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|飞雪团队

GMT+8, 2024-11-24 03:51 , Processed in 0.068118 second(s), 25 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表