JavaScript開(kāi)發(fā)者需要了解的DevTools技巧有哪些，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年開(kāi)始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元伍家崗做網(wǎng)站,已為上家服務(wù),為伍家崗各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

1. 使用隱身模式

隱身模式或私有模式會(huì)使用單獨(dú)的用戶配置文件，在瀏覽器重新啟動(dòng)之后不會(huì)保留  Cookie，localStorage或緩存文件之類的數(shù)據(jù)。每個(gè)會(huì)話都會(huì)以干凈的狀態(tài)開(kāi)始，所以非常適合測(cè)試登錄功能、首次渲染性能和PWA程序。

2. 自動(dòng)啟動(dòng)DevTools

在開(kāi)發(fā)的時(shí)候，一般都要需要啟動(dòng)瀏覽器，打開(kāi) DevTools ，并打開(kāi)我們開(kāi)發(fā)的 URL  。我們可以在瀏覽器啟動(dòng)命令中添加一些配置，整個(gè)過(guò)程可以在一次點(diǎn)擊中實(shí)現(xiàn)自動(dòng)化。

最好創(chuàng)建一個(gè)新的快捷方式或腳本啟動(dòng)在開(kāi)發(fā)模式，然后為 Chrome 添加下面的配置:

• --incognito 以隱身模式開(kāi)始

• --auto-open-devtools-for-tabs 啟動(dòng) DevTools

• 并將測(cè)試網(wǎng)址放在最后，例如 http://localhost:8000/

如果是 Windows 系統(tǒng)，配置可能是下面這樣：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --incognito --auto-open-devtools-for-tabs http://localhost:8000

還有一些其他有用的配置：

• --allow-insecure-localhost 忽略 localhost 域上的 SSL 錯(cuò)誤

• --disable-extentions 禁用影響渲染的 Chrome 擴(kuò)展，例如廣告攔截器

• --window-size=, 設(shè)置初始窗口大小

• --window-position=, 設(shè)置初始窗口位置

• --user-data-dir="" 設(shè)置用戶配置文件目錄。

3. 使用命令面板

Chrome 的 DevTools 提供了類似編輯器的命令面板。在任何 DevTools 面板中，按 Ctrl | Cmd +  Shift + P，然后按名稱搜索選項(xiàng):

4. 查找未使用的 JavaScript

Chrome 的 Coverage 面板可以讓你能夠快速找到 JavaScript 有沒(méi)有被使用。首先，從  DevTools 菜單中的 More tools 子菜單中打開(kāi) Coverage 。重新加載頁(yè)面，面板將用條形圖顯示未使用代碼的百分比：

單擊任何 JavaScript 文件，未使用的代碼會(huì)用紅條突出顯示。

5. 找到DOM更改代碼

當(dāng)事件被觸發(fā)時(shí)，很難確定哪個(gè)函數(shù)負(fù)責(zé)更新特定的 HTML DOM 元素。要找到一個(gè)進(jìn)程，請(qǐng)?jiān)?Elements面板中右鍵單擊任何  HTML 元素，然后從 Break on 子菜單中選擇一個(gè)選項(xiàng)：

選擇:

• subtree modifications 監(jiān)聽(tīng)元素或子元素的更改

• attribute modifications 監(jiān)聽(tīng)元素的屬性(如class)何時(shí)更改

• node removal 監(jiān)聽(tīng)元素何時(shí)從 DOM 中被刪除

發(fā)生此類事件時(shí)，將在 Sources 面板中自動(dòng)觸發(fā)斷點(diǎn)。

6. 網(wǎng)速節(jié)流

在快速，可靠的網(wǎng)絡(luò)上使用高性能的設(shè)備測(cè)試你的站點(diǎn)可能并不能表示實(shí)際使用情況。你的用戶可能處在慢速的網(wǎng)絡(luò)環(huán)境下。

Network 選項(xiàng)卡提供了一個(gè)限制選項(xiàng)，這個(gè)選項(xiàng)可以人為地降低 HTTP 上傳速度，下載速度和延遲。這可以幫助你確定性能瓶頸的原因：

