对于客户端同学开发来说，写一段代码想在真机上看看，是非常容易的。

那么在这么一个大前端的环境下，客户端开发想写点html和js代码，又想在手机上看看效果，怎么办呢？

需要以下几个步骤：

大体流程：1. 安装webstorm，并设置webstorm，2，安装Charles，并设置charles。3. 设置手机代理。

1. 电脑端安装webstorm或者其他前端开发工具（webstorm的工程运行起来，是以localhost:开头的，帮你建好一个localhost（即127.0.0.1.:63342）了，方便手机访问电脑）

安装webstorm（略）

2. 安装完webstorm，对webstorm进行Debugger设置，目的是让手机可以访问webstorm建立的localhost，如图：

勾上两个选项， Can accept external connections和 Allow unsigned requests

3. 使用Charles（mac端）的map Remote功能或者fiddler（windows端），以Charles为例

设置map remote。以便使用自定义域名（这里我用简单好记的abc）访问固定ip。可以理解为：手机访问abc就是访问电脑的127.0.0.1.:63342

4. 手机设置代理.

不再累赘，客户端开发同学应该都设置过。设置服务器(电脑的ip地址)和端口写死8888

5. 最后来验证，在webstorm中新建一个project。再在工程中创建一个html。写一行helloworld

webstorm在浏览器中运行一遍记录浏览器中的地址(path)。我这边是：http://localhost:63342/untitled/helloworld.html?_ijt=il909a3u95a2cd4v71bvjivm4h

再在手机上输入，刚才自定义的abc的域名，即http://abc/untitled/helloworld.html?_ijt=il909a3u95a2cd4v71bvjivm4h。这样手机上就可以预览webstorm中的html了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
hello world!
可以在手机上查看html了
</body>
</html>
手机端效果

在最后一步，有些情况是只有html显示成功了，css，js文件都是404未找到，导致界面显示错乱，只有文字没有格式。我也是找了很久原来是http头referer的问题。index.html是没有referer头的，index.html中的css和js有referer头，导致应答404了。如图：js文件标红了，未成功。如果单独请求css文件(灰色的)是成功的.对比之后发现是referer的问题。

解决办法：在index.html中添加meta属性

<meta name="referrer" content="never">

用iPhone查看pc电脑上写的html(Mac电脑Charles)简单版的更多相关文章

  1. 利用Charles做代理测试电脑上写的H5页面

    做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系 ...

  2. PoisonTap - 在锁屏电脑上窃取cookies，获得电脑路由，安装网络后门的工具

    工具地址:https://samy.pl/poisontap/ 当PoisonTap(由Raspberry Pi Zero & Node.js开发)接入到一个锁屏或者用密码保护的电脑上时,它可 ...

  3. 怎样在本地电脑上连接另外一台电脑上的mysql数据？(代码示例)

    基本上有两种方式: 1,使用MYSQL的管理工具,可以远程连接,比如用导航猫系列的,只要知道对方IP,然后就可以自己输入账号密码连接了. 2,使用代码连接. Java代码示例: package com ...

  4. 用tensorflow求手写数字的识别准确率 （简单版）

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data #载入数据集 mnist = in ...

  5. 如何使用IVT BlueSoleil 如何在电脑上使用蓝牙耳机

    1 确保电脑上有蓝牙适配器 (现在很多电脑是不配蓝牙的),如果没有,网上买个蓝牙适配去,十几块钱很便宜.好了之后装一个下面这个软件,然后搜索蓝牙耳机,下面的状态栏就是"搜索设备" ...

  6. 远程Jenkins新增Mac电脑节点

    一,前言 上一篇博客Jenkins集成appium自动化测试(Windows篇)介绍了怎么使用远程Jenkins新建节点连接本地Windows电脑进行Appium自动化测试集成. 但是在做ios Ap ...

  7. Mac电脑没有声音，苹果电脑没有声音怎么办

      对于使用 Windows 系统电脑的小伙伴来说,可能有很多人会遇到电脑没有声音的问题.苹果 Mac 电脑也会出现没有声音的问题,不过相对较少.这里以我遇到的一个没有声音的问题为例,简单介绍处解决的 ...

  8. Mac电脑如何转换图片格式？ImageWell for Mac转换图片格式教程

    想用Mac电脑转换图片格式?我想你可以借助ImageWell for Mac软件!ImageWell是一款简单好用的的图像处理工具,具有显示,编辑,处理,保存等功能.下面小编来为大家演示在Mac电脑上 ...

  9. iPhone手机怎么投屏到电脑上

    如今生活水平不断上升,人们更加追求高质量.高享受的生活,所以可以利用一切资源提高生活质量,享受更好的生活体验,比如说手机投屏电脑就可以提高我们的视觉体验,所以更多的人去尝试,那么iPhone手机怎么投 ...

随机推荐

  1. php中的public、protected、private三种访问控制模式及self和parent的区别(转)

    php的public.protected.private三种访问控制模式的区别 public: 公有类型 在子类中可以通过self::var调用public方法或属性,parent::method调用 ...

  2. 遍历文件后缀名 为 .java的文件

    import java.io.File; import java.io.FileFilter; //创建一个功夫类继承文件管理类 public  class FileFu implements Fil ...

  3. CSS预编译语言-LESS

    LESS的作用 CSS层叠样式表,它是标记语言,不是编程语言:所有的预编译CSS语言(less/sass…)都是赋予了CSS的面向对象思想 LESS的编译 LESS叫做预编译CSS:写好的LESS代码 ...

  4. Python自动化培训第一周学习总结

    Python自动化培训第一周学习结束,看视频复习,把作业完成了. 总体来说,开卷有益. 首先,工具真是好东西,能够极大提升效率,也是人区别于动物所在.想起前任大领导对工具的不屑,本质也是对效率的不屑, ...

  5. 如何让模拟的json数据接口能够正常的在手机上有效果

    1. 确保手机与PC在同一个ip网下 这里我是通过------------360随身WIFI,20块钱淘宝上卖的,外观像U盘一样的,直接插在电脑的USB上就能在PC上创建一个WiFi,手机连接上就可以 ...

  6. spark核心优化详解

    大家好!转眼又到了经验分享的时间了.吼吼,我这里没有摘要也没有引言,只有单纯的经验分享,请见谅哦! 言归正传,目前在大数据领域能够提供的核心计算的工具,如离线计算hadoop生态圈的mr计算模型,以及 ...

  7. 如何安装 MySql 5.7.22

    你首先得去官网去下载一个zip文件,https://dev.mysql.com/downloads/mysql/ 以我所选版本为例,选择MYSQL Community Server 然后在右边选择你所 ...

  8. asp.net中的CheckBox控件的使用

    CheckBox控件中的最重要属性就是checked属性了 下面就是使用checked属性的一个小应用; 先建立一个wed窗体:在窗体中写下这些代码: <%@ Page Language=&qu ...

  9. rpm和yum模拟安装

    在更新安装包之前,我们可能会想做一个测试运行,换句话说,模拟而不是实际安装更新的包,以确定在安装之前是否有任何需要处理的问题. 以测试更新openssh2为例: yum update openssh2 ...

  10. Polynomial_0

    @[注]两个一元多项式按照指数由大到小的顺序输入! #include <stdio.h> #define MAXSIZE 50 struct PolyNode { int coeffici ...