我們先來一個小示例給大家看一下：
大家能看出來上面的代碼為什么輸出的是17嗎？按照正常的輸出應該是7才對呀！如果你對此有疑惑，說明你在平時調(diào)試代碼的時候已經(jīng)浪費了很多時間了哦。
今天就帶大家來探索一下開發(fā)者工具中源代碼的使用，這里提供了非常方便并且有用的功能。
大家可以借助它的一些神奇的能力，來解決那些困擾我們的問題，希望你能夠掌握并熟練的使用它們，下面就讓我們來一起看看它的魅力吧！
概要說明
源代碼面板從視覺效果上分為三個區(qū)域：菜單區(qū)、內(nèi)容區(qū)、監(jiān)聽區(qū)。
其中菜單區(qū)有五個子分類：
- 網(wǎng)頁(Page)：指頁面源，包含了該頁面中所有的文件，即使多個域名下的文件也都會展示出來，包括iframe中的，方便我們對文件進行查看。
- 文件系統(tǒng)(Filesystem)：可以關(guān)聯(lián)本地的一個文件夾，當在內(nèi)容區(qū)域修改該文件夾中的內(nèi)容時，會同步修改磁盤中的文件，適合實時修改項目文件，并會直接同步到編輯器中。
- 替換(Overrides)：可以使用本地中的文件替換當前頁面中的文件，適合在調(diào)試過程中實時修改代碼，但不會保存到磁盤中
(即不會修改項目源文件，編輯器中內(nèi)容依然不變)。 - 內(nèi)容腳本(Content scripts)：用來展示在當前頁面中的擴展程序代碼，如果有某個擴展程序在當前頁面執(zhí)行過，那么將會展示在這里。
- 代碼段(Snippets)：主要用來執(zhí)行一些預置腳本代碼，這樣可以不用每次都編寫同樣的調(diào)試代碼，直接執(zhí)行相應的代碼片段即可。
內(nèi)容區(qū)是用來展示各個文件的內(nèi)容，以便進行打斷點等操作，可以對代碼進行格式化。
監(jiān)聽區(qū)主要是供我們操作和查看斷點的執(zhí)行，以及監(jiān)聽我們設(shè)置的事件觸發(fā)，一般包括了以下10個方面：
- 頂部操作區(qū)：主要用來控制斷點的執(zhí)行。
- 監(jiān)視(Watch)：可以查看當前作用域鏈上的變量，為實時變化，默認只有this，可以手動添加需要監(jiān)視的變量，可以寫表達式。
- 斷點(Breakpoints)：顯示當前斷點所在的文件、行數(shù)以及該行的內(nèi)容。單擊可快速定位。
- 作用域(Scope)：主要包括本地(Local)→腳本(Script)→全局(Global)中的所有變量。
- 調(diào)用堆棧(Call Stack)：當前代碼的調(diào)用者，以及調(diào)用者的調(diào)用者。
- XHR/提取斷點(XHR/fetch Breakpoints)：用來給請求設(shè)置斷點，可以攔截所有請求，也可以設(shè)置過濾條件。
- DOM斷點(DOM Breakpoints)：如果為dom元素添加了斷點，那么在此顯示出被打斷點的元素。
- 全局監(jiān)聽器(Global Listeners)：注冊的全局事件會在這里顯示，如onfocus、onerror等。
- 事件監(jiān)聽器斷點(Event Listener Breakpoints)：如果注冊了某些事件，如load、copy等，那么在觸發(fā)這些事件的時候，會自動在執(zhí)行該行為的代碼處進入斷點狀態(tài)。
- CSP違規(guī)斷點(CSP Violation Breakpoints)：表示一種內(nèi)容安全策略(Content Security Policy的簡寫)，如果啟用這個策略，那么瀏覽器會對一些可能不安全的操作給出限制，在拋出錯誤提醒的同時，將當前操作直接中斷。
下面將對這些內(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)的方式，清晰的展示出當前頁面包含的所有文件，請看下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>source源代碼</title>
<style>
</style>
</head>
<body>
<iframe src="8.html" frameborder="0"></iframe>
<div id="div" date-key="divKey">我就是我</div>
<input type="text" id="myInput">
<input type="button" value="點我" id="btn">
<script src="9.js"></script>
<script src="https://lf3-short.bytegoofy.com/slardar/fe/sdk-web/plugins/blank-screen.0.3.19.js"></script>
<script>
</script>
</body>
</html>
在瀏覽器中呈現(xiàn)的效果為：
我們看下這些文件的層級：
通過清晰的結(jié)構(gòu)，我們能夠很容易找出相應的文件，并了解它們之間的關(guān)系，點擊其中的某個文件，就可以查看它的內(nèi)容了。
文件系統(tǒng)(Filesystem)
主要是用來跟本地的文件進行關(guān)聯(lián)，可以把這里想象成是一個編輯器，比如vscode，相當于是用vscode打開了一個項目文件夾一樣，你可以用這里的文件系統(tǒng)來打開你的某個文件夾，之后你就可以操作里面的文件，做任意的編輯，保存之后就會直接修改磁盤上的文件，就好像是在vscode里面操作一樣。
我的項目文件放在code文件夾下面，里面有兩個文件，如下圖：
我在文件系統(tǒng)添加這個文件夾：(選擇完畢之后別忘了在頁面上的彈出選項中點擊允許，下同)
這個時候我們在這里的內(nèi)容區(qū)修改9.js文件中的name為wang，age為22，return返回m + n + 1。
發(fā)現(xiàn)文件出現(xiàn)了小星星標識，這時ctrl + s保存一下，就會看到文件也跟著變更了。
細心的小伙伴可能在上面已經(jīng)看到9.js文件圖標的右下角有一個小圓點，這表示該文件與當前頁面有關(guān)聯(lián)，此時這種類型的文件，我們可以直接在網(wǎng)頁(Page)里面修改也是可以的。這里不再做演示了。
替換(Overrides)
當我們想在頁面上面直接修改代碼進行調(diào)試的時候，但是又不想保存到本地磁盤上面直接修改本地文件，那么可以使用替換功能，將當前修改的文件副本臨時保存到一個我們指定的文件夾中，用這個文件來替換當前頁面中的文件，以達到實時調(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ā)生了實時的改變。
而且本地源文件是沒有變化的。
利用這個功能，我們就可以在頁面上調(diào)試的時候，能夠直接修改文件內(nèi)容，并看到相應的結(jié)果，而不會去影響到源文件的代碼。
內(nèi)容腳本(Content scripts)
主要針對擴展程序，比如vue插件等，大家有興趣的可以去了解一下，因為這里不屬于本項目的內(nèi)容，因此不做過多講解。
代碼段(Snippets)
可以把這個理解成是一個可執(zhí)行代碼的文件在當前作用域中生效，需要注意的是，這塊的代碼段不但可以在正常情況下執(zhí)行，也可以在斷點調(diào)試的時候執(zhí)行，天然具有當前的作用域上下文。
比如我們想要獲取頁面中的所有input。
那么首先新建一個代碼段，命名為“頁面中所有input”，并編寫文件的內(nèi)容。
然后我們在左側(cè)的這個代碼段名稱上面右鍵，選擇運行，接下來去控制臺輸出allInput這個變量，看看會出現(xiàn)什么。
很神奇有沒有？我們發(fā)現(xiàn)當前作用域下，該變量是完全可用的。
接下來我們試著調(diào)試一下文章開始的那段代碼。
然后我們在頁面的return處打上斷點，刷新頁面重新加載一下。
可以看到m的值為3，n的值為4，這時我們?nèi)ゴa段里面新建一個“修改add返回值”的代碼段，讓m為10，n為7，保存之后運行一下。
我們把鼠標放上去看看有什么變化？
可以發(fā)現(xiàn)，m和n的值已經(jīng)都被改變了，其實我們再按下F10，斷點會原地再走一次，看下效果。
這下是不是更清晰了，現(xiàn)在我們把斷點放過去，來看一下控制臺的輸出。
結(jié)果已經(jīng)受到了影響，跟我們開頭的那個結(jié)果一模一樣，大家現(xiàn)在是不是完全就明白了呢。
這個時候，我們在控制臺輸出一下m和n，看看會發(fā)生什么。
發(fā)現(xiàn)這兩個變量已經(jīng)完全不存在了，這是因為當時執(zhí)行代碼段時的上下文已經(jīng)不存在了，作用域已經(jīng)被銷毀。
因此我們可以利用代碼段的這個特性，去做很多好玩的事情。
如果你對此感興趣，那就讓我來繼續(xù)為你介紹其他的功能。
頂部操作區(qū)
這里包含了我們調(diào)試的時候的所有操作，對于我們在打斷的時候會經(jīng)常用到。
相信大家對這些按鈕已經(jīng)非常熟悉，這里只做個簡單的說明。
- 繼續(xù)執(zhí)行腳本，也就是放過當前斷點，直接進行到下一個斷點，快捷鍵F8
- 跳過下一個函數(shù)調(diào)用，其實就是我們經(jīng)常說的執(zhí)行到下一行，或者更準確的說是執(zhí)行到下一個語句，可以理解為下一個可以添加分號的地方，其中逗號表達式或者三目運算符等即使跨越多行，也是作為一個語句來跳過的，也叫步進，快捷鍵為F10
- 進入下一個函數(shù)調(diào)用，就是說會進入執(zhí)行函數(shù)的方法體內(nèi)，即使該函數(shù)中沒有打斷點，也會自動跳到函數(shù)的第一行位置，也叫步入，快捷鍵為F11
- 跳出當前函數(shù)，會直接執(zhí)行當前函數(shù)到完畢，繼續(xù)之前斷點的執(zhí)行，也叫步出，快捷鍵shift + F11
- 單步執(zhí)行，可以理解為F10 + F11，即自動跳到下一個語句，如果碰到函數(shù)，會直接進入方法體內(nèi)部，快捷鍵為F9
- 停用斷點，會使設(shè)置的所有斷點全部失效(包括代碼中的debugger)，就好像沒設(shè)置過一樣，快捷鍵ctrl + F8
- 是否在遇到異常時暫停，如果選擇在異常時暫停，那么發(fā)生異常的時候會自動暫停代碼的執(zhí)行，就好像在異常的地方打了斷點一樣，如果選擇不在異常時暫停，那么即使發(fā)生異常，也不會暫停代碼的執(zhí)行
監(jiān)視
可以監(jiān)測當前執(zhí)行環(huán)境的作用域鏈上面的所有變量或表達式，比如求最大差值的一個函數(shù).
我們可以監(jiān)視任意合法的表達式，甚至可以進行賦值。
代碼的原本執(zhí)行結(jié)果應該是13，但是我們把min重新賦值之后，結(jié)果被改變了。
而且放開斷點之后，賦值語句會把原本屬于局部變量的min，變?yōu)槿肿兞俊?/p>
斷點(Breakpoints)
會顯示出斷點所在的行數(shù)與該行的內(nèi)容，單擊某一個斷點會跳轉(zhuǎn)到相應位置。
并且可以通過右鍵進行一些其他的操作。
作用域(Scope)
會展示出當前斷點位置的作用域鏈上的所有變量。
如果是函數(shù)的話，會有本地變量，表示的是當前函數(shù)體內(nèi)存在的變量。
腳本指的是可以訪問的腳本中的變量，也包括其他腳本，比如上面的k、m、t就是我在另一個引入的js文件中定義的變量，不過如果引入的腳本在當前斷點之后執(zhí)行，那么這里就訪問不到那些變量，也就不會在這里顯示。
全局指的是掛在window下面的變量，由于我們聲明的變量都是使用的let，因此不會變?yōu)閣indow的屬性，因此只屬于腳本。如果將average用var來聲明，那么就會在全局里面顯示。
而且如果增加閉包的話，情況會有一些變化。
我們發(fā)現(xiàn)多了一個閉包的變量區(qū)域，而且里面只有max，你可能會疑惑，上面的min變量也聲明了呀，而且也已經(jīng)賦值過了，為什么不顯示呢？是因為min變量在閉包函數(shù)里面沒有用到，在生成閉包環(huán)境時沒有將min添加進去，因此當前作用域無法取得min的引用，請看此時控制臺輸出。
是不是這下就看明白了呢？通過這里我們對當前執(zhí)行的代碼作用域一目了然。
調(diào)用堆棧(Call Stack)
會展示出當前代碼是在哪里調(diào)用的，如果有更高層的調(diào)用者，那么會一直展示，這樣有利于我們快速找到業(yè)務中初始的調(diào)用位置。
我們來構(gòu)造一個案例，看看它的效果。
XHR/提取斷點(XHR/fetch Breakpoints)
可以根據(jù)設(shè)置的標識，在發(fā)起請求的時候，如果某個請求地址包含該標識，那么就會在該請求發(fā)起是自動進入斷點。
注意這里只能是XHR或者fetch形式發(fā)起的請求才會有作用。如果是js或者css等類型，即使設(shè)置了也不會有效果。也可以不設(shè)置條件，來給所有請求執(zhí)行斷點。
假設(shè)我們有如下代碼：
//9.js
var 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í)行斷點。
如果不想添加標識去攔截所有請求，那么在點擊添加之后，直接單擊空白處即可。
DOM斷點(DOM Breakpoints)
可以給DOM元素設(shè)置相應的斷點條件，當觸發(fā)該條件時會自動在代碼執(zhí)行的地方中斷。
假設(shè)我們有如下代碼：
//9.html
<body>
<div id="div" date-key="divKey">我就是我</div>
<input type="text" id="myInput">
<input type="button" value="點我" id="btn">
<script src="9.js"></script>
</body>
//9.js
document
.getElementById("btn")
.addEventListener("click",
function (e) {
document
.getElementById("div")
.classList
.add("active");
}
);
當我們給頁面中的id為div的元素添加屬性修改斷點時：
我們看到面板中已經(jīng)顯示：
這時我們單擊按鈕，觸發(fā)修改屬性行為。
我們發(fā)現(xiàn)代碼已經(jīng)在第8行暫停執(zhí)行了。
全局監(jiān)聽器(Global Listeners)
當我們設(shè)置一些全局事件的時候，會在該處顯示，用于快速定位，哪里用到了全局的事件監(jiān)聽?？梢赃M行暫時的移除操作。
假設(shè)我們有以下代碼：
//9.js
window.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)
當某塊代碼觸發(fā)了一些事件的時候，那么就會自動在該代碼處執(zhí)行斷點，由于這塊內(nèi)容比較多，因此只舉兩個例子來供大家參考，其他的情況類似。
① 節(jié)點插入事件，假如我們有如下代碼：
//9.js
document
.getElementById("btn")
.addEventListener("click",
function (e) {
let d = document.createElement('div')
d.id = "myDiv"
d.innerHTML = "新的div"
document.body.appendChild(d)
}
);
document.addEventListener("DOMNodeInserted",
function (e) {
console.log(e);
}
);
我們勾選上插入DOM節(jié)點的事件監(jiān)聽。
那么當我們點擊按鈕時，就會觸發(fā)事件監(jiān)聽斷點，在執(zhí)行代碼的地方執(zhí)行斷點。
② 復制事件，假如我們有如下代碼：
//9.js
document.addEventListener("copy",
function (e) {
console.log(e);
}
);
我們勾選上copy操作的事件監(jiān)聽。
那么當我們在頁面中復制時，就會觸發(fā)事件監(jiān)聽斷點，在執(zhí)行代碼的地方執(zhí)行斷點。
CSP違規(guī)斷點(CSP Violation Breakpoints)
如果服務端實現(xiàn)并設(shè)置了CSP的話，并且瀏覽器也支持該機制，那么會在執(zhí)行一些不符合該策略的代碼時，直接中斷。
我們先在頁面中使用meta的方式來模擬一下，以觸發(fā)該策略。
比如我們有以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 注意這行代碼即開啟CSP策略 --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
<title>source源代碼</title>
<style></style>
</head>
<body>
<div id="div" date-key="divKey">我就是我</div>
<input type="text" id="myInput">
<input type="button" value="點我" id="btn">
<script src="9.js"></script>
<script>
console.log('abc')
</script>
</body>
</html>
//9.js
eval("{}")
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ā)揮它的作用。
熟練的使用這些工具是我們需要掌握的技能，希望我能夠給你一些幫助！文章來源：http://www.zghlxwxcb.cn/news/detail-494260.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-494260.html
到了這里，關(guān)于F12-開發(fā)者工具常用操作與使用說明之源代碼sources的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
