做H5页面的同学可能经常会遇到一个场景，就是电脑上调试好的页面怎么在手机上访问测试呢？

下面就介绍一种自己经常使用的方式，利用Charles代理软件来实现！

安装Charles

直接去官网下载对应的系统版本安装即可。 下载地址

软件本身是收费，免费使用的话会软甲打开之前有个延迟提醒，忽略即可，或者你也可以去找破解版

代理配置

  • 双击打开软件找到代理配置这一项，选中系统代理（我这边使用的是Mac版本）：

  • 打开代理配置，设置好代理端口

  • 手机上设置 WIFI 代理为手动，端口和地址填入上面配置好的端口和电脑的IP地址

手机上配置wifi手动代理可以根据机型搜一下就知道了

手机访问测试

例如在电脑上有一个H5项目已经配置好了虚拟主机 域名是demo.yangbai.com,没有配置虚拟主机的直接使用ip和端口访问项目

这时候不出意外的话电脑上回弹出来一个是否允许这个手机连接这么一个弹窗，点击允许即可！

然后就可以访问到了，Charles左边还可以看到请求数据。

利用Charles做代理测试电脑上写的H5页面的更多相关文章

  1. Charles做代理的Map Remote路径配置

    使用Webpack做前端开发时,本地localhost使用了Webpack-dev-server搭建一个服务,开发阶段如果想把对本地后台的请求改为对外网的请求,可以使用Charles开启代理,把路径修 ...

  2. 使用Apache Benchmark做压力测试遇上的5个常见问题

    这一篇文章主要记录我在使用Apache Benchmark(一下检测ab)做网站压力测试的过程中,遇到的一些问题以及解决办法,方便日后使用. 这一篇文章主要记录我在使用Apache Benchmark ...

  3. 用iPhone查看pc电脑上写的html(Mac电脑Charles)简单版

    对于客户端同学开发来说,写一段代码想在真机上看看,是非常容易的. 那么在这么一个大前端的环境下,客户端开发想写点html和js代码,又想在手机上看看效果,怎么办呢? 需要以下几个步骤: 大体流程:1. ...

  4. 如何利用Jmeter做代理录制脚本

    如果对于这个Jmeter不太会使用的童鞋,可以去参考其他的教学文档,本文只提供Jmeter的代理使用. 第一步:添加线程组

  5. 利用花生壳在自己电脑上建立外网可访问的svn

    下载花生壳并注册账号 2.花生壳会送你一个免费的二级域名 3.登陆到路由器界面192.168.0.1或者192.168.0.0进入动态dns选项输入你的花生壳账号密码 4.在路由器设置界面设置转发规则 ...

  6. 让外界可以访问电脑上的网站的几种方式——花生壳，域名，IIS（待）

    前话: 每次“养大“一个网站,都有种骄傲地想秀给朋友们看的冲动. 之前可能是困于电脑,实在不方便. 现在,不用克制了! 该秀就秀,能装逼就装逼. 养大孩子就该拉出来秀秀,见见世面. 正题:这次实习,我 ...

  7. Java基础-继承 利用接口做参数，写个计算器，能完成+-*/运算

    38．利用接口做参数,写个计算器,能完成+-*/运算 (1)定义一个接口Compute含有一个方法int computer(int n,int m); (2)设计四个类分别实现此接口,完成+-*/运算 ...

  8. 在macOS苹果电脑上安装Azure DevOps Server（TFS）代理

    1. 概述 MacOS是一套运行于苹果Macintosh系列电脑上的操作系统,是首个在商用领域成功的图形用户界面操作系统.Iphone应用软件的开发人员,都使用运行macOS的电脑或mini盒子进行软 ...

  9. 利用nginx做反向代理解决前端跨域问题

    最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...

随机推荐

  1. MySQL第五讲

    内容回顾 单表操作 """ 1.配置文件先统一设置成utf8 \s 2.无论你怎么改都没有生效 你的机器上不止一个mysql文件 C有一个 D有一个 3.百度搜索 sho ...

  2. 普通web整合quartz跑定时任务

    一.场景(什么时候用到定时任务) 文件跑批,定时处理数据,和业务解耦的场景 二.目前都有哪些工具可以定时处理数据 1.jdk的timertask:数据量小的情况下,单线程的 2.kettle:比较适合 ...

  3. 在pycharm中批量插入表数据、分页原理、cookie和session介绍、django操作cookie

    昨日内容回顾 ajax发送json格式数据 ''' 1. urlencoded 2. form-data 3. json ''' 1. ajax $.ajax({ data: JSON.stringi ...

  4. （3）RabbitMQ交换器(Exchange)

    1.前言 上个章节也有简单介绍过RabbitMQ交换器,这里主要了解下它的类型和如何使用.交换器有四种类型,分别是direct.fanout.topic.headers. 2.Virtual host ...

  5. OA办公软件篇（一）—组织架构

    OA办公软件篇(一)-组织架构 背景 作用 迭代历程 具体实现 写在最后   背景 在说组织架构之前,我们先来说说OA本身. 百度百科解释OA为:办公自动化(Office Automation,简称O ...

  6. MATLAB神经网络应用设计【1】

    基于看到一个博客的大佬说自己学的东西太多了,很容易遗忘.我觉得我目前也出现这样的问题了,所以在这里开了博客,开始记录整理自己的学习之旅.   今天看了这本书的前几章,看这个书的目的是为了1个多月后的数 ...

  7. linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题

    发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...

  8. vue2.x版本中computed和watch的使用入门详解-computed篇

    前言 在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作. 基础使用 在computed中,声 ...

  9. [转载]详解ssh端口转发(二)

    关于使用ssh portforwarding来进行FQ的操作,网络上已经有很多很好的文章,我在这里只是画两个图解释一下. 首先要记住一件事情就是: SSH 端口转发自然需要 SSH 连接,而 SSH ...

  10. （数据科学学习手札135）tenacity：Python中最强大的错误重试库

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在编写程序尤其是与网络请求相关的程序, ...