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