为什么要做H5真机调试?

第一,样式调试。浏览器的效果和真机上的效果不一定相同,没有真机调试,我们都是先上传到服务器,然后再用手机访问,显然对于样式调试来说,这样效率很低。

第二,调用到底层、真机才拥有的功能。比如说扫一扫,扫一扫是无法在电脑上调试的。

一、让手机和电脑处于同一网段

如何让手机和电脑处于同一网段?

1.如果你所处环境的wifi和电脑网络是同一局域网,当你手机连上wifi后自然很电脑处于同一网段了。

2.电脑发射wifi,手机连接。笔记本电脑可以下载wifi软件,台式电脑只能买个wifi发射器了,所以我买了一个随身wifi。

3.手机开热点,笔记本电脑连接。

二、下载Fiddler

Tools → Options → Connections

设置端口号 Fiddler listens on port

勾选 Allow remote computers to connect

三、手机配置代理

进入你连接的wifi,配置代理。

四、起一个本地服务器

现在前端起一个本地的服务器是很容易的,比如HBuilder和Visual Studio Code都可以。

HBuilder是内置了一个,而Visual Studio Code需要你安装相应的插件。

五、调试

复制浏览器中的地址 http://127.0.0.1:5500/index.html

将 127.0.0.1 改成你电脑的IP地址 http://192.168.1.143:5500/index.html 并复制到手机浏览器中

H5真机调试的更多相关文章

  1. H5 app在真机调试的时候正常,打包成app后报错

    在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...

  2. Android+Chrome 真机调试H5页面实践

    前言 使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起. ...

  3. HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试

    No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...

  4. iOS开发:创建真机调试证书及描述文件

    iOS开发:创建真机调试证书及描述文件 关于苹果iOS开发,笔者也是从小白过来的,经历过各种困难和坑,其中就有关于开发证书,生产证书,in_house证书,add_Hoc证书申请过程中的问题,以及上架 ...

  5. xamarin.forms uwp app部署到手机移动设备进行测试,真机调试(device portal方式部署)

    最近学习xamarin.刚好 手上有一个lumia 930.所以试一试把uwp app部署到手机上,并真机调试一把. 目前环境: 1.开发pc电脑是win10,版本1607.加入了insider,所以 ...

  6. cocoapods真机调试出现问题解决

    swift中使用cocoapods时,Podfile中必须写上 use_frameworks! 使用cocoapods导入框架在真机调试出现问题的解决方案: 1.build phases 2.+ ne ...

  7. IOS 真机调试

    真机调试的步骤: 1.注册成为苹果开发者(99$) 2.登陆苹果开发者主页 https://developer.apple.com/membercenter/index.action 3.点击 Cer ...

  8. 使用未付费的账号真机调试 iOS 程序,过几天后程序一打开就会闪退

    使用未付费的苹果开发者账号真机调试 iOS 程序,过几天后程序一打开就会闪退.   解决办法: 删除 Provisioning Profile,重新配置一次. 终极解决办法:花钱购买苹果开发者账号. ...

  9. iOS 真机调试不能连接网络的排错过程

    开发环境: macOS 10.12.1 Xcode 8.1 Qt 5.8 gSOAP 2.8 iPhone 6S+iOS 10.1.1   问题: 使用 Qt Quick 写了一个跨平台的应用,在Wi ...

随机推荐

  1. 怎么精确控制solidworks里面的表格的位置

    手工移动是不可能的,总是有点误差,虽然有主动捕捉的功能. public void SetTablePosition(TableAnnotation table, double x, double y) ...

  2. Spring Boot 集成 logback日志

    application.properties 配置logback.xml 路径注:如果logback.xml在默认的 src/main/resources 目录下则不需要配置application.p ...

  3. 神经网络常用的Numpy功能笔记

    数组初始化 x=np.array([[1,2]]) x=np.zeros((2,3)) 生成随机数 w=np.random.randn(2,3) PIL image转换成array img = np. ...

  4. google chrome 浏览器去掉 XHR finished loading....

    每次Ajax请求,Chrome浏览器控制台提示如图XHR finished loading信息. 要去掉 这些信息显示 ,点击上图的Settings ,在打开的面板中取消 Log XMLHttpReq ...

  5. centos7 lnmp环境部署

    搭建版本 版本组合 php5.6+apache/2.4.6(centos7)+mysql5.7.24 因为新系统不能确认哪些指令已经搭建  所以安装前需要确认下是否拥有 检测是否已经安装过Vim rp ...

  6. Anatomy of a Database System学习笔记 - 查询

    查询解析 解析会生成一个查询的内部展示.格式检查包含在解析过程中. 每次解析一个SELECT,步骤如下:1. 从FROM里找到表名,转换成schema.tablename.这一步需要调用目录管理器ca ...

  7. Linux下的常见压缩解压缩命令

    Linux常见压缩解压缩命令 常见压缩文件扩展名 .Z compress 程序压缩的文件: .zip zip 程序压缩的文件: .gz gzip 程序压缩的文件: .bz2 bzip2 程序压缩的文件 ...

  8. 《深入理解java虚拟机》读书笔记——垃圾收集与内存分配策略

    可回收判定两种算法 引用计数法(Reference Counting):引用为0时可回收. 可达性分析法(Reachability Analysis): 从GCRoots对象到这个对象不可达. GCR ...

  9. 2018-2019-2 网络对抗技术 20165304 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165304 Exp3 免杀原理与实践 免杀原理及基础问题回答 一.免杀原理 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中需要使用到的技术. ...

  10. JAVA_maven 配置

    前人种树: https://www.cnblogs.com/supiaopiao/p/7276805.html?utm_source=itdadao&utm_medium=referral