7. 過(guò)濾網(wǎng)絡(luò)請(qǐng)求

DevTools 的 Network 面板提供了幾個(gè)過(guò)濾器，其中包括一個(gè)僅顯示 JavaScript 請(qǐng)求的 JS  按鈕。你可以輸入請(qǐng)求的 URL 進(jìn)行模糊搜索，它也能接受一些特殊的過(guò)濾器，包括：

• 過(guò)濾緩存的請(qǐng)求: is:cached

• 過(guò)濾不完整的請(qǐng)求: is:running

• 識(shí)別大型請(qǐng)求: larger-than:

• 識(shí)別第三方資源: domain:

8. 黑盒腳本

有時(shí)，你沒(méi)必要確切地知道 JavaScript 錯(cuò)誤是何時(shí)或在何處發(fā)生的。調(diào)試一些三方庫(kù)(React, Vue.js,  jQuery等)或第三方腳本中的問(wèn)題通常都沒(méi)什么用，你也不能改這些庫(kù)。

DevTools 允許腳本被黑盒化，因此即使你選擇進(jìn)入調(diào)試器的某個(gè)函數(shù)，它們也不會(huì)在調(diào)試器中打開(kāi)。

在 Chrome DevTools Sources 面板中，打開(kāi)一個(gè)文件，右鍵單擊代碼中的某個(gè)位置，然后選擇添加腳本以忽略列表。

或者，單擊 Settings，然后切換到 Ignore List 選項(xiàng)卡。選中 Add content scripts to ignore list  ，并使用正則表達(dá)式輸入任意數(shù)量的文件名模式，例如 jquery.*\.js ：

9. 使用 logpoints

console.log() 在整個(gè)文件中自由插入調(diào)試語(yǔ)句非常好用，但是 logpoints  提供了一種無(wú)需編寫任何代碼即可獲取相同信息的方法。

要添加 logpoints ，請(qǐng)?jiān)?Sources 面板中打開(kāi)一個(gè)腳本，右鍵單擊任何行號(hào)，然后選擇 Add log point  。輸入一個(gè)表達(dá)式，例如

"The value of x is", x

每當(dāng)執(zhí)行該行代碼時(shí)，消息就會(huì)出現(xiàn)在 DevTools 控制臺(tái)中。logpoints 通常將在頁(yè)面刷新之間保持不變。

10. 使用條件斷點(diǎn)

單擊 Sources  面板中打開(kāi)的文件的行號(hào)會(huì)添加一個(gè)斷點(diǎn)。它會(huì)在執(zhí)行到這一行的時(shí)候暫停腳本，這樣你可以單步執(zhí)行代碼來(lái)檢查變量，調(diào)用堆棧等。

斷點(diǎn)有的時(shí)候并不好用，例如，如果在運(yùn)行 1000 次的循環(huán)的最后一次循環(huán)報(bào)錯(cuò)了。這時(shí)你可以添加一個(gè)條件斷點(diǎn)，讓它僅在滿足特定條件時(shí)才觸發(fā)斷點(diǎn)，例如 i  > 999 。你可以右鍵單擊行號(hào)，選擇 Add conditional breakpoint ，然后輸入條件表達(dá)式。

11. 停止無(wú)限循環(huán)

觸發(fā)無(wú)限循環(huán)是程序里很常見(jiàn)的 bug，它可能導(dǎo)致瀏覽器崩潰。要在 Chrome DevTools 中停止無(wú)限循環(huán)，可以打開(kāi)  Sources 面板，然后單擊調(diào)試暫停圖標(biāo)以停止腳本。按住相同的圖標(biāo)，然后選擇方形停止圖標(biāo)就可以停止腳本執(zhí)行。

12. 重新運(yùn)行 Ajax 請(qǐng)求

瀏覽器 JavaScript Ajax 調(diào)用通常使用 Fetch 或 XMLHttpRequest API  發(fā)送請(qǐng)求。這些請(qǐng)求會(huì)顯示在 DevTools Network 面板中，可以使用 XHR 按鈕進(jìn)行過(guò)濾。

