一：让凌乱的代码整齐好看紧凑
在咱们开发微信小程序或者看别人的代码，有时感觉很凌乱，可能让自己多费时间和精力去弄懂，怎么办？Android studio和eclipse工具都有格式化的工具，那么微信web开发者工具有此功能么，当然，下面就来试试吧！
先上一张处理前的代码图：
第一步：在右边的代码界面中右键单击(左边要在“编辑”tab)，在出现的菜单中选择“格式化代码”,如下图所示:
格式化的效果下:
看到上图的变化很大吧
第二步：还在最右边界面内单击右键，在弹出的菜单中选择“命令面板”(或者快捷键F2)，如下图所示：
第三步：选择命令面板的菜单“查看 切换自行换行”;
第四步: 选择命令面板的菜单“裁剪尾随空格”;
如下图所示：
最终效果如下：
格式化的代码查看起来整齐紧凑！！！
二：单步调试和变量查看
在微信小程序开始学习与开发的过程中，总有一些东西，想看看它跑起来的内容与我们编程时想的是否一致，于是就想到了能不能单步调试或者打出一些我们想要的变量的内容，以便我们做进一步的开发和调整，现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。
第一步：打断点，我们必须在我们想要它停下来的地方打上调试断点，点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab，在Sources页中点开”Top”根节点，层层打开，找到自己想要调试的js文件，一般是打那种.js后面带[sm]，如index.js[sm]，非index.js，当然这里之后想修改内容不能在”调试”模式下修改，而要转到”编辑”模式，之前我老容易犯这个错误，打开index.js[sm]文件后，点击左边的行上的数字，就会由灰色背景变成蓝色背景，这样断点就打好了，(如果不想要了，也可以点击就会取消)如下图所示:
第二步：运行，首先点击编译上面的那个运行小图标(或者快捷键ctrl+b)，然后操作到你想要的那个界面或者触发某个动作，程序自动会跑到断点处代码，如下图所示:
第三步：单步调试，按调试器窗口(debugger)的向下箭头
(step into nextfunction call)，一步步的可以往下调试，如果想跳到下一个断点，就按调试器窗口的类似于播放的小按钮
,英文叫resume script execution，快捷键为F8或者Ctrl+,如下图所示
如果想看调试中变量的运行值怎么办？有许多办法，这里以查看上个界面传来的options变量值为例
办法1：让鼠标指针放在变量上，他会有提示框，框内就是变量值，如下图所示
办法2：使用console.log(options);打印出来，在console窗口可以查看，如下图所示
方法3：在调试器窗口，点开Scope标签，然后再点开相应变量,如下图所示
如果我们的断点过多或者不想它们调试了，怎么让它们失效呢？
办法就是点击调试器窗口中的图标
，英文叫deactive breakpoints(或者快捷键:Ctrl+F8)
