微信小程序开发工具介绍及断点代码调试)

下面对微信web开发者工具做个简单的介绍

下载:

在上篇已经介绍过下载式了,可到微信小程序开发详细流程 一 (注册小程序及开发工具的下载)查看详细内容

下载地址:

前往 开发者工具下载页面

模拟器:UI视图

这里是个小程序的模拟器,建议使用iphone6,原因后面会说到,

 

这里是小程序的一个功能区域啊,下面会一个逐一讲解,先看下一块,

 

这个区域是我们在调试的时候,去查看变量的值和状态的一个区域

 

 

我们来看一下编辑区域:

编辑区域就是我们要写代码的地方了,左侧就是一个树状管理器,目录结构文件类型会在后面(小程序文件类型与代码构成)的文章做讲解.

点击上面的"+"号会创建目录和文件,如下图,

如果要在根目录下创建文件夹,如下图,

小程序还给了一个很好的查找功能,点击放大镜,可以快速匹配到与你关键字相关的页面

 

调试:

就是上在说的调试器了,

Console:

顾名思义就是控制台了,会显示一些编译错误啊或是警告信息之类的,还有console.log()时,输出自己调试的一些信息

Sources:

这个能功区域主要就是让我们用打断点的,调试代码的,断点打在.JS文件(调试快捷键F10\F8)

左侧是编译过后的一个树状目录结构,和刚刚上面的目录是对应该的,但是它会把一些WXML,WXSS等文件编译了,所以在这里是看不到的,这里就只有JS

 

这里你会发现同一个文件名会有两个JS,一个是.js的,一个是后面带[sm]的,他们两个有什么区别呢,

[sm]文件,其实就是你的源代码文件,它跟你编译器里写的代码是一模一样的.

.js文件其实是已经给你编译过后的文件.看下图

 

Network:

这个大家应该都比较熟悉了,就看几个常用用要的话,比如左侧NAME,这就是些网络链接具体的列表

这里应该是用的最多的,是具体查看每一个网络请求信息的一个地方,

比如这个

headers:就是显示一个它的每一个

preview:就是一个预览

http:请求头的一个信息.response就是显示的请求返回信息的一个地方

timingz:每一个请求的具体耗费时间的一个管理

 

Storage:

查看缓存数据

小程序有个很牛逼的地方就是支持本地缓存,比如我现在的项目,用户第一次使用输入身份证号,下次使用会默认填充

 

AppData:

根页面相关的,进行数据绑定的

后面具体用到数据绑定的时候会再详细介绍,

    Wxml:

实际就是小程序的一个UI界面,和UI代码

 

这些功能都一目了然了,我就不说什么了

再多说一句,因为小程序会校验证书,如果你是测试开发,在"详情"勾选不校验

 

了解了这些基本就没什么问题了