DevTools 顯示了很多信息，但是有時(shí)你需要重新運(yùn)行一次 Ajax 調(diào)用。你可以右鍵單擊任何一個(gè)請(qǐng)求，然后從 Copy 子菜單中選擇一個(gè)選項(xiàng)：

選項(xiàng)包括 Windows Powershell，cURL 和 JavaScript Fetch 語(yǔ)法的命令復(fù)制。

13. 啟用本地文件替代

Chrome 允許任何 HTTP 請(qǐng)求使用你的設(shè)備上的本地文件，而不是通過(guò)網(wǎng)絡(luò)獲取它。這可以讓你:

• 在不需要構(gòu)建工具的情況下在實(shí)時(shí)編輯腳本或樣式

• 離線開(kāi)發(fā)一個(gè)網(wǎng)站，該網(wǎng)站通常會(huì)要求第三方域提供基本文件

• 臨時(shí)替換不必要的腳本，例如 analytics。

在本地PC上創(chuàng)建一個(gè)目錄，在該目錄中將存儲(chǔ)替代文件，例如 localfiles ，然后打開(kāi) Chrome 的 DevTools Sources  面板。在左側(cè)窗口中打開(kāi) Overrides 選項(xiàng)卡，單擊 + Select folder for overrides  ，然后選擇你創(chuàng)建的目錄。系統(tǒng)將提示你允許文件在本地保存，并且目錄將出現(xiàn)：

現(xiàn)在打開(kāi) Page 選項(xiàng)卡并找到任何源文件。有兩種方法可以將其添加為本地替代：

• 右鍵單擊該文件，然后選擇 Save for overrides ，或者

• 打開(kāi)文件，進(jìn)行編輯，然后用 Ctrl | Cmd + S 。

文件圖標(biāo)顯示為帶有紫色的覆蓋指示符：

它還將顯示在 Overrides 選項(xiàng)卡和 localfiles 目錄中?？梢栽?Chrome  中或使用任何代碼編輯器來(lái)編輯文件，每當(dāng)重新加載頁(yè)面時(shí)，都將使用更新的版本。

14. 管理客戶端存儲(chǔ)

網(wǎng)頁(yè)可以使用多種技術(shù)將數(shù)據(jù)存儲(chǔ)在客戶端上。 Chrome DevTools 中的 Application  面板允許你添加，檢查，修改和刪除 cookie，cache storage、localStorage、sessionStorage、IndexedDB 和  Web SQL中保存的值。

Chrome 中的 Storage 標(biāo)簽顯示本地存儲(chǔ)了多少數(shù)據(jù)，并提供了一個(gè)快速的 Clear site data 選項(xiàng)。

15. 模擬移動(dòng)硬件

智能手機(jī)和平板電腦通常包括諸如全球定位系統(tǒng)(GPS)，陀螺儀和加速度計(jì)之類的硬件。這些通常在電腦上是不可用的，這會(huì)使使用地理定位等  API 進(jìn)行開(kāi)發(fā)變得非常困難。

Chrome 可以在 DevTools 中模擬設(shè)備硬件 - 從 More tools 菜單中選擇 Sensors ：

有幾個(gè)選項(xiàng)：

• 選擇一個(gè)主要城市或輸入自定義的緯度和經(jīng)度。也可以將該位置設(shè)置為不可用，來(lái)模擬 GPS 信號(hào)弱的場(chǎng)景。

• 使用預(yù)設(shè)或自定義指標(biāo)設(shè)置設(shè)備方向。你可以點(diǎn)擊和智能手機(jī)拖到繞X任何Ÿ軸，或按住 Shift 圍繞旋轉(zhuǎn)z軸。

• 強(qiáng)制觸摸而不是鼠標(biāo)或其他本機(jī)設(shè)備事件。

• 設(shè)置空閑狀態(tài)以檢查你的應(yīng)用如何響應(yīng)鎖定屏幕。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。