微信开发者工具的使用(一)

微信开发者工具(一)

一、微信开发者工具基本信息

1.1 微信开发者工具的下载

直接打开下面网址进行下载:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.2 下载以后登录

登录微信开发者工具.png

1.3 新建项目

1.4 微信开发者工具详情页

[外链图片转存失败(img-gmV5PArB-1567256776341)(https://i.loli.net/2019/08/30/yvtRNblSdWjp4K5.png)]

  1. 模拟器:

    • 可以调整对应的机型

    • 可以调整展示页面的大小

    • 模拟网络状态:WIFI、2G、3G、4G和Offline(断网)

    • 模拟操作

      模拟操作.png

该操作的模拟前后端,前后端的切换操作,

例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。

  1. 调试工具:

    • **Wxml:**帮助开发者开发,wxml转发后的界面。可以看到真实的页面结构,和结构对应的wxss属性,同时可以通过更改wxss属性,实时的看到修改的情况

    • Sources panel: 用于显示当前的脚本文件,在Sources panel的脚本是已经编译好的脚本,已经处理之后的脚本文件。在Sources panel运行的时候,运行到断点,会导致整个小程序停止运行。

    • AppData panel: 用于展示目前运行小程序时的具体数据

    • Storage panel: 可以直接对数据进行删除、新增和修改
      用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据储存情况

    • Network Panel: 用于观察和显示 request 和 socket 的请求情况

    • **Console panel:**两大功能:

      1. 开发者可以在此输入和调试代码
      2. 可以再次查看小程序的报错

      在控制台可以输入命令

      build:编辑小程序

      Preview: 预览

      upload:上传代码

      openVendor:打卡基础库所在目录

      openToolsLog:打开工具日志目录

      checkproxy(url):检查指定url的代理使用情况

    • Sensor panel:
      两个功能:

      1. 开发者可以在这里选择模拟地理位置
      2. 开发者可以在这里模拟移动设备表现,用于调试重力感应API

      重力测试.gif

发布了16 篇原创文章 · 获赞 0 · 访问量 304
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览