android web 调试,Web页面Android安卓真机调试

如果是前端开发手机页面，通常会需要在手机运行本地代码，检查页面布局和显示，同时需要在chrome浏览器控制台进行调试。在这里记录一下安卓机web页面，手机运行，pc调试的操作方法。主要用到的是chrome的remote DevTools。

主要步骤：

一．运行本机代码的调试

手机下载chrome浏览器；

在手机上的chrome浏览器访问本地代码(在url地址栏输入电脑ip+端口，例：10.X.XXX.XXX:8080；如vue代码在本地访问地址为 localhost：8080，则将localhost替换为本机ip(在设置-网络-属性中可以查看IPv4的地址)即可)；

在手机设置中打开开发者模式；

用usb线连接手机和电脑；

手机上会弹出是否信任此电脑设备的确认弹框，选择信任；

在电脑上打开谷歌浏览器，访问chrome://inspect，手机上显示本地页面，就可以看到Remote Target下会显示连接成功的手机和手机上chrome访问了的网页列表。

找到需要调试的网页，点击下面的inspect，则调试页面会在一个新的chrome窗口打开。左边和真机屏幕同步显示，右边是我们熟悉的调试台。

注意：

手机和电脑要在一个网络内；

需关闭电脑防火墙；

二．手机运行电脑虚拟机代码的调试

当我们的项目前后端不分离时，代码可能运行在虚拟机上。

当手机访问运行在虚拟机上的代码时，则需要做端口映射。

步骤：

和上面一样，手机下好chrome，打开开发者模式，插上usb线。

电脑端打开chrome://inspect页面，在chrome://inspect上部我们可以看到一个Port forwarding的选项：

点开Port forwarding，在左边输入手机访问电脑时你想设置的端口，在右边输入虚拟机ip(虚拟机防火墙也需关闭，我这里是php laravel框架推荐的homestead的ip)，记得勾选左下角Enable port forwarding；

手机浏览器里访问则无需输入电脑ip，直接输入localhost+端口号即可。

android web 调试,Web页面Android安卓真机调试相关推荐

ubuntu android 真机调试,Ubuntu下AndroidStudio的真机调试
手机设置里面,开启开发者选项,然后再打开USB调试 (我的小米手机需要USB打开方式为文件传输) 查看手机端口id 终端输入命令 lsusb, 系统会列出所有的usb设备.例如: Bus 004 De ...
RN项目安卓真机调试步骤
RN项目安卓真机调试步骤 1.adb(Android Debug Bridge)工具安装: 打开终端,入当前用户的home目录,默认就是,不是的话执行命令:cd ~ 或 cd /Users/YourM ...
HBuilder 安卓真机调试无线连接
HBuilder 安卓真机调试无线连接准备工作 hbuilderx配置adb路径真机调试无线连接准备工作先准备以下: ADB 工具包: Hbuilder: Android手机: hbuilde ...
【安卓真机调试】较全面的Android真机调试详解
目录 1. 启动调试功能 1.1 配置设备上的开发者选项 1.2 运行可调试的 build 变体 2 开始调试 2.1 设置断点 2.2 选择设备 2.3 在工具栏中点击Debug图标 2.4 打开D ...
【错误记录】eclipse，android，logcat日志无法打印，真机调试
eclipse调试android程序,当使用真机时system.out,log.i等日志在logcat里面打印不出来(但能打印出来其他一堆系统消息),而使用模拟机一切正常,怎样才能在真机调试时也能在l ...
开发版微信小程序手机版无法访问服务器,微信小程序安卓真机调试 202:net::ERR_CERT_AUTHORITY 无法请求接口请求接口无响应...
微信小程序真机调试 202:net::ERR_CERT_AUTHORITY 主要在安卓机. 证书使用的是腾讯云的免费证书 TrustAisa 开发者工具手机端浏览器 PC浏览器访问https:/ ...
iOS 真机调试包(最新 16.1 真机调试包)
目前已支持最新16.1 系统的真机调试包来啦! 系统版本下载地址提取码 iOS 16.1 链接 1628 iOS 16.0 链接 1628 iOS 15.2 链接 1628 iOS 15.0 链接 ...
uni-app真机预览调试：关于ios系统真机调试的操作步骤
介绍: 因手机差异较大,HBuilder并没有提供App的模拟器.不管uni-app或5+App/wap2app项目,都需要连接真实的手机或手机模拟器来运行测试,称之为"真机运行" ...
ionic4安卓真机调试
首先数据线连接电脑,,找到开发者选项打开usb调试,, 测试:在电脑上打开360手机助手,用手机打开360手机助手,用电脑连接手机,看是否成功. 执行命令:ionic run android -l - ...

android web 调试,Web页面Android安卓真机调试

android web 调试,Web页面Android安卓真机调试相关推荐

最新文章

热门文章