首先你得有charles
chrome上做好设置，安装配置浏览器插件
参考配置：SwitchySharp
https://jingyan.baidu.com/article/1709ad805d6a4a4634c4f0b4.html
代码配置
- webpack配置
在你本地的 webpack.config.js 文件里
配置一下,注意端口号就是你本地起服务的端口号
output:{
publicPath: "http://127.0.0.1:9091/"
},
- 关闭本地的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
// }
// }
}
- 根据不同环境，启动的时候带上环境参数
修改package.json,例如16是一键环境，带上参数 --env 16
"h5": "rnpack --cordova --dev -p 9091 --env 16",
- 启动本地服务
npm run h5
代理配置
按照截图设置好
设置chrome代理.png
启动charles代理接管.png
配置映射.png
然后在chrome上打开你的页面例如 http://teststable-m.stg.com/m/car/index.html
就可以在你本地断点调试了
原理
本质是通过 抓包改变原网址的所有资源路径，映射到你本地服务路径上
