下面简单介绍一下微信网页开发者工具。

下载：

下载方法在之前的文章中已经介绍过。 具体可以参见微信小程序开发详细流程一（注册小程序及开发工具下载）。

下载链接：

进入开发者工具下载页面

模拟器：UI视图

这是一个小程序模拟器。 建议使用。 后面会提到原因。

这是小程序的一个功能区。 下面我将一一解释。 我们先看下一节。

该区域是我们调试时可以查看变量的值和状态的区域。

我们看一下编辑区：

编辑区就是我们要编写代码的地方。 左边是树管理器。 目录结构文件类型将在后面的文章（小程序文件类型及代码组成）中进行讲解。

点击上面的“+”号会创建目录和文件，如下图，

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

小程序还提供了不错的搜索功能。 单击放大镜可快速匹配与您的关键字相关的页面。

调试：

这就是我上面提到的调试器。

:

顾名思义，它是一个控制台，会显示一些编译错误或者警告信息，并且在使用.log()时，它会输出一些你自己调试的信息。

:

该功能区主要让我们可以使用断点、调试代码、在.JS文件中打断点（调试快捷键F10\F8）

左边是编译后的树形目录结构，和上面的目录对应，但是会编译一些WXML、WXSS等文件，所以这里看不到。 这里只有JS。

这里你会发现同一个文件名有两个JS文件，一个是.js，另一个后面是[sm]。 两者有什么区别？

[sm]文件实际上是你的源代码文件，它和你的编译器中编写的代码完全相同。

.js 文件实际上是已为您编译的文件。 见下图

:

大家应该都很熟悉这一点。 就看几个常用的单词吧，比如左边的NAME。 这是网络链接的特定列表。

这应该是用得最多的地方，是查看每个网络请求具体信息的地方。

比如这个

: 是分别显示其中一个

: 这只是预览

http：请求头中的一段信息。 是显示请求返回信息的地方。

：管理每个请求所花费的具体时间

:

查看缓存数据

小程序的一大优点是它支持本地缓存。 例如，在我当前的项目中，如果用户第一次输入自己的身份证号码，那么下次使用时就会默认填写该号码。

:

根页面相关，数据绑定

后面具体使用数据绑定的时候我会详细介绍。

XML：

它实际上是小程序的UI界面和UI代码

这些功能都一目了然了，别的就不多说了。

还有一点，由于小程序会验证验证证书，如果您是测试开发，请勾选“详细信息”以禁用验证。

了解了这些基础知识就没有问题了