1.3 微信Web开发者工具的操作与使用
“工欲善其事，必先利其器”。熟悉开发者工具界面与操作，将为我们今后的开发带来极大的便利。
1.3.1 界面与操作
微信开发者工具功能非常强大与便捷，集成了开发调试、代码编辑及程序发布等功能。主界面如图1-11所示。
图1-11 微信开发者工具-主界面
图中显示，开发者工具界面基本划分为四大区域：1区“顶部菜单”，2区“导航菜单”，3区“目录文件/模拟运行”，4区“编辑/调试开发”。1区与2区是固定的。3区与4区会依据选择导航菜单区的不同功能或模式有所不同。
1区“顶部菜单”最为简单，开发者使用到的机会也不多。“设置”是配置开发机运行程序时如何连接网络（见图1-12）。“动作”是指“刷新”“后退”“前进”等操作，主要在网页或界面调试时使用。“帮助”则是本Web开发者工具的版本与版权声明等信息。
图1-12 微信开发者工具-设置
2区“导航菜单”是开发者经常切换使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。下面重点介绍这两个功能。
1.3.2 编辑功能
我们先来看其中的“编辑”功能。点击“编辑”后出现的界面如图1-13所示。
图1-13 微信开发者工具-编辑
原来的3区部分就变成了项目的目录与文件列表区，4区部分则变成了对应所选文件的代码编辑区，我们也称之为代码编辑器。
微信开发者工具提供的代码编辑器，可以对当前项目对应文件进行编码工作，同时也可以对文件进行基本的添加、删除及重命名操作。
代码编辑器现在支持4种文件的编辑：wxml、wxss、js以及json文件。当然编辑器支持了较为完善的自动补全功能，大大方便了开发者。
代码编辑器还支持快捷键操作，而且快捷键功能与行为基本保持与其他编辑器一致。比如光标相关快捷键操作如下：
■ Ctrl+End：移动到文件结尾。
■ Ctrl+Home：移动到文件开头。
■ Ctrl+i：选中当前行。
■ Shift+End：选择从光标到行尾。
■ Shift+Home：选择从行首到光标处。
■ Ctrl+Shift+L：选中所有匹配。
■ Ctrl+D：选中匹配。
■ Ctrl+U：光标回退。
再比如，格式调整的快捷操作如下：
■ 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：在当前行上方插入一行。
快捷键可以说是程序开发者的至爱，编辑器也支持自定义快捷键。关于如何自定义快捷键，可参考下节“调试”功能中的“快捷键设置项”。
1.3.3 调试功能
我们再来看导航菜单区的“调试”功能，这是开发者检测代码结果实现与排查问题的核心工具，界面如图1-14所示。
图1-14 微信开发者工具-调试
我们看到，这时3区部分变成了“模拟器”，4区部分变与了调试工具与输出区。
模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现。
调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml，最右边的扩展菜单项是定制与控制开发工具钮“…”。下面我们一一进行简单介绍。
注意 本章节涉及的代码及含义，读者若不理解也不需要在意，在这里主要了解菜单的功能与操作。
Console页：控制台信息页，它有两个作用：
1）开发者直接在此输入代码并调试，如图1-15所示。
图1-15 Console页调试
2）显示小程序的错误输出，如图1-16所示。
图1-16 Console页输出错误提示
Sources页：源文件调试信息页，用于显示当前项目的脚本文件，如图1-17所示。
图1-17 Sources页
注意 因小程序框架会对脚本文件进行编译工作，在源文件页面中我们看到的文件其实是经过处理之后的脚本文件。所以我们编写的代码都被包含在define函数中。对于页面（page）的代码，则在打包脚本文件尾部，require函数会完成主动调用动作。
Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息，如图1-18所示。
图1-18 Network页
Storage页：数据存储信息页，用于显示当前项目使用存储API（wx.setStorage或wx.setStorageSync）接口的数据存储情况。比如，我们在Console中输入：wx.setStorag-e({key:"name", data:"Roeyxiong"})，则在Storage页面中就可以看到我们存储了一个Key-Value数据，如图1-19所示。
图1-19 Storage页
AppData页：用于调试显示当前小程序项目此时此刻的应用具体数据，实时地回显项目数据调整情况。即我们可在此处编辑修改数据，反馈到当前界面上去。比如，我们将“Hello World”这个字，改为“Hello WXApplet”，界面上马上就显示出相应的效果，如图1-20所示。
图1-20 AppData页
注意 这里的调试修改并不会保存到代码中。
Wxml页：用于帮助开发者调试wxml转化后的界面。通过这里的调试可以看到真实的页面结构及对应的wxss属性，同时可通过修改对应的wxss属性，在模拟器中即时查看修改后的情形。并且，可以通过调试区左上角的选择器
，快速地找到页面中组件所对应的wxml代码，如图1-21所示。
图1-21 Wxml页
例如，我们先点击①定位，在模拟器中选择定位点②，快速定位到wxml代码段③。然后我们可以在最右边的样式④中进行修改调配，并立即查看效果。
最右边的扩展菜单项——定制与控制开发工具钮“…”，主要包括开发工具的一些定制与设置，如“Show Console”（显示控制台页），“Search all files”（查找文件）,“Shotcuts”（快捷键自定义或配置），“Settings”（开发者工具的环境参数设定，包括喜好Preferences，工作区域Workspace、黑箱Blackboxing，支持模拟的手机设备型号Devices，网络带宽及时延限制Throttling等），“Help”（帮助）以及“More tools”（更多工具）。这些工具包括：Inspect devices（检测设备）、Network conditions（网络条件）、Rendering settings（渲染设定）、Sensors（重力传感器）。这里不展开叙述，如图1-22所示。
图1-22 微信开发者工具-定制化配置
1.3.4 项目功能
导航菜单区的“项目”功能，用来显示当前项目的细节，包括图标、AppID以及目录信息等。同时，提供了小程序发布功能（上传）与手机预览功能（预览）。
我们点击“预览”，开发者工具会将项目代码进行编译与构建，生成代码包上传到微信服务器，如图1-23所示。成功后会显示一个二维码，这样开发者就可以用手机微信扫描它，并在手机上看到小程序项目的真实表现。
图1-23 微信开发者工具-项目
1.3.5 运行小程序
1．调试预览
开发者可以在微信开发者工具中点击左侧导航“调试”功能，以便在模拟器中运行小程序，查看小程序运行效果。
2．手机预览
开发者也可以将小程序上传到微信小程序平台中，让用户或测试与开发人员通过手机微信客户端来扫码，以装载小程序，并在微信客户端环境下运行。
3．开发者手机预览
在开发者工具左侧菜单栏中选择“项目”，点击“预览”，扫码后即可在微信客户端中体验，如图1-24所示。
图1-24 预览小程序