如何在手机设备上实时调试

【背景】

     1、移动开发使用Chrome模拟设备，但是和真实设备还是有一定出入的

     2、QQ和微信使用的X5内核与Chrome的webkit内核有差异，经常遇到奇葩的bug，这种场景又比较多，一般很难定位

     3、手机型号颇多，如果遇到某个设备有bug，怎么调试

     4、开发环境下手机设备因域限制访问不到办公网络，访问不了开发或测试中的产品页面

 

【目的】

     1、对于Dev、Fe可以在真实设备上实时调试，快速定位原因并解决（包括QQ、微信的内置浏览器）

     2、对于QA、PM、UI可以在真实设备上测试办公网络中在开发或测试的项目

 

【方法】

     1、安卓系列

          a、手机开启USB调试并将手机通过USB连接PC

          b、下载最新版QQ浏览器，安装 微信调试工具

          c、手机安装微信，清除微信本地TBS内核，并重新安装本地TBS内核

          d、开启PC的wifi，连接到Qunar热点，并登陆VPN

          e、手机连接Qunar 热点，并将代理设置为PC的无线IP地址

          f、PC开启Charles代理，端口设置8888

          g、PC开启fekit server，端口默认为80

          

          在微信中打开开发的产品地址，刷新PC端QQ浏览器，实时调试就开始了……

          a、在PC的QQ浏览器中指定任意元素，手机自动响应，体验和PC上Chrome一模一样

          b、修改本地代码，实时生效

      

     2、IOS系列

          

          a、开启本机wifi，连接到Qunar热点，并登陆VPN

          b、手机连接Qunar 热点，并将代理设置为PC的无线IP

          c、PC开启Charles代理，端口设置8888

          d、PC开启fekit server，端口默认为80

 

          IOS目前还无法做到体验和PC上Chrome一样；但可以修改本地代码后实时看到效果

 

【我是FE、Dev】

          

               

【我是QA、PM、UI】

          

  【如何安装TBS内核】

            参考：http://blog.qqbrowser.cc/start/

            

    

  【如何查看PC的无线IP】

 

          Windows：

 

                    cmd：ipconfig/all

 

                    

 

     Mac：

 

          系统偏好设置》网络

 

                  

 

【注意事项】

       1、在微信调试插件中选择 “网页调试”，其次先在手机端微信打开页面，PC上再启动服务

       2、本方法使用的工具只有VPN、笔记本、手机、Charles，Fekit（仅fe需要），按公司情况这些都是标配，PC上不再需要其他网络代理软件；