1.工具页面整个页面看起来好简单，包括三个块：代码块，操作块，可视化块，三个区域的功能block如下：1.代码块这部分主要负责编辑要执行的代码，特别注意本工具不支持部分功能，如：setTimeout，setInterval等。这部分确实是重点平台有待进一步优化。2.操作块操作块主要负责代码的移动。First按钮将代码运行到开头；Last按钮将代码运行到最后；Prev负责将代码逐行移动到上一步；Next负责将代码逐行移动到下一步。3.可视化块可视化块用于显示执行过程中的调用堆栈、相关变量和对应的变量值。image-20220504090946788.png二、秒杀js的关键技术点js中有很多晦涩难懂的关键技术点，比如变量对象、调用栈、代码执行过程等，下面是一段代码，通过这个工具，可以更直观的理解这些内容，降低理解成本。vara=10;functionf1(){varb=20;返回a+b；}functionf2(e){varc=30;vard=f1();函数f2Child(){返回d*2;返回c+d+e+f2Child();}f2(15);1.变量对象变量对象是与执行上下文相关的特殊对象，它存储了在上下文中声明的内容。根据执行上下文，可以分为全局上下文中的变量对象和函数上下文中的对象。当函数f2被执行时，变量对象的三个部分被创建：createargumentsobject；检查函数函数声明创建属性；检查变量声明创建属性。2、调用栈JavaScript在执行全局代码时，会创建一个全局执行执行上下文（全局执行上下文在整个页面的生命周期中只有一份）；调用函数时，会创建函数的执行上下文（executionenvironment）。管理多个执行上下文的是调用栈（调用栈是一种用来管理函数调用关系的数据结构）。当函数运行到函数f2Child时，调用栈是什么样子的？使用这个工具可以很好的展示。3.代码执行过程点击操作块中的按钮，可以看到可视化区域中的调用栈和变量对象在不断变化，让您清楚地了解整个代码执行过程。展示台.gif
