建站
咨詢
售后
建站咨詢
新聞中心
一、工具頁(yè)面
1.代碼區(qū)塊
該部分主要負(fù)責(zé)編輯要執(zhí)行的代碼，特別注意，該工具不支持一些函數(shù)，例如：setTimeout、setInterval等，這部分確實(shí)是該平臺(tái)需要進(jìn)一步優(yōu)化的點(diǎn)。
創(chuàng)新互聯(lián)建站專注于瀘州企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開(kāi)發(fā)。瀘州網(wǎng)站建設(shè)公司,為瀘州等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開(kāi)發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
2.操作區(qū)塊
操作區(qū)塊主要負(fù)責(zé)代碼的移動(dòng)，F(xiàn)irst按鈕將代碼運(yùn)行到開(kāi)頭;Last按鈕將代碼運(yùn)行到末尾;Prev負(fù)責(zé)逐行將代碼移動(dòng)到上一步;Next負(fù)責(zé)逐行將代碼移動(dòng)到下一步。
3.可視化區(qū)塊
可視化區(qū)塊用來(lái)展示執(zhí)行過(guò)程中的調(diào)用棧、相關(guān)變量以及對(duì)應(yīng)的變量值。
image-20220504090946788.png
二、秒殺js關(guān)鍵技術(shù)點(diǎn)在
js中有很多晦澀難懂的關(guān)鍵技術(shù)點(diǎn)，例如變量對(duì)象、調(diào)用棧、代碼執(zhí)行過(guò)程等，下面用一段代碼，并通過(guò)該工具可以更加直觀的了解這些內(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);
1.變量對(duì)象
變量對(duì)象是一個(gè)與執(zhí)行上下文相關(guān)的特殊對(duì)象，存儲(chǔ)著上下文中聲明的內(nèi)容。按照?qǐng)?zhí)行上下文可劃分為全局上下文中的變量對(duì)象和函數(shù)上下文中的對(duì)象，當(dāng)執(zhí)行到函數(shù)f2時(shí)，其變量對(duì)象中的三部分均得到創(chuàng)建：
- 創(chuàng)建arguments對(duì)象;
- 檢查function函數(shù)聲明創(chuàng)建屬性;
- 檢查變量聲明創(chuàng)建屬性。
2.調(diào)用棧
當(dāng)JavaScript執(zhí)行全局代碼的時(shí)候，會(huì)創(chuàng)建全局執(zhí)行執(zhí)行上下文(整個(gè)頁(yè)面的生存周期內(nèi)，全局執(zhí)行上下文只有一份);在調(diào)用一個(gè)函數(shù)的時(shí)候會(huì)創(chuàng)建該函數(shù)的執(zhí)行上下文(執(zhí)行環(huán)境)。將多個(gè)執(zhí)行上下文管理起來(lái)的就是調(diào)用棧(調(diào)用棧就是用來(lái)管理函數(shù)調(diào)用關(guān)系的一種數(shù)據(jù)結(jié)構(gòu)),當(dāng)函數(shù)運(yùn)行到f2Child這個(gè)函數(shù)的時(shí)候，其調(diào)用棧是什么樣子的呢?用該工具可以很好的進(jìn)行展示。
3.代碼執(zhí)行過(guò)程
通過(guò)點(diǎn)擊操作區(qū)塊的按鈕可看到可視化區(qū)域中的調(diào)用棧和變量對(duì)象在不斷變化，從而可以清晰了解整個(gè)代碼執(zhí)行過(guò)程。
可視化工具.gif
本文標(biāo)題：這款前端可視化代碼執(zhí)行工具，打殘Js執(zhí)行過(guò)程
網(wǎng)站路徑：http://m.5511xx.com/article/cdphgce.html
