影響函數(shù)執(zhí)行

大家能看出來(lái)上面的代碼為什么輸出的是17嗎？按照正常的輸出應(yīng)該是7才對(duì)呀！如果你對(duì)此有疑惑，說(shuō)明你在平時(shí)調(diào)試代碼的時(shí)候已經(jīng)浪費(fèi)了很多時(shí)間了哦。

今天就帶大家來(lái)探索一下開(kāi)發(fā)者工具中源代碼的使用，這里提供了非常方便并且有用的功能。

大家可以借助它的一些神奇的能力，來(lái)解決那些困擾我們的問(wèn)題，希望你能夠掌握并熟練的使用它們，下面就讓我們來(lái)一起看看它的魅力吧！

不愧是你

概要說(shuō)明

源代碼面板從視覺(jué)效果上分為三個(gè)區(qū)域：菜單區(qū)、內(nèi)容區(qū)、監(jiān)聽(tīng)區(qū)。

源代碼界面

其中菜單區(qū)有五個(gè)子分類：

菜單分類

內(nèi)容區(qū)是用來(lái)展示各個(gè)文件的內(nèi)容，以便進(jìn)行打斷點(diǎn)等操作，可以對(duì)代碼進(jìn)行格式化。

監(jiān)聽(tīng)區(qū)主要是供我們操作和查看斷點(diǎn)的執(zhí)行，以及監(jiān)聽(tīng)我們?cè)O(shè)置的事件觸發(fā)，一般包括了以下10個(gè)方面：

監(jiān)聽(tīng)區(qū)內(nèi)容

下面將對(duì)這些內(nèi)容一一進(jìn)行詳細(xì)的講解，我會(huì)通過(guò)示例的方式給大家進(jìn)行演示。

內(nèi)容區(qū)

由于內(nèi)容區(qū)與另外兩個(gè)有關(guān)聯(lián)，是它們操作的基礎(chǔ)，因此先介紹一下這塊。

大家一看就知道是用來(lái)展示內(nèi)容的，像一些js、html、css等各種各樣的文件，包括圖片也可以在這里顯示，主要是用來(lái)查看和調(diào)試我們的代碼。

可以在想要的位置打上斷點(diǎn)，只需要單擊該行代碼左側(cè)的行號(hào)處即可：

打上斷點(diǎn)

先做一個(gè)簡(jiǎn)單的介紹，更詳細(xì)的內(nèi)容，我們會(huì)在接下來(lái)的講解中穿插說(shuō)明。

網(wǎng)頁(yè)(Page)

在這里通過(guò)目錄結(jié)構(gòu)的方式，清晰的展示出當(dāng)前頁(yè)面包含的所有文件，請(qǐng)看下面：

source源代碼 我就是我

在瀏覽器中呈現(xiàn)的效果為：

頁(yè)面呈現(xiàn)

我們看下這些文件的層級(jí)：

文件層級(jí)

通過(guò)清晰的結(jié)構(gòu)，我們能夠很容易找出相應(yīng)的文件，并了解它們之間的關(guān)系，點(diǎn)擊其中的某個(gè)文件，就可以查看它的內(nèi)容了。

文件系統(tǒng)(Filesystem)

主要是用來(lái)跟本地的文件進(jìn)行關(guān)聯(lián)，可以把這里想象成是一個(gè)編輯器，比如vscode，相當(dāng)于是用vscode打開(kāi)了一個(gè)項(xiàng)目文件夾一樣，你可以用這里的文件系統(tǒng)來(lái)打開(kāi)你的某個(gè)文件夾，之后你就可以操作里面的文件，做任意的編輯，保存之后就會(huì)直接修改磁盤上的文件，就好像是在vscode里面操作一樣。

我的項(xiàng)目文件放在code文件夾下面，里面有兩個(gè)文件，如下圖：

js代碼

我在文件系統(tǒng)添加這個(gè)文件夾：(選擇完畢之后別忘了在頁(yè)面上的彈出選項(xiàng)中點(diǎn)擊允許，下同)

引入文件夾

這個(gè)時(shí)候我們?cè)谶@里的內(nèi)容區(qū)修改9.js文件中的name為wang，age為22，return返回m + n + 1。

修改內(nèi)容

發(fā)現(xiàn)文件出現(xiàn)了小星星標(biāo)識(shí)，這時(shí)ctrl + s保存一下，就會(huì)看到文件也跟著變更了。

文件變化

細(xì)心的小伙伴可能在上面已經(jīng)看到9.js文件圖標(biāo)的右下角有一個(gè)小圓點(diǎn)，這表示該文件與當(dāng)前頁(yè)面有關(guān)聯(lián)，此時(shí)這種類型的文件，我們可以直接在網(wǎng)頁(yè)(Page)里面修改也是可以的。這里不再做演示了。

