这款前端可视化代码执行工具，打残js执行过程

一、工具页面

整个页面看起来是如此的朴素 包含三个区块 代码区块、操作区块、可视化区块 三个区块的功能如下所示

代码区块

该部分主要负责编辑要执行的代码 特别注意 该工具不支持一些函数 例如 setTimeout、setInterval等 这部分确实是该平台需要进一步优化的点。

操作区块

操作区块主要负责代码的移动 First按钮将代码运行到开头 Last按钮将代码运行到末尾 Prev负责逐行将代码移动到上一步 Next负责逐行将代码移动到下一步。

可视化区块

可视化区块用来展示执行过程中的调用栈、相关变量以及对应的变量值。

二、秒杀js关键技术点

在js中有很多晦涩难懂的关键技术点 例如变量对象、调用栈、代码执行过程等 下面用一段代码 并通过该工具可以更加直观的了解这些内容 从而降低理解成本。

var a 10;

function f1() {

 var b 20;

 return a 

function f2(e) {

 var c 30;

 var d f1();

 function f2Child() {

 return d * 2;

 return c d e f2Child();

f2(15);

2.1 变量对象

变量对象是一个与执行上下文相关的特殊对象 存储着上下文中声明的内容。按照执行上下文可划分为全局上下文中的变量对象和函数上下文中的对象 当执行到函数f2时 其变量对象中的三部分均得到创建

创建arguments对象 检查function函数声明创建属性 检查变量声明创建属性。

详细内容可看前面的文章前端百题斩【011】——通俗易懂的变量对象

2.2 调用栈

当JavaScript执行全局代码的时候 会创建全局执行执行上下文 整个页面的生存周期内 全局执行上下文只有一份 在调用一个函数的时候会创建该函数的执行上下文 执行环境 。将多个执行上下文管理起来的就是调用栈 调用栈就是用来管理函数调用关系的一种数据结构 ,当函数运行到f2Child这个函数的时候 其调用栈是什么样子的呢 用该工具可以很好的进行展示。

2.3 代码执行过程

通过点击操作区块的按钮可看到可视化区域中的调用栈和变量对象在不断变化 从而可以清晰了解整个代码执行过程。

这个工具虽然还有很多函数不支持 但是仍然不能阻挡其的优点 欢迎各位老铁实操使用。

前端通过range制作的rgba配色小工具 制作一个针对视觉的产品，快速调出想要的颜色，然后写在给前端程序员的文档里，方便前端程序员进行页面的配色处理[滑稽]
前端工程化中重要概念之CSS预处理工具 在前端开发中，CSS预处理工具是必不可少的工具之一。它可以帮助我们编写更加规范、易维护、易扩展的CSS代码，从而提高前端开发效率和质量。下面介绍一些在前端工程化中常用的CSS预处理工具及其作用：
前端开发必备的7个工具 前端开发需要使用一些工具来提高效率和质量，但是选择哪些工具可以有很多选择。在这篇文章中，我们将介绍前端开发中必备的7个工具，它们将使你的开发体验更加高效和愉悦。
2023年了，来试试前端格式化工具 eslint 使用eslint的生态链来规范开发者对js/ts基本语法的规范。防止团队的成员乱写. 这里主要使用到的eslint的包有以下几个： 使用的以下语句来按照依赖： 接下来需要对eslint的
一个简易的前端业务工具库【tj-jstools】 前端业务工具库：使用TypeScript编写有关js数据类型、浏览器信息、浏览器存储、url、字符串、数值、数组、对象等相关操作，让业务逻辑简单化。