資訊專欄INFORMATION COLUMN
摘要：類似一個(gè)文本編輯器。顯示請(qǐng)求瀑布流?；谄骄降木W(wǎng)絡(luò)速度和設(shè)備性能作出的評(píng)估。方便開發(fā)者少用鼠標(biāo)。而在面板中是打開具體文件。顧名思義，觀察這個(gè)斷點(diǎn)發(fā)生之前，被調(diào)用過的函數(shù)。在開發(fā)者工具的中，我們可以設(shè)置永久名單。
簡(jiǎn)單復(fù)習(xí)各個(gè)面板 Elements
瀏覽DOM樹，瀏覽樣式。
Console一個(gè)REPL。
小技巧： 在任何非Console面板中，按ESC可以調(diào)出一個(gè)小的Console窗口，方便開發(fā)者Debug。
Sources類似一個(gè)文本編輯器。右邊有一個(gè)Debugger，我們可以用它來Debug，可以做比console.log更復(fù)雜的事。
Network顯示請(qǐng)求瀑布流。
Performance我們可以Record一些操作，然后在這個(gè)面板中查看一些信息。
Memory查看頁(yè)面的內(nèi)存占用具體情況，可以定位內(nèi)存泄漏原因。
Application顯示各種瀏覽器儲(chǔ)存情況，比如local storage， Session Storage，cookie。 查看網(wǎng)站儲(chǔ)存了用戶的哪些信息。
Security查看安全證書，連接是否安全。
Audits網(wǎng)站性能的總結(jié)，整合了google自家的Lighthouse功能?；谄骄降木W(wǎng)絡(luò)速度和設(shè)備性能作出的評(píng)估。
深入各個(gè)面板 編輯 Editing 元素和樣式我們可以點(diǎn)擊Elements面板中的HTML文本，做更改，也可以點(diǎn)擊CSS屬性，做更改。
在Elements面板，按住option點(diǎn)擊展開一個(gè)元素節(jié)點(diǎn)的箭頭會(huì)展開當(dāng)前節(jié)點(diǎn)下的所有子節(jié)點(diǎn)。
在Elements面板，我們長(zhǎng)按一個(gè)節(jié)點(diǎn)可以移動(dòng)該節(jié)點(diǎn)在DOM樹中的位置。
右鍵一個(gè)DOM節(jié)點(diǎn)，選擇Scroll into view，可以迅速找到頁(yè)面中節(jié)點(diǎn)的位置。
選擇一個(gè)DOM節(jié)點(diǎn)，按“H”隱藏這個(gè)節(jié)點(diǎn)，調(diào)整的是visibility屬性。如果visibilty在CSS中被標(biāo)記了!important則不能被隱藏。按“delete”刪除這個(gè)節(jié)點(diǎn)，ctrl+z撤銷刪除。
在Style面板中，我們按住Shift點(diǎn)擊一個(gè)顏色塊，我們可以更改顏色的表達(dá)格式，在HEX，RGB，HSL間切換。
在Style面板中，我們可以左鍵點(diǎn)擊一個(gè)顏色塊，調(diào)出調(diào)色板。這個(gè)調(diào)色板有一個(gè)最大的好處就是里面總是保存了Material Design的配色,方便了開發(fā)者選擇顏色。
在DOM樹中選擇一個(gè)節(jié)點(diǎn)，在右邊樣式面板中點(diǎn)擊:hov，可以選擇強(qiáng)制觸發(fā)各種鼠標(biāo)事件，方便開發(fā)者檢查觸發(fā)事件時(shí)的CSS屬性。
元素節(jié)點(diǎn)有的時(shí)候我們會(huì)發(fā)現(xiàn)一個(gè)元素節(jié)點(diǎn)有好幾個(gè)CSS選擇器，比如瀏覽器有默認(rèn)樣式，你自己寫了一個(gè)樣式，你又用了一個(gè)CSS庫(kù)比如Bootstrap加了另一個(gè)樣式。我們可以點(diǎn)擊Computed面板，來檢查最后有用的樣式是哪些。
在Event Listeners面板中，我們可以觀察該節(jié)點(diǎn)的所有事件。如果我們點(diǎn)擊旁邊的JS文件名，會(huì)跳轉(zhuǎn)到Source面板展示事件處理函數(shù)的實(shí)現(xiàn)代碼。
當(dāng)Source面板中的代碼格式是被壓縮過的時(shí)候，我們點(diǎn)擊左下角的大括號(hào){}“Pretty Print”按鈕，可以美化代碼樣式。
DOM斷點(diǎn)。右鍵點(diǎn)擊一個(gè)元素節(jié)點(diǎn)，選擇Break On。我們有三種Debug的選擇，為什么這個(gè)節(jié)點(diǎn)被刪除(node removal)，為什么這個(gè)節(jié)點(diǎn)的某種屬性發(fā)生了變化(attribute modification)，或者為什么這個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)發(fā)生了變化(subtree modification)。當(dāng)代碼觸發(fā)斷點(diǎn)的時(shí)候，Sources面板會(huì)自動(dòng)打開，展示引發(fā)節(jié)點(diǎn)變化的具體代碼。
更改本地文件在Sources面板中，選擇Filesystem面板，我們可以打開本地的workspace。然后我們?cè)偾巴鵈lements面板中調(diào)試CSS樣式，會(huì)發(fā)現(xiàn)一些CSS文件圖標(biāo)被標(biāo)上了綠色圓點(diǎn)，這就表示現(xiàn)在我們?cè)贒evtool做的調(diào)試，本地的文件也會(huì)被更改，Sass也有用，但是使用webpack的項(xiàng)目不一定支持這個(gè)功能。
但是在Elements面板左邊的DOM樹中做更改，不會(huì)改變本地的HTML文件。因?yàn)镈OM樹只是瀏覽器根據(jù)我們寫的HTML生成的，并沒有直接更改HTML文件的能力。如果我們想要更改HTML和JS文件，我們可以在Sources面板中做到，就像使用文本編輯器一樣。
選擇元素歷史在Elements面板中左鍵點(diǎn)擊選擇一個(gè)節(jié)點(diǎn)，然后進(jìn)入Console面板，輸入:
$0
就會(huì)返回剛才最近選擇的一個(gè)節(jié)點(diǎn)。以此類推，$1會(huì)返回第二近選擇的一個(gè)節(jié)點(diǎn)。
說到$符號(hào)，Console里也可以使用類似Jquery的$選擇器,輸入$,按回車，就會(huì)返回Jquery選擇器函數(shù)。
調(diào)試 Debug小技巧：在開發(fā)者工具的任意面板按ctrl+shift+P，我們可以打開一個(gè)命令行，里面有很多常用Dev Tool操作。方便開發(fā)者少用鼠標(biāo)。而在Sources面板中ctrl+P是打開具體文件。
斷點(diǎn)在Sources面板中打開一個(gè)JS文件，我們可以在代碼中加入
debugger;
來打斷點(diǎn)。我們還可以直接點(diǎn)擊代碼行數(shù)來打斷點(diǎn)，行數(shù)會(huì)變藍(lán)。當(dāng)代碼運(yùn)行到斷點(diǎn)的時(shí)候，我們會(huì)在調(diào)試操作面板中看到“Paused on breakpoint“的提示。注意斷點(diǎn)是在該行代碼執(zhí)行前斷而不是之后。
除了常見的Step over, Step into功能按鈕，我們還有一些其他面板。
Watch 我們可以在Watch中添加任何變量?？梢杂^察該變量在當(dāng)前斷點(diǎn)的作用域中是defined還是undefined。
Call Stack 顧名思義，觀察這個(gè)斷點(diǎn)發(fā)生之前，被調(diào)用過的函數(shù)。
Scope 觀察當(dāng)前作用域中我們所有可以調(diào)用的變量。如果知道要具體看哪個(gè)變量還是用Watch比較方便。
Breakpoints 告訴我們目前可用的斷點(diǎn)。我們可以取消打勾來取消斷點(diǎn)。
XHR/fetch Breakpoint 加入自定義請(qǐng)求斷點(diǎn)，在特定URL請(qǐng)求發(fā)生的時(shí)候打斷。然后可以在Call Stack面板中找到涉及到這個(gè)請(qǐng)求的代碼文件。
Blackbox功能當(dāng)我們使用很多庫(kù)的時(shí)候，比如React，d3.js。如果我們?cè)谡{(diào)試面板中看到了一些文件名屬于第三方庫(kù)，我們可以右鍵點(diǎn)擊然后Blackbox它。意思是我們不需要看到第三方庫(kù)的代碼運(yùn)行過程。在開發(fā)者工具的setting中，我們可以設(shè)置永久Blackbox名單。
條件性斷點(diǎn)當(dāng)一個(gè)函數(shù)被經(jīng)常調(diào)用，但是只在特定情況下出錯(cuò)的時(shí)候。我們可以使用條件性斷點(diǎn)。比如我們只想要在ajax函數(shù)被傳入特定參數(shù)的時(shí)候才打斷，而不是所有ajax call都打斷讓我們看。我們可以右鍵點(diǎn)擊一個(gè)行數(shù)，選擇Conditional Breakpoint然后我們可以輸入?yún)?shù)條件。這種斷點(diǎn)，行數(shù)會(huì)變成黃色。
官方文檔
Chrome Developer Tool
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104526.html
摘要：發(fā)布于之后，采用了完全不同的方式，使用函數(shù)定義任務(wù)。它允許開發(fā)者使用它們的補(bǔ)丁和更新來修復(fù)這些安全漏洞。提供了工具用于掃描依賴來監(jiān)測(cè)漏洞。是一個(gè)開源診斷工具，用于和應(yīng)用。是和開發(fā)的一款新的包管理工具。與相比，它解決了安全性能以及一致性問題。 譯者按: 最全的JavaScript開發(fā)工具列表，總有一款適合你！ 原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...
摘要：本文作者王仕軍，商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。想知道我接下來會(huì)寫些什么歡迎訂閱我的掘金專欄或知乎專欄前端周刊讓你在前端領(lǐng)域跟上時(shí)代的腳步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字，讀完需 4 分鐘。我本周讀到 1 篇比較有趣的文章叫做《Th...
摘要：更好的斷點(diǎn)控制啟用禁用重新啟用可以在調(diào)試視圖中的斷點(diǎn)區(qū)域設(shè)置。編輯器邊距中的斷點(diǎn)一般用紅色的實(shí)心圓表示。前端開發(fā)必備插件功能性插件匹配標(biāo)簽，關(guān)閉對(duì)應(yīng)的標(biāo)簽。這可以使得團(tuán)隊(duì)內(nèi)的書寫更為規(guī)范且具有一致性。 Visual Studio Code是個(gè)現(xiàn)下比較流行的編輯器，啟動(dòng)非?？?，完全可以用來代替其他文本文件編輯工具。又可以用來做開發(fā)，支持各種語(yǔ)言，相比其他IDE，輕量級(jí)完全可配置還集成Gi...
摘要：而就是告訴程序在那里停下來進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。面向，專為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺(tái)書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁(yè)或標(biāo)簽頁(yè)中最后點(diǎn)擊的元素。 寫在前面本文包括瀏覽器調(diào)試，不包括web移動(dòng)端調(diào)試。本文調(diào)試均在chrome瀏覽器進(jìn)行 alert 這個(gè)不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
摘要：而就是告訴程序在那里停下來進(jìn)行單步調(diào)試，俗稱斷點(diǎn)。面向，專為異步而生的斷點(diǎn)調(diào)試功能。中的調(diào)試技巧元素的控制臺(tái)書簽開發(fā)者工具和都提供了書簽功能，用于顯示你在元素標(biāo)簽頁(yè)或標(biāo)簽頁(yè)中最后點(diǎn)擊的元素。 寫在前面本文包括瀏覽器調(diào)試，不包括web移動(dòng)端調(diào)試。本文調(diào)試均在chrome瀏覽器進(jìn)行 alert 這個(gè)不用多說了，不言自明 console 基本輸出 想必大家都在用console.log在控制...
閱讀 840·2023-04-26 00:13
閱讀 2885·2021-11-23 10:08
閱讀 2463·2021-09-01 10:41
閱讀 2127·2021-08-27 16:25
閱讀 4221·2021-07-30 15:14
閱讀 2375·2019-08-30 15:54
閱讀 873·2019-08-29 16:22
閱讀 2754·2019-08-26 12:13
