网页在手机浏览器打开时,怎么调试?
安卓设备的 Chrome 浏览器支持远程调试,可以使用桌面浏览器的开发者工具。本文介绍如何进行远程调试。
Step 1:启用开发者模式
远程调试需要打开”开发者模式”。如果你的手机已经打开,可以跳过这一步。
开发者模式的打开方法是,进入”设置 > 关于手机”菜单,找到”内部版本号”这一项(或类似名称的条目),在上面连续按七次。退回上一级菜单,应该就能看到”开发者模式”。
进入其中,打开”USB 调试”选项。
Step 2:连接手机
使用 USB 线将手机和电脑连接起来。手机可能会有弹框,询问是否允许访问手机数据,选择”允许”。
打开电脑的 Chrome 浏览器,进入”开发者工具”。点击右上角三个点,进入设置菜单,打开”更多工具 / 远程设备”窗口。
选中 “Discover USB devices” 选项。
这时应该可以看到手机已经连接成功了。
Step 3:调试网页
安卓手机里面,打开 Chrome 浏览器。这时,桌面电脑的开发者工具应该会同步显示所有已经打开的 Tab 页。
并且,开发者工具还有一个输入框,让你输入想要访问的网址。输入以后,单击”打开”,就会在手机浏览器打开这个网址。
在开发者工具里面,所有已经打开的 Tab 页,选中想要调试的网页,点击后面的”Inspect”按钮。
这时,就会弹出一个独立的调试窗口。左侧是手机浏览器的预览,右侧是各种调试工具,供开发者使用。
“Inspect”按钮旁边的”更多选项”,还提供了重载、关闭等操作。
参考链接
- Debugging your website from Android Devices, Tapas Adhikary
- Get Started with Remote Debugging Android Devices, Kayce Basques
(完)
荒原之梦 说:
赶上阮老师更新啦 :-)
2019年6月26日 14:21 | # | 引用
石樱灯笼 说:
意义不大,因为安卓的chrome跟PC端没什么差异,即使没有手机也可以调试。
如果能在Windows上调试iOS上的浏览器才有意义。
2019年6月26日 15:30 | # | 引用
qazwsx 说:
高墙过不去的话,还是不能用????
2019年6月26日 15:37 | # | 引用
debug 说:
PC上的chrome需要配置好翻墙,否则debug页面一直空白打不开。
2019年6月26日 15:57 | # | 引用
一直流浪吧 说:
最后一步点击inspect,就404了......
2019年6月26日 15:58 | # | 引用
jq 说:
目前真的没有比较满意的调试工具。。
2019年6月26日 17:21 | # | 引用
Orange 说:
最近也遇到调试的问题了 如果调试app里面webview的网页
2019年6月27日 10:04 | # | 引用
weber 说:
如果有无线网可以手机和电脑链接同一无线,项目用电脑本地IP启动,手机访问启动项目的地址也可以,感觉这样更方便。当然如果项目没有用服务启动好像只有这种类似的方法了。不过项目跑起来也简单,最简单的gulp几行代码就搞定。
2019年6月27日 11:31 | # | 引用
浮心 说:
阮老师,可以分享一篇fiddler了,不管ios、android都能调,不过主要适用于接口调试
2019年6月28日 08:52 | # | 引用
yootyoo 说:
华为p9 p10 接上CHROME,usb也在手机同意了, 就是在chrome不显示设备。
2019年6月28日 11:22 | # | 引用
飘过~~~~ 说:
听说阮一峰老师不写代码了 ?
2019年6月28日 11:46 | # | 引用
智轩 说:
怎么可能没有用,用处非常大,比如app里内嵌的webview页面,依赖于native提供的能力,这种情况在pc上很难模拟,只能在app里打开,再远程调试。
2019年7月 1日 00:54 | # | 引用
阿渊 说:
使用vconsole插件吧,可以直接在手机上调试
2019年7月 1日 09:09 | # | 引用
hjs 说:
建议认真看看文章,手机上也必须使用chrome浏览器打开网页。手机上的chrome表现和pc基本是差不多的,而有问题的webview以及其他浏览器是无法调试的。
2019年7月 1日 10:35 | # | 引用
gengjiawen 说:
不是,手机上的webview也可以这种方式调试的。
2019年7月 1日 15:51 | # | 引用
xgqfrms 说:
这个好像几年前就有了,不是什么新技术!
2019年7月 2日 00:02 | # | 引用
PC 说:
设置一下host就好了
# inspect
172.217.14.116 chrome-devtools-frontend.appspot.com
172.217.14.116 chrometophone.appspot.com
2019年7月 2日 14:23 | # | 引用
LA_Star 说:
webView中切入的页面也可以通过这种方式调试;
2019年7月 2日 19:27 | # | 引用
刘哈哈 说:
阮老师没说这是新技术。
2019年7月 3日 10:30 | # | 引用
bigma 说:
windows 调试IOS 请参考我这篇文章
2019年7月 9日 09:15 | # | 引用
bigma 说:
额。忘记留链接了,还是不留了。搜索 ios-webkit-debug-proxy
2019年7月 9日 09:17 | # | 引用
rockswang 说:
有个spydebugger可以调试非chrome,甚至微信的webview
2019年7月11日 16:00 | # | 引用
oxygen 说:
你试过在chrome能调试滚动穿透的问题吗?必须得手机上才有效果
2019年7月12日 11:42 | # | 引用
lorry 说:
请问找到调试方法了吗?
2019年8月 8日 10:49 | # | 引用
Sg 说:
如果手机浏览器不是 chrome, 可以参考这篇文章。
https://www.pengfeixc.com/blogs/developer-handbook/debug-android-webpage-from-desktop
2022年1月 7日 09:51 | # | 引用