前端调试环境搭建
前言
日常前端开发调试过程中，经常会遇到真机调试。真机调试环境搭建主要从如下几点进行讲解：
- 启动本地服务
- 创建热点
- 设置服务器代理
- 调试技巧
技术清单：
a charles
- https 转http
- 转发配置
- mock 数据
b 360热点
启动本地服务
前端开发过程中，启动本地服务很简单。目前主流的前端构建工具有grunt、webpack、glup，以上前端构建工具均可快速搭建前端开发框架。执行对应的命令即可启动服务。
注意：由于mac 80端口被占用。启动服务的时候，需要root 启动即：sudo+你的命令
如果不想使用80端口，需要在本地搭建nginx服务器或使用charles做代理(将请求分发到本地服务器。相当于一个nginx服务器)
创建热点
- 使用360创建wifi，设置用户名称和密码
- 使用各类终端，连接热点
- 代理服务器设置，常规代理服务器端口一般是8888
原则：
a 创建同一个局域网，让自己搭建的服务器和手机各类终端同处一个局域网络
b 在局域网内，搭建一个代理服务器。在代理服务器上做些有利于调试的处理。
调试技巧
修改服务器返回内容
- Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
- Rewrite 功能适合对网络请求进行一些正则替换。
- Breakpoints 功能适合做一些临时性的修改。(AJAX c’est 有网络超时设置，使用该功能时，需要调整超时时间)
Q&A
- mac 电脑无法抓取到本地浏览器的https网络请求包？
解答：产生该问题的原因通常是mac电脑没有安装ca正式或者没有正确的安装证书。
mac 安装证书
- IOS 环境下，使用map功能，无法将https 转成http功能
解答：产生该问题的原因通常是ios手机终端没有安装charle证书或者证书没有添加信任。
手机安装证书步骤如下： -
查看手机终端浏览器需要设置的链接地址
ios 手机设置终端 - IOS 终端配置
安装证书
注意：无法连接时，请重新检查是否正确配置代理到自己的代理服务器
添加信任
