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

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

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

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

不愧是你

概要說明

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

源代碼界面

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

菜單分類

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

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

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

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

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

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

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

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

打上斷點

先做一個簡單的介紹，更詳細的內(nèi)容，我們會在接下來的講解中穿插說明。

網(wǎng)頁(Page)

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

source源代碼 我就是我

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

頁面呈現(xiàn)

我們看下這些文件的層級：

文件層級

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

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

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

我的項目文件放在code文件夾下面，里面有兩個文件，如下圖：

js代碼

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

引入文件夾

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

修改內(nèi)容

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

文件變化

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

替換(Overrides)

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

首先我們在剛才的項目路徑下面新建一個replace文件夾，用來存放這些臨時用來替換的文件。

存放替換的文件夾

然后我們把這個replace作為選擇放置替換項的文件夾。

選擇替換文件夾

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

生成替換文件

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

影響結(jié)果

而且本地源文件是沒有變化的。

源文件不變

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

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

主要針對擴展程序，比如vue插件等，大家有興趣的可以去了解一下，因為這里不屬于本項目的內(nèi)容，因此不做過多講解。

代碼段(Snippets)

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

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

頁面元素

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

獲取所有input

然后我們在左側(cè)的這個代碼段名稱上面右鍵，選擇運行，接下來去控制臺輸出allInput這個變量，看看會出現(xiàn)什么。

輸出獲取的input

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

接下來我們試著調(diào)試一下文章開始的那段代碼。

初始代碼

然后我們在頁面的return處打上斷點，刷新頁面重新加載一下。

斷點

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

新建代碼段

我們把鼠標放上去看看有什么變化？

m和n被修改

可以發(fā)現(xiàn)，m和n的值已經(jīng)都被改變了，其實我們再按下F10，斷點會原地再走一次，看下效果。

m和n被修改

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

輸出值

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

這個時候，我們在控制臺輸出一下m和n，看看會發(fā)生什么。

輸出m和n

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

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

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

頂部操作區(qū)

這里包含了我們調(diào)試的時候的所有操作，對于我們在打斷的時候會經(jīng)常用到。

調(diào)試按鈕

相信大家對這些按鈕已經(jīng)非常熟悉，這里只做個簡單的說明。

異常暫停

監(jiān)視

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

最大差值

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

監(jiān)視表達式

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

14-13

而且放開斷點之后，賦值語句會把原本屬于局部變量的min，變?yōu)槿肿兞俊?/p>

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

斷點(Breakpoints)

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

斷點

并且可以通過右鍵進行一些其他的操作。

操作

作用域(Scope)

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

作用域

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

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

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

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

增加閉包

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

min不存在

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

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

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

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

調(diào)用堆棧

XHR/提取斷點(XHR/fetch Breakpoints)

可以根據(jù)設(shè)置的標識，在發(fā)起請求的時候，如果某個請求地址包含該標識，那么就會在該請求發(fā)起是自動進入斷點。

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

假設(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}

我們設(shè)置過濾條件為網(wǎng)址包含8.json

請求攔截

那么在加載頁面的時候，包含這個標識的請求就會自動在發(fā)起的地方執(zhí)行斷點。

執(zhí)行斷點

如果不想添加標識去攔截所有請求，那么在點擊添加之后，直接單擊空白處即可。

DOM斷點(DOM Breakpoints)

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

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

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

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

元素斷點

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

DOM斷點

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

觸發(fā)斷點

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

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

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

假設(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)聽器斷點(Event Listener Breakpoints)

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

事件斷點

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

//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é)點的事件監(jiān)聽。

選擇事件

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

執(zhí)行斷點

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

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

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

復(fù)制事件

那么當(dāng)我們在頁面中復(fù)制時，就會觸發(fā)事件監(jiān)聽斷點，在執(zhí)行代碼的地方執(zhí)行斷點。

執(zhí)行斷點

CSP違規(guī)斷點(CSP Violation Breakpoints)

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

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

比如我們有以下代碼：

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

我們會看到控制臺報如下錯誤：

報錯

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

總結(jié)

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

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

謝謝