前端调试环境搭建

前言

日常前端开发调试过程中，经常会遇到真机调试。真机调试环境搭建主要从如下几点进行讲解：

• 启动本地服务
• 创建热点
• 设置服务器代理
• 调试技巧

技术清单：

a charles

• https 转http
• 转发配置
• mock 数据

b 360热点

启动本地服务

前端开发过程中，启动本地服务很简单。目前主流的前端构建工具有grunt、webpack、glup，以上前端构建工具均可快速搭建前端开发框架。执行对应的命令即可启动服务。
注意：由于mac 80端口被占用。启动服务的时候，需要root 启动即：sudo+你的命令
如果不想使用80端口，需要在本地搭建nginx服务器或使用charles做代理(将请求分发到本地服务器。相当于一个nginx服务器)

创建热点

1. 使用360创建wifi，设置用户名称和密码
2. 使用各类终端，连接热点
3. 代理服务器设置，常规代理服务器端口一般是8888

原则：
a 创建同一个局域网，让自己搭建的服务器和手机各类终端同处一个局域网络
b 在局域网内，搭建一个代理服务器。在代理服务器上做些有利于调试的处理。

调试技巧

修改服务器返回内容

• Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
• Rewrite 功能适合对网络请求进行一些正则替换。
• Breakpoints 功能适合做一些临时性的修改。(AJAX c’est 有网络超时设置，使用该功能时，需要调整超时时间)

Q&A

1. mac 电脑无法抓取到本地浏览器的https网络请求包？
   解答：产生该问题的原因通常是mac电脑没有安装ca正式或者没有正确的安装证书。

mac 安装证书

1. IOS 环境下，使用map功能，无法将https 转成http功能
   解答：产生该问题的原因通常是ios手机终端没有安装charle证书或者证书没有添加信任。
   手机安装证书步骤如下：

2. 查看手机终端浏览器需要设置的链接地址

   
   ios 手机设置终端
3. IOS 终端配置

安装证书

注意：无法连接时，请重新检查是否正确配置代理到自己的代理服务器

添加信任

扩展阅读

charles 从入门到精通