在手机上访问本地的 H5 页面：

手机和电脑处于同一局域网。
在手机上是无法访问本地的 localhost 页面的，可以用电脑本机的 ip 地址替换 localhost。

在 cmd 里输入 ipconfig，就可以看到 ipv4 地址，也就是电脑本机的 ip 地址。

在手机上调试本地的 H5 页面：

通过 spy-debugger 来实现。

spy-debugger 是一站式的页面调试、抓包工具，可以远程调试任何手机浏览器页面，任何手机移动端 webview 页面（例如：微信，HybridApp 等）。

在命令行中输入相应命令安装 spy-debugger。

Android：npm install spy-debugger -g。
IOS：sudo npm install spy-debugger -g。
手机和 PC 保持在同一网络下。
在命令行中输入 spy-debugger 回车运行，浏览器会自动打开相应地址，如果没有自动打开则手动打开浏览器输入。
在手机上设置 HTTP 代理：服务器地址设置为 PC 的 IP地址，端口设置为 spy-debugger 的启动端口，默认 9888。

Android 设置代理步骤：设置 --> WLAN --> 长按选中网络 --> 修改网络 --> 高级 --> 代理设置 --> 手动。
iOS 设置代理步骤：设置 --> 无线局域网 --> 选中网络 --> 配置代理 --> 手动。
在手机上安装证书：点击浏览器打开的地址中的 请求抓包 --> RootCA --> Download，将下载下来的文件发到手机上，在手机上通过非微信的手机浏览器安装证书。

必须先设置完代理后再通过非微信的手机浏览器安装证书。
手机首次调试需要安装证书，已安装了证书的手机无需重复安装。
IOS 新安装的证书需要手动打开证书信任。在 设置 --> 通用 --> 描述文件 中安装并信任描述文件。
用手机浏览器访问要调试的页面即可。

在手机上访问和调试本地的 H5 页面相关推荐

苹果手机mov文件如何复制到电脑_如何在手机上访问电脑上的文件（超详细步骤） iPhone版...
之前分享了如何在两台电脑上共享文件,如需访问可点击如下链接: Town-Tree:如何在两台电脑之间共享文件(超详细步骤)zhuanlan.zhihu.com 如何在安卓手机上访问电脑上的文件,可点 ...
如何本地调试安卓端h5页面
1.使用数据线将安卓机接入电脑并打开usb调试模式 2.打开chrome输入chrome://inspect/#devices,安卓打开需调试app的h5页面,点击chrome inspect弹出新窗 ...
谷歌浏览器调试移动端h5页面
1.安卓手机打开开发者模式连接上电脑 2.在谷歌浏览器中访问地址: chrome://inspect/#devices 3.在安卓手机中的chrome浏览器中访问页面,记住一定要是chrome浏览器 ...
chrome浏览器调试手机端h5页面
这个是常识性的问题了.奈何我之前确实是不知道.只知道用F12来调试PC端的页面,这次经过同事指点,终于知道为啥人家在浏览器调试手机端页面,显示的大小都是手机端的. 步骤: 1.打开F12 2.如果所示 ...
如何在手机上访问自己写的网页？
一,要解决这个问题,首先我们要了解访问网页的本质是什么? 网页访问的本质设备客户端---网络---服务器(放网页) ①设备客户端,其实就是手机或者电脑的浏览器 ②服务器,其实可以简单理解为一台让你访 ...
如何在手机上访问自己做的网页
前提:手机和电脑连接的是同一个路由器的网络. 1.搭建服务器,用Apache 2.把HTML文件放到服务器里面,打开浏览器能访问到服务器(localhost)里的HTML. 3. 查看本机的IP地址进 ...
使用手机扫网页上的二维码便可快速在手机上访问网站
下面分享几个在线生成网址二维码的API接口.都是采用http协议接口,部分可以使用https协议,无需下载安装什么软件,可简单方便地引用在线生成网址二维码的API接口: 1.百度网盘(可使用http ...
Chrome浏览器调试iOS手机H5页面
1.终端安装ios-webkit-debug-proxy brew install ios-webkit-debug-proxy 2.手机端开启safair web检查器设置 --> safa ...
photozoompro 8 解锁代码_能够在手机上实现代码编写的APP——Pydroid 3
Pydroid 3是一款能够在手机上进行Python编码的软件,这款软件易于使用且功能强大,适用于一些刚进入编程学习的小白进行Python编程编写,可以快速的学习的开箱即用示例,功能齐全的终端仿真器以 ...

在手机上访问和调试本地的 H5 页面

在手机上访问本地的 H5 页面：

在手机上调试本地的 H5 页面：

在手机上访问和调试本地的 H5 页面相关推荐

最新文章

热门文章