真机调试H5

前言 在前端开发过程中，时常遇到移动端需求。若是每次部署完成后再查看开发效果，可能过于费时费力，因而需要可直接完成真机测试的配置 方法 一：查询电脑本地IP地址 1：ctrl/window+r输入cmd回车，打开命令提示符; 2：输入ipconfig,查看本地ip，具体如下 二：修改config 修改config中的配置，将host改为本地ip，具体如下： 三：手机访问链接 1：将手机与电脑连接同一无线 2：重启项目，生成链接，具体如下图： 3：至此即可完成所有配置，手机端访问networ

注意，微信开发者工具最新的1.0版本不支持移动端调试，必须是旧版，下载链接：https://pan.baidu.com/s/1dwf3ZJ1MpxOnfcKkzzBRAQ 提取码: igin。第一个选项打开微信扫码，提示503，选择普通调试，直接按步骤操作就行。需要注意的是，真机设置了代理，微信无法直接打开https网页，请求的api如果是https也会返回空。电脑chrome打开chrome://inspect/#devices。1、 使用微信开发者工具。2、使用vconsole。

一、让手机和电脑处于同一网段 如何让手机和电脑处于同一网段？ 1.如果你所处环境的wifi和电脑网络是同一局域网，当你手机连上wifi后自然很电脑处于同一网段了。 2.电脑发射wifi，手机连接。笔记本电脑可以下载wifi软件，台式电脑只能买个wifi发射器了，所以我买了一个随身wifi。 3.手机开热点，笔记本电脑连接。 二、起一个本地服务器（自用live-server） 三、移动端网页抓包调试工具 https://www.mobiledebug.com/Mobile Debug官方网站(代

第四步：在手机上打开ip+路径，也就是你电脑上访问页面的路劲。第一步：首先把项目运行起来复制 ip地址。第二部：去config.js里配置。第三步：手机要跟电脑连一个无线。

痛点：1）原生的H5，并不能方便地提供类似扫一扫的功能2）原生H5的扫一扫也需要部署到httpsps：本文基于mac系统，windows用户可以根据思路来进行调整。

为什么要做H5真机调试？ 第一，样式调试。浏览器的效果和真机上的效果不一定相同，没有真机调试，我们都是先上传到服务器，然后再用手机访问，显然对于样式调试来说，这样效率很低。 第二，调用到底层、真机才拥有的功能。比如说扫一扫，扫一扫是无法在电脑上调试的。 一、让手机和电脑处于同一网段 如何让手机和电脑处于同一网段？ 1.如果你所处环境的wifi和电脑网络是同一局域网，当你手机连上wi...

手机和电脑处于同一个局域网下面。 本地电脑开启服务。例如可以使用vscode开启服务（使用vscode下载Live Serer插件，设置好端口和地址后一键开启服务，方便调试）。 查看本地电脑的ip地址。 使用ip地址+端口+文件地址生成二维码。 使用客户端扫描上一步生成的二维码进行调试。 ...

使用 Mac 电脑和 iOS 手机，真机调试 H5页面

做移动端h5项目的时候，电脑浏览器调试样式和效果，可能和真机展示出来的效果有差距，比如有的手机开启了home键，比如文字大小等样式有偏差。虽然可以通过手机扫描网页二维码在手机上看样式，但是和真机还是有区别。最近没有带数据线，记录下怎么利用ADB实现无线真机调试。

1、不想每次都打包，使用真机调试效率快 chrome://inspect/#devices 2、选择手机系统 开发人员先选、USB 调试

对于mac，需要安装android和adb配置，才可以在chrome的调试工具中看到将要调试的页面。安装后需要配置adb，参考以下文章：https://www.jianshu.com/p/61339291c9e2。如果查看手机设备时，已添加的设备不是devices，而是【command not found: adb】，则需要刷新环境变量【source .bash_profile】。如果第一次配置环境变量，则该文档应该是空的。该命令的作用是如果不存在.bash_profile文件，则创建该文件；

​ PC页面，我们可通过F12打开控制台，查看日志信息，便于测试调试。但放到移动端中，移动端是没有控制台的，我们就无法查看页面的console信息，非常不便。但vconsole插件解决了此问题~ 介绍： vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。 现在 vConsole 是微信小程序的官方调试工具。 功能特性 日志(Logs)：console.log|info|error|... 网络(.

1、先将项目在本地启动（如果是静态页面，直接鼠标右击选择open with live server），并在浏览器打开。2、在电脑上选择Win键+ R键，输入cmd，点击回车进入到操作系统。3、输入 ipconfig 后回车 查看你电脑的局域网地址 （IPv4地址），然后将项目地址127.0.0.1部分替换成局域网地址。最后，将项目完整地址在手机浏览器中打开即可进行实时调试。