3.3.4.1 调试JS
下面以调试“13.3 实战案例：Hello World”一节中的输入框值改变事件为例，介绍调试JS代码的方法。
1、在JS代码中加“debugger;”语句
打开主页的JS文件，找到输入框值改变事件onInputValuechange，在第一行添加debugger;语句，保存文件，代码如下：
onInputValuechange(event/*{{{*/=this._e.input_valuechange/*}}}*/){
debugger;
let hi = "Hello：" + event.value;
this.comp("tableData").setValue("fshuchu", hi);
}
2、在Chrome浏览器中打开（或刷新）页面
单击制作台中的“预览”按钮，打开预览页面。如果之前已经打开了预览页面，需要重新刷新这个页面，保证浏览器中运行的页面是最新修改后的。
3、在Chrome浏览器中，打开“开发者工具”
在Chrome浏览器中，可以通过F12或菜单，打开“开发者工具”。如图14-11所示。
图14-11 Chrome打开“开发者工具”
Chrome的“开发者工具”可以显示在右边，如图14-12所示、下边或作为独立窗口显示。
图14-12 Chrome的“开发者工具”
4、操作页面，触发代码执行到debugger;语句，进入调试阶段
在输入框中输入“小目标”，用鼠标在页面中间的空白处单击，就会触发这个输入框的值改变事件onInputValuechange，执行到其中的debugger;语句，就进入了调试模式，如图14-13所示。可以进行单步调试、查看变量值、查看调用堆栈等调试工作。
图14-13 进入调试
参考“第20章Chorme开发者工具使用说明”，对JS代码进行跟踪调试。