移动端h5调试

charles breakpoints

一、添加Charles断点
1、用Charles抓包发起一次接口请求
2、对要打断点的接口右键，选择【Breakpoints】

二、Charles断点设置
1、点击Charles菜单-【Proxy】-【Breakpoint Settings】
2、双击【Location】内的接口地址，此时会弹出【Edit Breakpoint】对话框
3、在【Query】项输入：*
4、如果我只需要修改返回的参数，就只勾选【Response】

三、修改接口返回值
1、再次发起接口请求，此时会弹出下面的对话框

2、点击【Edit Response】，修改返回的报文
html的底部加入

<script>
        var el = document.createElement('script');
        el.src = 'https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js';
        document.body.appendChild(el);
        el.onload = function() {
            window.VConsole && (new window.VConsole());
        }
</script>

3、点击底部的【Execute】将修改后的内容返回

这时移动端页面右下角会出现一个vConsole，点击就能看到控制台信息

参考：
抓包工具：Charles-断点