前言
小程序的开发过程中，【调试器】至关重要，不仅可以为我们锁定项目中出现的bug问题，还能更加有效地帮我们进行问题分析和数据排查。下面就为大家介绍一下“调试器”中各个栏目的作用吧
image.png
下面简单地为大家介绍经常使用的栏目以及在什么情景下使用这些东西，能帮助我们更快地调试项目。
【Console】控住台语句输出：
配合在项目文件中写入如下代码（如在index.js中的onLoad方法中写入如下语句）
onLoad: function () {
console.log("页面启动");
},
项目运行时，在对应的页面中，会显示此条语句
image.png
【Sources】项目调试断点：
在项目文件中打入断点，项目则会卡在此断点处，用于观察断点处的数据和调试（如在index.js文件中我们定义一个testData，然后在代码左侧打入蓝色的小断）
image.png
接着编译项目运行，你会发现项目卡在此代码片段了，将鼠标移动至“testData”处，则能显示“testData”的内容
image.png
【Network】检测网络请求情况
后文中结合网络请求来看（本文不做过多介绍,之后结合项目来使用）
【AppData】查看各个页面中的数据绑定情况
能具体查看各个页面中的数据绑定（例如下）
image.png
图中代表在pages的index目录下的index页面中，绑定了一个名为“motto”的数据、“userInfo”的数据、“hasUserInfo”的数据、“canIUse”的数据
【Storage】项目缓存
用于查看项目中的缓存数据（在index.js中写入一个名为“testData”的数据）
onLoad: function () {
console.log("页面启动");
var testData = {
name : "姓名",
age : 13 ,
class : "初一年级"
};
console.log("打印testData为" + testData);
wx.setStorageSync("testData", testData);
项目编译运行，查看Storage
image.png
【Wxml】实时查看页面的布局情况
可以方便地看清楚页面上的布局（大小、位置等情况），便于我们查找补漏。
image.png
ps:
在之后的小节中，会结合项目为大家介绍这些栏目的用法，本节中即使看不大懂也没关系，提前了解下也行。
下一节：
网友评论