android内打开网页 安卓手机怎么打开网页_手机打开电脑端网页


最终成果预览


android内打开网页 安卓手机怎么打开网页_chrome浏览器_02


如图,左边会实时显示真实手机页面的预览(注意是你真实手机,而不是chrome浏览器开启模拟手机端的页面),右边是chrome的开发者模式,包含所有日常用的工具,怎么样,是不是很惊喜,很开心,也很想要实现,接下来,就跟着我一步一步的来操作吧。

环境配置

1.手机启用开发者模式

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

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


android内打开网页 安卓手机怎么打开网页_chrome浏览器_03


关闭"关于手机"页面,打开"开发人员选项",打开”USB 调试”选项。


android内打开网页 安卓手机怎么打开网页_android内打开网页_04


2.手机上安装chrome浏览器

安装包我已经上传百度网盘了chrome浏览器(密码:zj68)

3.chrome浏览器中发现安卓设备

  1. 在chrome浏览器中输入
chrome://inspect/


就可以看到如下页面,勾选discover usb devices选项


android内打开网页 安卓手机怎么打开网页_chrome浏览器_05


或者在电脑的Chrome浏览器的菜单中选择 更多工具 > 开发者工具,然后在出现的面板的右上角选择 more tools-> remote devices也可以看到类似页面

  1. 连接手机(windows系统记得提前安装驱动)在手机上选择始终允许这台计算机访问即可
  2. 在电脑上即可发现手机设备,如图


android内打开网页 安卓手机怎么打开网页_webview_06


4.手机打开网页开始调试

  1. 手机用chrome浏览器打开想要调试的网页,一定要chrome浏览器哦,打开之后就会显示手机打开网页的标签,如图:


android内打开网页 安卓手机怎么打开网页_webview_07


  1. 点击下面的inspect按钮即可调试


android内打开网页 安卓手机怎么打开网页_android内打开网页_08


android内打开网页 安卓手机怎么打开网页_chrome浏览器_02


inspect按钮还提供了重载、关闭等操作。有了这个神器之后,妈妈再也不用担心我调试手机页面了,另外要说明的是,这个方法不仅能调试手机网页,还能调试所有以webview的页面,比如,有些应用是基于这个webview来实现的页面,通过这个方法,都能调试

android内打开网页 安卓手机怎么打开网页_android内打开网页_10