替換(Overrides)

當(dāng)我們想在頁(yè)面上面直接修改代碼進(jìn)行調(diào)試的時(shí)候，但是又不想保存到本地磁盤上面直接修改本地文件，那么可以使用替換功能，將當(dāng)前修改的文件副本臨時(shí)保存到一個(gè)我們指定的文件夾中，用這個(gè)文件來(lái)替換當(dāng)前頁(yè)面中的文件，以達(dá)到實(shí)時(shí)調(diào)試的效果。

首先我們?cè)趧偛诺捻?xiàng)目路徑下面新建一個(gè)replace文件夾，用來(lái)存放這些臨時(shí)用來(lái)替換的文件。

存放替換的文件夾

然后我們把這個(gè)replace作為選擇放置替換項(xiàng)的文件夾。

選擇替換文件夾

現(xiàn)在我們?nèi)サ骄W(wǎng)頁(yè)(page)中修改9.js，把return的m + n + 1改成m + n + 5，按ctrl + s保存之后，會(huì)發(fā)現(xiàn)replace發(fā)生了變化。

生成替換文件

同時(shí)輸出值也發(fā)生了實(shí)時(shí)的改變。

影響結(jié)果

而且本地源文件是沒(méi)有變化的。

源文件不變

利用這個(gè)功能，我們就可以在頁(yè)面上調(diào)試的時(shí)候，能夠直接修改文件內(nèi)容，并看到相應(yīng)的結(jié)果，而不會(huì)去影響到源文件的代碼。

內(nèi)容腳本(Content scripts)

主要針對(duì)擴(kuò)展程序，比如vue插件等，大家有興趣的可以去了解一下，因?yàn)檫@里不屬于本項(xiàng)目的內(nèi)容，因此不做過(guò)多講解。

代碼段(Snippets)

可以把這個(gè)理解成是一個(gè)可執(zhí)行代碼的文件在當(dāng)前作用域中生效，需要注意的是，這塊的代碼段不但可以在正常情況下執(zhí)行，也可以在斷點(diǎn)調(diào)試的時(shí)候執(zhí)行，天然具有當(dāng)前的作用域上下文。

比如我們想要獲取頁(yè)面中的所有input。

頁(yè)面元素

那么首先新建一個(gè)代碼段，命名為“頁(yè)面中所有input”，并編寫文件的內(nèi)容。

獲取所有input

然后我們?cè)谧髠?cè)的這個(gè)代碼段名稱上面右鍵，選擇運(yùn)行，接下來(lái)去控制臺(tái)輸出allInput這個(gè)變量，看看會(huì)出現(xiàn)什么。

輸出獲取的input

很神奇有沒(méi)有？我們發(fā)現(xiàn)當(dāng)前作用域下，該變量是完全可用的。

接下來(lái)我們?cè)囍{(diào)試一下文章開(kāi)始的那段代碼。

初始代碼

然后我們?cè)陧?yè)面的return處打上斷點(diǎn)，刷新頁(yè)面重新加載一下。

斷點(diǎn)

可以看到m的值為3，n的值為4，這時(shí)我們?nèi)ゴa段里面新建一個(gè)“修改add返回值”的代碼段，讓m為10，n為7，保存之后運(yùn)行一下。

新建代碼段

我們把鼠標(biāo)放上去看看有什么變化？

m和n被修改

可以發(fā)現(xiàn)，m和n的值已經(jīng)都被改變了，其實(shí)我們?cè)侔聪翭10，斷點(diǎn)會(huì)原地再走一次，看下效果。

m和n被修改

這下是不是更清晰了，現(xiàn)在我們把斷點(diǎn)放過(guò)去，來(lái)看一下控制臺(tái)的輸出。

輸出值

結(jié)果已經(jīng)受到了影響，跟我們開(kāi)頭的那個(gè)結(jié)果一模一樣，大家現(xiàn)在是不是完全就明白了呢。

這個(gè)時(shí)候，我們?cè)诳刂婆_(tái)輸出一下m和n，看看會(huì)發(fā)生什么。

輸出m和n

發(fā)現(xiàn)這兩個(gè)變量已經(jīng)完全不存在了，這是因?yàn)楫?dāng)時(shí)執(zhí)行代碼段時(shí)的上下文已經(jīng)不存在了，作用域已經(jīng)被銷毀。

因此我們可以利用代碼段的這個(gè)特性，去做很多好玩的事情。

如果你對(duì)此感興趣，那就讓我來(lái)繼續(xù)為你介紹其他的功能。

頂部操作區(qū)

這里包含了我們調(diào)試的時(shí)候的所有操作，對(duì)于我們?cè)诖驍嗟臅r(shí)候會(huì)經(jīng)常用到。

