微信开发者工具IDE主界面、调试工具介绍

参考了微信官方文档。
过去0前端基础的我如果能提前看到这篇文章，应该会少走很多弯路。
文档中的截图来自项目：“黄蔷的记事本第一季”，以下简称“此项目”。

工具栏介绍

IDE界面最上面一行是工具栏，在此项目中主要用到的工具有模拟器、编辑器、调试器、云开发、编译预览。单击后即可显示/隐藏对应的模块，现在依次介绍各部分功能。

模拟器介绍

模拟器可以显示当前代码对应的预览界面，并能够模拟用户在其上进行点击、拖动、跳转界面。前端框架效果可以非常直观地反映在模拟器界面。

编辑器介绍

## 文本编辑
文本编辑器，支持多栏对比显示，具有相对完善的代码匹配提示的功能。有一定的错误纠正提示（图中bar后的大括号下有红色波浪线），鼠标移动到上面会有错误原因显示。
但是有一些地方不够“完美”，比如引号中的“{{}}”还有部分属性的配置。
经常command+S保存是个好习惯（虽然保存就会自动重新编译，有时要1s左右）。

目录显示

目录可以快速定位到特定文件。简单介绍一下各个文件的主要作用：
.js一般用于内部逻辑，主要是node.js的语法，兼容一些微信的SDK接口；wxss用于模板设计,主要是CSS语法规则；wxml介于两者之间，一方面会调用一些.js中的一些函数，另一方面主要用于位置排版，并调用wxss中给出的模型。.json文件此项目中没有用到

调试器在这里插入图片描述

调试器功能很多，用好了可以非常方便地调试界面。下面逐个介绍此项目中常用的一些功能。

Console

Console作为主要的输出框，能够显示一些运行时的警告，以及使用console.log(“变量名称”)进行实时输出，调试时作用很大。
如下图是一个抛出的错误，编译器告知了错误原因（randomNum未定义）,在错误的第一个链接处我们能发现错误的文件是newPublish.js，且该错误在66行。

Network

Network模块可以监视与数据库的交互，能够具体地显示数据的交互过程。可以作为检视数据库调用的一个工具。

不起眼但是用起来很方便的两个小按钮

检视元素对应的wxml/wxss代码

单击该按钮后再点击调试器界面中的某个模块，会在调试器中显示对应模块的代码：
可以在下面文档中进行快速的调试，比如多次修改width直到满意，或者点掉前面的勾相当于快速注释对应行。这边可以非常快地进行样式的调整，直到觉得满意再将代码复制进文本编辑器保存，这样可以调整文字、边框大小、位置的时候比较方便。
（注：一般都用rpx或者百分比来显示，比较容易兼容不同横纵比例的不同机型。）

清空Console栏

这个在交通标志牌中应用广泛的标志在这里表示的是清空Console中的内容。对于为了检视特定输出的时候是比较方便的。个人经常用。

云开发

云开发部分默认是另外一个窗口，此项目主要用到其中的“数据库”内容。之后会补充云开发窗口相关的具体内容。