charles本地H5抓包

1. 首先你得有charles

2. chrome上做好设置，安装配置浏览器插件

参考配置：SwitchySharp
https://jingyan.baidu.com/article/1709ad805d6a4a4634c4f0b4.html

代码配置

1. webpack配置

在你本地的 webpack.config.js 文件里
配置一下,注意端口号就是你本地起服务的端口号

    output:{
            publicPath: "http://127.0.0.1:9091/"
    },

2. 关闭本地的devServer 代理功能

    devServer: {
        // proxy: {
        //     '/api/*': {
        //         target: 'http://test-mock.stg.yqb.com/',
        //         changeOrigin: true,
        //         secure: false
        //     },
        //     '/travelmbiz/*': {
        //         target: 'https://teststable-caikucloud.stg.yqb.com',
        //         // target: 'https://caiku-uat.yqb.com/',
        //         // target: 'https://test2-caiku.stg.yqb.com/',
        //         changeOrigin: true,
        //         secure: false
        //     }
        // }
    }

3. 根据不同环境，启动的时候带上环境参数
   修改package.json,例如16是一键环境，带上参数 --env 16

    "h5": "rnpack --cordova --dev -p 9091 --env 16",

4. 启动本地服务

npm run h5

代理配置

按照截图设置好

设置chrome代理.png

启动charles代理接管.png

配置映射.png

然后在chrome上打开你的页面例如 http://teststable-m.stg.com/m/car/index.html
就可以在你本地断点调试了

原理

本质是通过 抓包改变原网址的所有资源路径，映射到你本地服务路径上