在network模組中，大致上可以分成四塊模組，
1- 這個模組相當於是乙個功能選單，左邊的四個按鈕
依次表示的是：
1-1 停止捕獲請求
1-2 清除所有的請求
1-3 對請求進行快照
1-4 是否開啟過濾選項，也就是是否開啟圖中的2
除此之外裡面的disable cache是用來請求請求快取，preserve log 用來儲存請求記錄 offine斷網，其他的具體使用與分析會在後面的課程中講解
2- 這個模組主要是用來過濾請求的型別的
3- 這個的功能是相當於檢視各個請求的傳送時間，完成時間的乙個總的概況，主要是用來全域性分析用的
4- 檢視裡面的各個請求的具體情況
上面的這樣圖是的首頁的一張
1- 功能選單模組
主要要講解一下前5個按鈕功能，
1-1 用於觸發監控頁面，從而輸出效能分析圖
1-2 重新重新整理請求效能分析
1-3 清除所有的分析資訊
1-4 上傳分析報告圖
2- 這一部分主要涉及到火焰圖的分析，具體可以賺到阮一峰大大的相關博文
這個模組是用來對記憶體占用情況進行分析的。其中裡面有3個小的功能
圖中上面的1-3分別代表的功能是：
1- 記憶體堆疊快照 這個功能主要是用來檢視當前（沒有被垃圾**機制**的）的各項資源的占用情況與記憶體的乙個比例。
2- 用於動態監控從start啟動之後記憶體的乙個占用情況
3- 通過乙個時間軸圖來動態監控占用情況，這個相比於2的乙個好處是可以動態的監控不需要手動控制，另外乙個就是可以通過圖的形式直觀地顯示
這個模組主要是用來判斷當前頁面中是否使用了有效的https證書，不起到其他的作用
這個模組主要是chrome提供的用來自動分析頁面的情況的，但是由於這個需要fq所以推薦大家使用舊的版本legacy audits來進行分析頁面
開啟方式如下：
使用ctrl+shift+p 啟用面板，啟用之後就會開啟裡面內建的一些隱藏模組
好的，所有的模組大致上面已經說了一遍了，接下來的內容就是開始說說怎樣在實際應用中使用這些特性。
chrome除錯工具高階不完整使用指南（基礎篇）
chrome除錯工具高階不完整使用指南（優化篇）
chrome除錯工具高階不完整使用指南（實戰一）
chrome除錯工具高階不完整使用指南（實戰二）
chrome除錯工具高階不完整使用指南（基礎篇）
由於chrome瀏覽器一直在不斷的進行更新迭代，會不斷的新增功能，有一些老的功能會被摒棄掉，所以我們介紹這個功能的時候是以這個系列文章發布時候的最新版為主 2018 01 05 1.用來選擇所需要的html元素，通過html元素定位到elements中的對應 2.用來在手機模式和電腦模式之間做切換的...
chrome除錯工具
今天在除錯bug的時候有乙個需求，我需要知道我的 中有哪些地方在修改body的style，然後我想到了dom節點監聽。為body新增斷點然後開始除錯，但是現在的前端技術棧太複雜，即使打了斷點也會跳進第三方包裡。呼叫棧裡有太多無關的js 妨礙除錯。所以你可以選中檔案右擊後，選擇blackbox scr...
chrome 除錯工具的使用
elements chrome devtools 中 elements panel 是審查 dom 元素和 css 的,可以實時修改 dom css.節點右鍵,如下圖,可以 除了右鍵,還可以 ctrl z 撤銷修改 在呼叫堆疊這裡可以切換到堆疊中的任何地方重新執行 右鍵restart frame 如...