2.3 微信Web开发者工具界面功能介绍
成功创建项目后，将进入到如图2-6所示的开发者工具主界面中。
图2-6 微信Web开发者工具主界面
图2-7 官方示例项目在模拟器中的运行效果
在主界面最左侧垂直分布着5个选项卡：【编辑】、【调试】、【项目】、【编译】和【关闭】。当点击【调试】后，左侧下半部分还会出现【后台】和【缓存】这2个选项卡。下面依次来介绍这7个选项卡。
2.3.1 编辑选项卡
如图2-6所示的界面就是编辑选项卡的主界面。编辑界面分为左、中、右3部分。左边是模拟器的预览视图，中间是代码的树状目录，右边是代码编辑区（也就是写代码的地方）。
我们来看看左边模拟器的相关功能。左边的模拟器可以模拟微信小程序在客户端真实的逻辑表现，我们可以在这里预览到小程序的运行情况，如图2-7所示。
“Hello World”的这部分就是官方示例项目运行的实际效果。
在模拟器的顶部有如图2-8所示的一条工具栏。点击工具栏最左侧的小图标可以将模拟器关闭，再次点击则会打开模拟器；中间的“iPhone 6”这一栏可以让开发者选择模拟器的机型用来模拟小程序在不同机型上的运行情况；最右侧的“wifi”一栏，可以让我们选择不同的网络环境。
中间部分是项目文件的树状管理器，这里可以整体预览我们的代码文件与组织关系。在这部分的顶部，如图2-9中，有3个较为重要的功能：最左侧的小图标点击后会隐藏树状文件管理器；中间部分显示了项目的项目名称；最右侧的“…”小图标用来执行一系列的文件相关操作。
图2-8 模拟器顶部工具栏
图2-9 树状文件管理器
点击图2-9中最右侧的“…”小图标将出现如图2-10中框选的区域。
图2-10 文件操作功能选项卡
点击【硬盘打开】将可以在Windows中打开项目的文件目录，点击【查找】可以搜索包含相关关键字的内容，点击【新建】将打开如图2-11所示的菜单。
图2-11 新建文件菜单
在新建菜单中可以新建文件夹与4种类型的小程序文件，关于这4种类型的小程序文件（.js、.json、.wxml、.wxss）将在文后具体介绍。除了可以在顶部打开新建菜单外，如果想在某个指定的文件夹内新建文件或者更改某个指定文件的文件名，可以将鼠标移动到相关文件夹或者文件上，这时同样会在鼠标悬停的位置出现“…”小图标，点击后即可打开类似如图2-11所示的新建菜单。
整个【编辑选项卡】的右半部分是代码编写区域，如图2-12所示。
图2-12 代码编写区域
代码编辑区域比较简单，这里就不再赘述了。
小程序开发工具目前功能比较简单，比如无法调整字体大小。这里介绍一个方法可以放大整个开发工具，从而间接实现放大字体：按住Ctrl，并滑动鼠标滚轮从而实现字体放大或者缩小。但是这种方法是通过放大整个开发工具来实现的字体放大，副作用就是左侧的【模拟器】会出现黑色的边框。希望微信尽快完善小程序开发工具的基本功能。
2.3.2 调试选项卡
图2-13展示了调试选项卡的界面。
图2-13 调试选项卡
【区域1】模拟器同编辑选项卡功能一样，这里就不再赘述了。
【区域2】展示了小程序经编译后生成的文件和文件结构。
【区域3】是编译后的文件内容查看区，可以在这个区域的文件里设置调试断点。
【区域4】调试功能区，可以在这里查看变量状态与数值、断点设置情况、变量作用域等。这个区域和Chrome浏览器里的调试工具几乎一样，调试的方法和快捷键也是相同的。
【区域5】信息输出区域，这个区域会显示程序运行的错误信息、警告信息以及用户自己打印的相关信息（通过console.log()输出的信息）。
如何在小程序中调试？
可以在【区域3】中点击每行代码前的行号设置断点。当代码运行到断点处后，将停止。常用快捷键有【F10】单步执行，【F11】进入方法，【F8】继续运行到下一个断点。更多快捷键可自行在【区域4】中查看。
在整个调试选项卡中，最重要的部分还是【区域2】和【区域3】顶部的6个功能模块儿，如图2-14所示。
图2-14 调试选项卡的6个功能Panel
我们逐一介绍这6个模块儿。
【Sources】Sources Panel是默认的panel，用于显示当前项目的脚本文件。如图2-13所示，【区域2】、【区域3】、【区域4】就是Sources Panel的内容。
【Console】Console Panel用于调试和输出信息，开发者也可以在这里输入代码。这个panel在【Sources】模块中同样存在，如图2-13中的【区域5】。当点击【Console】后，console Panel将变大，使开发者可以浏览到更多信息，如图2-15所示。
图2-15 Console panel
【Network】Network Panel主要用于观察和显示网络连接的相关情况。这里的Network Panel和Chrome浏览器里的Network Panel几乎一样。如图2-16所示。
图2-16 Network Panel
【Storage】Storage Panel用于显示当前项目的数据缓存情况，如图2-17所示。关于数据缓存将在项目开发中具体讲解。
图2-17 Storage Panel
【AppData】AppData Panel用于显示项目中被激活的所有页面的数据情况，这些数据主要是用来做数据绑定，如图2-18所示，关于数据绑定我们同样放在项目开发中具体讲解。在这里不仅可以查看数据情况，还可以更改数据，小程序框架会实时地将数据的变更情况反馈到UI界面上。
图2-18 AppData Panel
【Wxml】Wxml Panel是非常重要的一个功能模块，如图2-19所示。这个模块类似于Chrome调试工具下的Elements模块，主要用于调试Wxml标签和相关CSS样式，调试方法同Chrome一样。如果你是一个前端新手，那么建议好好地摸索一下这个功能模块的调试技巧，绝大多数和样式、标签相关的问题，都需要依靠这个Panel来调试。
图2-19 在Wxml Panel下可以同时查看UI、标签和CSS样式3者的相关数据及关联关系
以上的6个模块功能对我们开发非常有帮助。如果你在开发中遇到一些稀奇古怪的问题，那么最好的解决办法就是使用这6个panel来解决。我们在后面的章节中也会经常回过头来讲解这些panel的使用技巧，并使用这些panel解决我们的问题。
以上6个panel包含的功能非常多，不需要现在就把每个panel的细节了解的非常清楚。笔者的建议是知道以上6个panel是做什么的以及它们简单的使用方式即可，在后续的内容中将会用实际的数据来演示如何使用这些panel，开发者无须担心，轻轻松松地继续阅读本书吧！
2.3.3 项目选项卡
项目选项卡主要用来管理和设置项目，如图2-20所示。
图2-20 项目选项卡
项目选项卡主要有3大功能：显示当前项目细节、预览及上传项目以及项目配置。我们来具体看看每项功能的作用：
• 显示项目细节
如图2-20所示的顶部显示了项目名称和App ID。如果我们新建项目时选择的是“无AppID”，则这里将会固定地显示一个“touristappid”；如果你设置了项目的AppID，则这里会显示项目的AppID。
• 预览及上传项目
预览按钮可以实现在真机上运行小程序，但前提条件是你必须有一个微信小程序账号。如果你有小程序账号，则可以得到一个AppID，新建项目时，填入这个AppID即可。关于小程序账号的相关配置，我们将在本书的后面章节中详细介绍。由于我们在新建项目时选择的是“无AppID”，这里的预览按钮将处于灰色不可点击的状态。上传按钮用于上传和发布项目，上传的项目将可以在小程序账号后台页面中查看到。同样，由于选择的是“无AppID”，这里目前也是处于灰色不可点击状态。
• 项目配置
在目前版本中，总计有5个配置选项，下面我们逐一介绍：
• 开启ES6转ES5
小程序支持使用ES6来编写代码。如果使用ES6来编写代码，框架会默认使用babel将开发者的代码转换为ES5代码（这样做的主要原因是为了保持对三端：iOS、Android和开发工具模拟器的良好兼容性）。开发者可以在项目中关闭这个选项。
• 开启上传代码时样式自动补全
开启此选项，开发工具会自动检测并补全缺失样式，保证在iOS 8上的正常显示。
• 开启代码压缩上传
开启此选项，开发工具在上传代码时将会帮助开发者压缩JavaScript代码，减小代码包体积。
• 监听文件变化，自动刷新开发者工具
开启此选项后，如果代码发生了改变（需要Ctrl+S先保存），小程序开发工具会自动帮助开发者刷新调试模拟器，从而提高开发效率。也就是说，开发者不再需要手动地点击编译按键即可实时预览小程序运行效果，这是非常好用的一个功能。
• 开发环境不校验请求域名以及TLS版本
开启此选项，开发工具将不会校验安全域名以及TLS版本，帮助在开发过程中更好地完成调试工作。我们前面提到过，在开发工具里如果选取了“无AppID”模式，那么开发工具的安全限制级别非常低，不需要使用https访问服务器，也不会校验TLS版本。但如果我们填入了“AppID”，那么默认情况下开发工具的校验行为会和真机环境保持一致，比如，必须使用https访问服务器且服务器域名必须加入到微信小程序账号中的可信任域名列表中。如果我们不想接受这样的限制，又想使用“AppID模式”，那么需要把“开发环境不校验请求域名以及TLS版本”这一项给勾选上。
ES6转ES5的转换，只会帮助开发者处理语法上的问题，新的ES6的API例如Promise等需要开发者自行引入Polyfill或者别的类库。同时，为了提高代码质量，在开启ES6转换功能的情况下，默认启用JavaScript严格模式。开发者可以自己查阅资料了解什么是JavaScript的严格模式。
2.3.4 编译选项
图2-21 编译按键
严格也说，“编译”选项不是一个选项卡，只是一个功能按键。编译选项分为两种：默认编译和自定义编译。特别注意编译按键有2个小图标，上面的小图标是默认编译，下面的小图标是自定义编译。如图2-21所示。
编译快捷键Ctrl+B。最新版本中的小程序已经增加了实时预览的功能，在更改代码后只需要使用Ctrl+S保存，开发工具就会自动编译、更新代码。
但笔者在实际的开发过程中也发现，有时候Ctrl+S保存后代码运行会出现异常。这个时候，请手动点击执行一下编译。
关于自定义编译的设置，将放在项目文章详情页面一章中讲解。
2.3.5 后台选项
同【编译】选项，【后台】也是一个功能按键，可以在模拟器中模拟应用程序的前后台切换操作。以iPhone为例，当我们运行一个应用程序时，点击iPhone的“Home”键，应用程序将被切换到后台，但并没有关闭。具体的功能作用我们会在后面章节介绍小程序生命周期时讲解。
2.3.6 缓存选项
【缓存】是非常重要的一个功能选项。点击【缓存】会出现一个子菜单，包括4个选项：【清除数据存储】、【清除文件存储】、【清除工具授权数据】和【清除手机授权数据】。缓存选项是开发工具提供给我们用来进行数据缓存的小工具。关于数据缓存和文件缓存我们将在后面的项目章节中深入讲解。
2.3.7 关闭选项
【关闭】选项点击后将关闭开发工具，但开发工具并不会完全退出，而是会停留在项目选择页面上。
小程序现在还处于公测阶段，开发工具的bug还比较多。很多bug的暂时解决方法和我们经典的“重启电脑”类似，重启一下开发工具就好了。所以如果你遇到一些莫名其妙的现象，比如在早期的版本中，有时候某些事件会执行两次，这个bug当你重启开发工具后就不会再出现，你可以尝试完全关闭开发工具再开启。这里提醒一下大家，重启开发工具需要完全关闭开发工具，而点击【关闭】后并没有完全关闭开发工具，需要继续叉掉项目选择页面，才算完全退出。
2.3.8 快速打开官方API文档
作为一个开发者，官方API文档的使用会非常频繁。不同于其他开发工具【F1】是帮助选项，小程序的【F1】给出的是【查看命令面板】这项功能。小程序提供了一个快速打开官方文档的方法，即点击开发工具左上角的【帮助】→【关于】，在弹出的“关于”对话框中点击【点击打开文档】，即可马上进入官方API文档。
官方API文档除了用于经常查阅API外，推荐大家在版本更新后第一时间去查看更新内容。最新的更新内容对我们开发者来说尤其重要，更新内容通常会出现在官方API文档的【工具】→【下载】以及【历史更新日志】里。
2.3.9 开发工具的更新
微信小程序开发者工具将自动更新，无须开发者手动更新。每次启动开发工具后，如果有新版本则会自动提示下载。
在Windows下，如果开发者重启开发工具后依然没有自动更新，请退出开发工具，右键点击开发工具图标，选择【以管理员身份运行】。以上解决方案在Windows 10下测试可行。如果以上方案都不可用，请前往官网下载并安装最新版本的开发工具。
官方在140600版本中指出，下一个版本才能完全修复无法自动更新的问题。
2.3.10 常用小程序快捷键
1．格式调整
Ctrl+S：保存文件
Ctrl+[，Ctrl+]：代码行缩进
Ctrl+Shift+[，Ctrl+Shift+]：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行
Ctrl+Shift+F：全局搜索
2．光标相关
Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退
3．界面相关
Ctrl+\：隐藏侧边栏
Ctrl+m：打开或者隐藏模拟器
本章我们主要预览了整个微信Web开发者工具的全貌。笔者一向认为，工具的使用需要用具体的案例来推动，我们会在后续的项目编写中经常使用这几个选项卡和工具来解决开发中遇到的各类问题。下一章，我们将正式开始小程序的编码之旅。