調(diào)試按鈕

相信大家對(duì)這些按鈕已經(jīng)非常熟悉，這里只做個(gè)簡(jiǎn)單的說(shuō)明。

異常暫停

監(jiān)視

可以監(jiān)測(cè)當(dāng)前執(zhí)行環(huán)境的作用域鏈上面的所有變量或表達(dá)式，比如求最大差值的一個(gè)函數(shù).

最大差值

我們可以監(jiān)視任意合法的表達(dá)式，甚至可以進(jìn)行賦值。

監(jiān)視表達(dá)式

代碼的原本執(zhí)行結(jié)果應(yīng)該是13，但是我們把min重新賦值之后，結(jié)果被改變了。

14-13

而且放開(kāi)斷點(diǎn)之后，賦值語(yǔ)句會(huì)把原本屬于局部變量的min，變?yōu)槿肿兞俊?/p>

min變?yōu)槿肿兞?/p>

斷點(diǎn)(Breakpoints)

會(huì)顯示出斷點(diǎn)所在的行數(shù)與該行的內(nèi)容，單擊某一個(gè)斷點(diǎn)會(huì)跳轉(zhuǎn)到相應(yīng)位置。

斷點(diǎn)

并且可以通過(guò)右鍵進(jìn)行一些其他的操作。

操作

作用域(Scope)

會(huì)展示出當(dāng)前斷點(diǎn)位置的作用域鏈上的所有變量。

作用域

如果是函數(shù)的話，會(huì)有本地變量，表示的是當(dāng)前函數(shù)體內(nèi)存在的變量。

腳本指的是可以訪問(wèn)的腳本中的變量，也包括其他腳本，比如上面的k、m、t就是我在另一個(gè)引入的js文件中定義的變量，不過(guò)如果引入的腳本在當(dāng)前斷點(diǎn)之后執(zhí)行，那么這里就訪問(wèn)不到那些變量，也就不會(huì)在這里顯示。

全局指的是掛在window下面的變量，由于我們聲明的變量都是使用的let，因此不會(huì)變?yōu)閣indow的屬性，因此只屬于腳本。如果將average用var來(lái)聲明，那么就會(huì)在全局里面顯示。

而且如果增加閉包的話，情況會(huì)有一些變化。

增加閉包

我們發(fā)現(xiàn)多了一個(gè)閉包的變量區(qū)域，而且里面只有max，你可能會(huì)疑惑，上面的min變量也聲明了呀，而且也已經(jīng)賦值過(guò)了，為什么不顯示呢？是因?yàn)閙in變量在閉包函數(shù)里面沒(méi)有用到，在生成閉包環(huán)境時(shí)沒(méi)有將min添加進(jìn)去，因此當(dāng)前作用域無(wú)法取得min的引用，請(qǐng)看此時(shí)控制臺(tái)輸出。

min不存在

是不是這下就看明白了呢？通過(guò)這里我們對(duì)當(dāng)前執(zhí)行的代碼作用域一目了然。

調(diào)用堆棧(Call Stack)

會(huì)展示出當(dāng)前代碼是在哪里調(diào)用的，如果有更高層的調(diào)用者，那么會(huì)一直展示，這樣有利于我們快速找到業(yè)務(wù)中初始的調(diào)用位置。

我們來(lái)構(gòu)造一個(gè)案例，看看它的效果。

調(diào)用堆棧

XHR/提取斷點(diǎn)(XHR/fetch Breakpoints)

可以根據(jù)設(shè)置的標(biāo)識(shí)，在發(fā)起請(qǐng)求的時(shí)候，如果某個(gè)請(qǐng)求地址包含該標(biāo)識(shí)，那么就會(huì)在該請(qǐng)求發(fā)起是自動(dòng)進(jìn)入斷點(diǎn)。

注意這里只能是XHR或者fetch形式發(fā)起的請(qǐng)求才會(huì)有作用。如果是js或者css等類型，即使設(shè)置了也不會(huì)有效果。也可以不設(shè)置條件，來(lái)給所有請(qǐng)求執(zhí)行斷點(diǎn)。

假設(shè)我們有如下代碼：

//9.jsvar xhr = new XMLHttpRequest();xhr.open(“GET”, “8.json”);xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); }};xhr.send();//8.json{ “name”: “liu”, “sex”: 0, “age”: 15}

我們?cè)O(shè)置過(guò)濾條件為網(wǎng)址包含8.json

請(qǐng)求攔截

那么在加載頁(yè)面的時(shí)候，包含這個(gè)標(biāo)識(shí)的請(qǐng)求就會(huì)自動(dòng)在發(fā)起的地方執(zhí)行斷點(diǎn)。

執(zhí)行斷點(diǎn)

