影響函數(shù)執(zhí)行
大家能看出來上面的代碼為什么輸出的是17嗎？按照正常的輸出應(yīng)該是7才對呀！如果你對此有疑惑，說明你在平時調(diào)試代碼的時候已經(jīng)浪費(fèi)了很多時間了哦。
今天就帶大家來探索一下開發(fā)者工具中源代碼的使用，這里提供了非常方便并且有用的功能。
大家可以借助它的一些神奇的能力，來解決那些困擾我們的問題，希望你能夠掌握并熟練的使用它們，下面就讓我們來一起看看它的魅力吧！
不愧是你
概要說明
源代碼面板從視覺效果上分為三個區(qū)域：菜單區(qū)、內(nèi)容區(qū)、監(jiān)聽區(qū)。
源代碼界面
其中菜單區(qū)有五個子分類：
菜單分類
內(nèi)容區(qū)是用來展示各個文件的內(nèi)容，以便進(jìn)行打斷點(diǎn)等操作，可以對代碼進(jìn)行格式化。
監(jiān)聽區(qū)主要是供我們操作和查看斷點(diǎn)的執(zhí)行，以及監(jiān)聽我們設(shè)置的事件觸發(fā)，一般包括了以下10個方面：
監(jiān)聽區(qū)內(nèi)容
下面將對這些內(nèi)容一一進(jìn)行詳細(xì)的講解，我會通過示例的方式給大家進(jìn)行演示。
內(nèi)容區(qū)
由于內(nèi)容區(qū)與另外兩個有關(guān)聯(lián)，是它們操作的基礎(chǔ)，因此先介紹一下這塊。
大家一看就知道是用來展示內(nèi)容的，像一些js、html、css等各種各樣的文件，包括圖片也可以在這里顯示，主要是用來查看和調(diào)試我們的代碼。
可以在想要的位置打上斷點(diǎn)，只需要單擊該行代碼左側(cè)的行號處即可：
打上斷點(diǎn)
先做一個簡單的介紹，更詳細(xì)的內(nèi)容，我們會在接下來的講解中穿插說明。
網(wǎng)頁(Page)
在這里通過目錄結(jié)構(gòu)的方式，清晰的展示出當(dāng)前頁面包含的所有文件，請看下面：
source源代碼 我就是我
在瀏覽器中呈現(xiàn)的效果為：
頁面呈現(xiàn)
我們看下這些文件的層級：
文件層級
通過清晰的結(jié)構(gòu)，我們能夠很容易找出相應(yīng)的文件，并了解它們之間的關(guān)系，點(diǎn)擊其中的某個文件，就可以查看它的內(nèi)容了。
文件系統(tǒng)(Filesystem)
主要是用來跟本地的文件進(jìn)行關(guān)聯(lián)，可以把這里想象成是一個編輯器，比如vscode，相當(dāng)于是用vscode打開了一個項目文件夾一樣，你可以用這里的文件系統(tǒng)來打開你的某個文件夾，之后你就可以操作里面的文件，做任意的編輯，保存之后就會直接修改磁盤上的文件，就好像是在vscode里面操作一樣。
我的項目文件放在code文件夾下面，里面有兩個文件，如下圖：
js代碼
我在文件系統(tǒng)添加這個文件夾：(選擇完畢之后別忘了在頁面上的彈出選項中點(diǎn)擊允許，下同)
引入文件夾
這個時候我們在這里的內(nèi)容區(qū)修改9.js文件中的name為wang，age為22，return返回m + n + 1。
修改內(nèi)容
發(fā)現(xiàn)文件出現(xiàn)了小星星標(biāo)識，這時ctrl + s保存一下，就會看到文件也跟著變更了。
文件變化
細(xì)心的小伙伴可能在上面已經(jīng)看到9.js文件圖標(biāo)的右下角有一個小圓點(diǎn)，這表示該文件與當(dāng)前頁面有關(guān)聯(lián)，此時這種類型的文件，我們可以直接在網(wǎng)頁(Page)里面修改也是可以的。這里不再做演示了。
替換(Overrides)
當(dāng)我們想在頁面上面直接修改代碼進(jìn)行調(diào)試的時候，但是又不想保存到本地磁盤上面直接修改本地文件，那么可以使用替換功能，將當(dāng)前修改的文件副本臨時保存到一個我們指定的文件夾中，用這個文件來替換當(dāng)前頁面中的文件，以達(dá)到實時調(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)
主要針對擴(kuò)展程序，比如vue插件等，大家有興趣的可以去了解一下，因為這里不屬于本項目的內(nèi)容，因此不做過多講解。
代碼段(Snippets)
可以把這個理解成是一個可執(zhí)行代碼的文件在當(dāng)前作用域中生效，需要注意的是，這塊的代碼段不但可以在正常情況下執(zhí)行，也可以在斷點(diǎn)調(diào)試的時候執(zhí)行，天然具有當(dāng)前的作用域上下文。
比如我們想要獲取頁面中的所有input。
頁面元素
那么首先新建一個代碼段，命名為“頁面中所有input”，并編寫文件的內(nèi)容。
獲取所有input
然后我們在左側(cè)的這個代碼段名稱上面右鍵，選擇運(yùn)行，接下來去控制臺輸出allInput這個變量，看看會出現(xiàn)什么。
輸出獲取的input
很神奇有沒有？我們發(fā)現(xiàn)當(dāng)前作用域下，該變量是完全可用的。
接下來我們試著調(diào)試一下文章開始的那段代碼。
初始代碼
然后我們在頁面的return處打上斷點(diǎn)，刷新頁面重新加載一下。
斷點(diǎn)
可以看到m的值為3，n的值為4，這時我們?nèi)ゴa段里面新建一個“修改add返回值”的代碼段，讓m為10，n為7，保存之后運(yùn)行一下。
新建代碼段
我們把鼠標(biāo)放上去看看有什么變化？
m和n被修改
可以發(fā)現(xiàn)，m和n的值已經(jīng)都被改變了，其實我們再按下F10，斷點(diǎn)會原地再走一次，看下效果。
m和n被修改
這下是不是更清晰了，現(xiàn)在我們把斷點(diǎ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)境的作用域鏈上面的所有變量或表達(dá)式，比如求最大差值的一個函數(shù).
最大差值
我們可以監(jiān)視任意合法的表達(dá)式，甚至可以進(jìn)行賦值。
監(jiān)視表達(dá)式
代碼的原本執(zhí)行結(jié)果應(yīng)該是13，但是我們把min重新賦值之后，結(jié)果被改變了。
14-13
而且放開斷點(diǎn)之后，賦值語句會把原本屬于局部變量的min，變?yōu)槿肿兞俊?/p>
min變?yōu)槿肿兞?/p>
斷點(diǎn)(Breakpoints)
會顯示出斷點(diǎn)所在的行數(shù)與該行的內(nèi)容，單擊某一個斷點(diǎn)會跳轉(zhuǎn)到相應(yīng)位置。
斷點(diǎn)
并且可以通過右鍵進(jìn)行一些其他的操作。
操作
作用域(Scope)
會展示出當(dāng)前斷點(diǎn)位置的作用域鏈上的所有變量。
作用域
如果是函數(shù)的話，會有本地變量，表示的是當(dāng)前函數(shù)體內(nèi)存在的變量。
腳本指的是可以訪問的腳本中的變量，也包括其他腳本，比如上面的k、m、t就是我在另一個引入的js文件中定義的變量，不過如果引入的腳本在當(dāng)前斷點(diǎn)之后執(zhí)行，那么這里就訪問不到那些變量，也就不會在這里顯示。
全局指的是掛在window下面的變量，由于我們聲明的變量都是使用的let，因此不會變?yōu)閣indow的屬性，因此只屬于腳本。如果將average用var來聲明，那么就會在全局里面顯示。
而且如果增加閉包的話，情況會有一些變化。
增加閉包
我們發(fā)現(xiàn)多了一個閉包的變量區(qū)域，而且里面只有max，你可能會疑惑，上面的min變量也聲明了呀，而且也已經(jīng)賦值過了，為什么不顯示呢？是因為min變量在閉包函數(shù)里面沒有用到，在生成閉包環(huán)境時沒有將min添加進(jìn)去，因此當(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/提取斷點(diǎn)(XHR/fetch Breakpoints)
可以根據(jù)設(shè)置的標(biāo)識，在發(fā)起請求的時候，如果某個請求地址包含該標(biāo)識，那么就會在該請求發(fā)起是自動進(jìn)入斷點(diǎn)。
注意這里只能是XHR或者fetch形式發(fā)起的請求才會有作用。如果是js或者css等類型，即使設(shè)置了也不會有效果。也可以不設(shè)置條件，來給所有請求執(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}
我們設(shè)置過濾條件為網(wǎng)址包含8.json
請求攔截
那么在加載頁面的時候，包含這個標(biāo)識的請求就會自動在發(fā)起的地方執(zhí)行斷點(diǎn)。
執(zhí)行斷點(diǎn)
如果不想添加標(biāo)識去攔截所有請求，那么在點(diǎn)擊添加之后，直接單擊空白處即可。
DOM斷點(diǎn)(DOM Breakpoints)
可以給DOM元素設(shè)置相應(yīng)的斷點(diǎn)條件，當(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的元素添加屬性修改斷點(diǎn)時：
元素斷點(diǎn)
我們看到面板中已經(jīng)顯示：
DOM斷點(diǎn)
這時我們單擊按鈕，觸發(fā)修改屬性行為。
觸發(fā)斷點(diǎn)
我們發(fā)現(xiàn)代碼已經(jīng)在第8行暫停執(zhí)行了。
全局監(jiān)聽器(Global Listeners)
當(dāng)我們設(shè)置一些全局事件的時候，會在該處顯示，用于快速定位，哪里用到了全局的事件監(jiān)聽?？梢赃M(jìn)行暫時的移除操作。
假設(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)聽器斷點(diǎn)(Event Listener Breakpoints)
當(dāng)某塊代碼觸發(fā)了一些事件的時候，那么就會自動在該代碼處執(zhí)行斷點(diǎn)，由于這塊內(nè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)聽。
選擇事件
那么當(dāng)我們點(diǎn)擊按鈕時，就會觸發(fā)事件監(jiān)聽斷點(diǎn)，在執(zhí)行代碼的地方執(zhí)行斷點(diǎn)。
執(zhí)行斷點(diǎn)
② 復(fù)制事件，假如我們有如下代碼：
//9.jsdocument.addEventListener(“copy”, function (e) { console.log(e); });
我們勾選上copy操作的事件監(jiān)聽。
復(fù)制事件
那么當(dāng)我們在頁面中復(fù)制時，就會觸發(fā)事件監(jiān)聽斷點(diǎn)，在執(zhí)行代碼的地方執(zhí)行斷點(diǎn)。
執(zhí)行斷點(diǎn)
CSP違規(guī)斷點(diǎn)(CSP Violation Breakpoints)
如果服務(wù)端實現(xiàn)并設(shè)置了CSP的話，并且瀏覽器也支持該機(jī)制，那么會在執(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ā)揮它的作用。
熟練的使用這些工具是我們需要掌握的技能，希望我能夠給你一些幫助！
謝謝
