App调试：页面、数据接口--源自技术

谷歌浏览器

进入谷歌调试工具界面（快捷键F12）



点击手机图标（toggle device mode）进入设备模式



Device:选择设备
portrait/landscape:设备方向
Zoom to fit:自动缩放显示的设备大小
Screen:设置屏幕大小



Elements(元素视图):可以查看、编辑、删除元素和元素属性，查看元素编辑样式
Network(网络视图):查看页面发起的所有网络请求。
Sources(源视图)：查看编辑CSS,查看编辑调试JS
Console(控制台视图)：显示所有错误信息
Timeline(时间轴视图)：时间花费情况的概览
Profiles(性能分析视图)：堆分析仪(Heap Profiler)功能，
Resources(资源视图):查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等
Audits(审计视图):检查网页性能和网络利用率

修改hosts

Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。

Fiddler创建代理

开启Filddler的代理







修改手机WIFI的代理

Hosts和Fiddler组合使用

通过两个工具的组合，可以让Hybrid App、Web App、Native App等类型的应用访问我们本机的服务器方便调试。

花生壳搭建外网访问接口

应用采用一些第三方（易宝支付，高阳迅捷充值）服务的时候，有时需要我们提供一个外网可访问的地址。方便第三方产品回调。当我们没有外网IP时，可以借助花生壳等动态域名解析软件来做一个临时的外网访问环境。（当然有外网ip最好）