如果不想添加標(biāo)識(shí)去攔截所有請(qǐng)求，那么在點(diǎn)擊添加之后，直接單擊空白處即可。

DOM斷點(diǎn)(DOM Breakpoints)

可以給DOM元素設(shè)置相應(yīng)的斷點(diǎn)條件，當(dāng)觸發(fā)該條件時(shí)會(huì)自動(dòng)在代碼執(zhí)行的地方中斷。

假設(shè)我們有如下代碼：

//9.html 我就是我 //9.jsdocument.getElementById(“btn”).addEventListener(“click”, function (e) { document .getElementById(“p”) .classList .add(“active”); });

當(dāng)我們給頁(yè)面中的id為p的元素添加屬性修改斷點(diǎn)時(shí)：

元素?cái)帱c(diǎn)

我們看到面板中已經(jīng)顯示：

DOM斷點(diǎn)

這時(shí)我們單擊按鈕，觸發(fā)修改屬性行為。

觸發(fā)斷點(diǎn)

我們發(fā)現(xiàn)代碼已經(jīng)在第8行暫停執(zhí)行了。

全局監(jiān)聽(tīng)器(Global Listeners)

當(dāng)我們?cè)O(shè)置一些全局事件的時(shí)候，會(huì)在該處顯示，用于快速定位，哪里用到了全局的事件監(jiān)聽(tīng)?？梢赃M(jìn)行暫時(shí)的移除操作。

假設(shè)我們有以下代碼：

//9.jswindow.onerror = function (e) { console.log(e);};window.onfocus = function (e) { console.log(e);};window.onload = function (e) { console.log(e);};

那么我們將看到：

全局事件

事件監(jiān)聽(tīng)器斷點(diǎn)(Event Listener Breakpoints)

當(dāng)某塊代碼觸發(fā)了一些事件的時(shí)候，那么就會(huì)自動(dòng)在該代碼處執(zhí)行斷點(diǎn)，由于這塊內(nèi)容比較多，因此只舉兩個(gè)例子來(lái)供大家參考，其他的情況類似。

事件斷點(diǎn)

① 節(jié)點(diǎn)插入事件，假如我們有如下代碼：

//9.jsdocument.getElementById(“btn”).addEventListener(“click”, function (e) { let d = document.createElement(‘p’) d.id = “myDiv” d.innerHTML = “新的p” document.body.appendChild(d) });document.addEventListener(“DOMNodeInserted”, function (e) { console.log(e); });

我們勾選上插入DOM節(jié)點(diǎn)的事件監(jiān)聽(tīng)。

選擇事件

那么當(dāng)我們點(diǎn)擊按鈕時(shí)，就會(huì)觸發(fā)事件監(jiān)聽(tīng)斷點(diǎn)，在執(zhí)行代碼的地方執(zhí)行斷點(diǎn)。

執(zhí)行斷點(diǎn)

② 復(fù)制事件，假如我們有如下代碼：

//9.jsdocument.addEventListener(“copy”, function (e) { console.log(e); });

我們勾選上copy操作的事件監(jiān)聽(tīng)。

復(fù)制事件

那么當(dāng)我們?cè)陧?yè)面中復(fù)制時(shí)，就會(huì)觸發(fā)事件監(jiān)聽(tīng)斷點(diǎn)，在執(zhí)行代碼的地方執(zhí)行斷點(diǎn)。

執(zhí)行斷點(diǎn)

CSP違規(guī)斷點(diǎn)(CSP Violation Breakpoints)

如果服務(wù)端實(shí)現(xiàn)并設(shè)置了CSP的話，并且瀏覽器也支持該機(jī)制，那么會(huì)在執(zhí)行一些不符合該策略的代碼時(shí)，直接中斷。

我們先在頁(yè)面中使用meta的方式來(lái)模擬一下，以觸發(fā)該策略。

比如我們有以下代碼：

source源代碼 我就是我 //9.jseval(“{}”)let func = new Function()setTimeout(function() { console.log(1)})

我們會(huì)看到控制臺(tái)報(bào)如下錯(cuò)誤：

報(bào)錯(cuò)

我們可以看到文件內(nèi)部的style與script報(bào)出了錯(cuò)誤，js中的eval也報(bào)出了錯(cuò)誤，其實(shí)下面的new Function和setTimeout也是違反策略的，只不過(guò)eval報(bào)出的錯(cuò)誤中斷了代碼的執(zhí)行。

總結(jié)

到此為止，關(guān)于開(kāi)發(fā)者工具中源代碼的功能已經(jīng)基本全部講解完畢，我們平時(shí)開(kāi)發(fā)中離不開(kāi)它，那就要好好的去了解它，充分的去使用它并發(fā)揮它的作用。

熟練的使用這些工具是我們需要掌握的技能，希望我能夠給你一些幫助！

謝謝