36

远程调试 Android 设备网页 - 阮一峰的网络日志

 4 years ago
source link: http://www.ruanyifeng.com/blog/2019/06/android-remote-debugging.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

网页在手机浏览器打开时,怎么调试?

安卓设备的 Chrome 浏览器支持远程调试,可以使用桌面浏览器的开发者工具。本文介绍如何进行远程调试。

bg2019062613.jpg

Step 1:启用开发者模式

远程调试需要打开”开发者模式”。如果你的手机已经打开,可以跳过这一步。

开发者模式的打开方法是,进入”设置 > 关于手机”菜单,找到”内部版本号”这一项(或类似名称的条目),在上面连续按七次。退回上一级菜单,应该就能看到”开发者模式”。

进入其中,打开”USB 调试”选项。

bg2019062605.jpg

Step 2:连接手机

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

bg2019062606.jpg

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

bg2019062607.jpg

选中 “Discover USB devices” 选项。

bg2019062614.jpg

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

bg2019062608.jpg

Step 3:调试网页

安卓手机里面,打开 Chrome 浏览器。这时,桌面电脑的开发者工具应该会同步显示所有已经打开的 Tab 页。

并且,开发者工具还有一个输入框,让你输入想要访问的网址。输入以后,单击”打开”,就会在手机浏览器打开这个网址。

bg2019062609.jpg

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

bg2019062610.jpg

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

bg2019062611.jpg

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

bg2019062612.jpg

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK