這款前端可視化代碼執(zhí)行工具,打殘js執(zhí)行過程

今天給大家介紹一款可視化代碼執(zhí)行工具——Python Tutor ,其可以可視化的看Python、Java、C、C++、JavaScript 和 Ruby 的執(zhí)行過程，該功能這么強(qiáng)大，讓我們一起來使用一波，看看到底能學(xué)到啥。

一、工具頁面

整個頁面看起來是如此的樸素，包含三個區(qū)塊：代碼區(qū)塊、操作區(qū)塊、可視化區(qū)塊，三個區(qū)塊的功能如下所示：

1. 代碼區(qū)塊

   該部分主要負(fù)責(zé)編輯要執(zhí)行的代碼，特別注意，該工具不支持一些函數(shù)，例如：setTimeout、setInterval等，這部分確實(shí)是該平臺需要進(jìn)一步優(yōu)化的點(diǎn)。

2. 操作區(qū)塊

操作區(qū)塊主要負(fù)責(zé)代碼的移動，F(xiàn)irst按鈕將代碼運(yùn)行到開頭；Last按鈕將代碼運(yùn)行到末尾；Prev負(fù)責(zé)逐行將代碼移動到上一步；Next負(fù)責(zé)逐行將代碼移動到下一步。

1. 可視化區(qū)塊

可視化區(qū)塊用來展示執(zhí)行過程中的調(diào)用棧、相關(guān)變量以及對應(yīng)的變量值。

二、秒殺js關(guān)鍵技術(shù)點(diǎn)

在js中有很多晦澀難懂的關(guān)鍵技術(shù)點(diǎn)，例如變量對象、調(diào)用棧、代碼執(zhí)行過程等，下面用一段代碼，并通過該工具可以更加直觀的了解這些內(nèi)容，從而降低理解成本。

var?a?=?10;

function?f1()?{
??var?b?=?20;
??
??return?a?+?b;
}

function?f2(e)?{
??var?c?=?30;
??var?d?=?f1();
??function?f2Child()?{
??????return?d?*?2;
??}
??return?c?+?d?+?e?+?f2Child();
}

f2(15);

2.1 變量對象

變量對象是一個與執(zhí)行上下文相關(guān)的特殊對象，存儲著上下文中聲明的內(nèi)容。按照執(zhí)行上下文可劃分為全局上下文中的變量對象和函數(shù)上下文中的對象，當(dāng)執(zhí)行到函數(shù)f2時(shí)，其變量對象中的三部分均得到創(chuàng)建：

1. 創(chuàng)建arguments對象；
2. 檢查function函數(shù)聲明創(chuàng)建屬性；
3. 檢查變量聲明創(chuàng)建屬性。

詳細(xì)內(nèi)容可看前面的文章前端百題斬【011】——通俗易懂的變量對象

2.2 調(diào)用棧

當(dāng)JavaScript執(zhí)行全局代碼的時(shí)候，會創(chuàng)建全局執(zhí)行執(zhí)行上下文（整個頁面的生存周期內(nèi)，全局執(zhí)行上下文只有一份）；在調(diào)用一個函數(shù)的時(shí)候會創(chuàng)建該函數(shù)的執(zhí)行上下文（執(zhí)行環(huán)境）。將多個執(zhí)行上下文管理起來的就是調(diào)用棧（調(diào)用棧就是用來管理函數(shù)調(diào)用關(guān)系的一種數(shù)據(jù)結(jié)構(gòu)）,當(dāng)函數(shù)運(yùn)行到f2Child這個函數(shù)的時(shí)候，其調(diào)用棧是什么樣子的呢？用該工具可以很好的進(jìn)行展示。

2.3 代碼執(zhí)行過程

通過點(diǎn)擊操作區(qū)塊的按鈕可看到可視化區(qū)域中的調(diào)用棧和變量對象在不斷變化，從而可以清晰了解整個代碼執(zhí)行過程。

這個工具雖然還有很多函數(shù)不支持，但是仍然不能阻擋其的優(yōu)點(diǎn)，歡迎各位老鐵實(shí)操使用。