06.开发者工具详解(二)

那么我们刚刚介绍完,微信小程序他的几个版本之后,我们看到右边还有一个测试按钮,这个测试按钮是我们可以通过,每24小时生成一个测试报告,微信会给我们随机地分配4到8种机型来测试我们小程序,页面的一个首屏加载时间CPU占比等这些指数.,那么在测试右边,我们看到一个腾讯云的选项,这个就是我们刚刚所介绍的它的一个第三方的平台,可以快速地去帮我们构建一个小程序的开发环境和线上环境

那么点击详情,我们看到右边弹出了一个详情的面板,这个详情面板我们就可以通过一些项目设置,还可以看到我们的一些域名信息,腾讯云的状态等项目设置,我们里面可以切换,我们的调试的一个基础库版本

那么在调试基础库下面我们可以去设置一些,我们编译的一些配置,比如我们ES6转ES5上传代码的时候,我们去帮我们自动的补全这个样式,以及我们代码上传时去自动的去压缩我们的小程序代码,还有我们可以选择去不校验我们的一些安全域名 web-view的域名,还有我们的一些https的证书,那么域名信息这里,我们可以看到我们各个网络请求设置的一个域名,包括request的域名,socket请求的域名,和我们上传文件的域名和下载文件域名,和我们web-view业务的域名,腾讯云状态这里,我们可以看到,如果我们去开通了,这个腾讯云的第三方服务之后,我们可以看到,它一个开发环境和生产环境的一个状态以及我们腾讯云的一些授权信息,

那么在左侧,我们可以看到我们这里的一个模拟器

小程序的模拟器,我们可以通过切换我们的小程序它这个调试设备的机型,来看到我们小程序页面在模拟器上不同的表现,我们也可以切换它的一个网络状态和他的一个屏幕缩放,那么在右边,我们可以看到有一个调试器模块,这个调试器,主要讲一下这七个模块,一个是我们的console模块

console模块主要是来打印我们的小程序页面的一些调试log信息, sources模块是里面,会列出我们微信小程序页面的所有脚本文件,我们可以对这些脚本文件进行一个断点调试,network面板是会展示我们各个网络请求的一个状态信息 ,以及我们所请求资源的一个响应数据等等,storage这个面板是当我们在小程序里面通过调用wx.setStorage和wx.setStorageSync这个函数设置我们的缓存的时候,我们在这里可以去动态地去修改这些缓存数据 , AppData是我们微信小程序页面上真实展示的一个数据,我们也可以在这里动态地修改来查看我们小程序页面在模拟器上,不同设备的一个兼容性的情况. wxml面板是展示我们微信小程序页面的各个组件元素以及我们可以通过,对这些组件元素对,它进行一个样式属性的修改,

sensor面板主要是我们的一个地理位置信息和一个设备旋转角度的一个展示,在这里我们可以去动态地去修改我们的地理位置信息来模拟我们小程序页面,在不同的地理位置下的一个表现,在设备旋转角度这里,我们可以去拖拽这里来去查看它的一个设备的旋转角度我们可以看到各个坐标轴它的一个变化,

上面就是我们调试器,各个模块的面板.