chrome瀏覽器debug

Chrome瀏覽器審查元素

1.Elements標籤頁

Elements標籤頁的左側就是對頁面HTML結構的查看與編輯，你能夠直接在某個元素上雙擊修改元素的屬性。

1.Edit as HTML直接對元素的HTML進行編輯，或者刪除某個元素，全部的修改都會即時在頁面上獲得呈現。

2.Copy能夠將HTML代碼直接複製下來，在拷貝別人網站上面的HTML代碼的時候灰常方便，你懂的~~

3.Delete node刪掉一個HTML Node

4.Break on能夠對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處

Elements標籤頁的右側能夠對元素的CSS進行查看與編輯修改：

 

2.Network標籤頁

Network標籤頁對於分析網站請求的網絡狀況、查看某一請求的請求頭和響應頭還有響應內容頗有用。注意是在你打開Chrome開發者工具後發起的請求，纔會在這裏顯示的哦。

點擊左側某一個具體請求URL，能夠看到該請求的詳細HTTP請求狀況：

咱們能夠在這裏看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息。

1. Headers請求頭信息和響應頭信息
2. Preview預覽結果，若是是文件能夠查看這個文件；若是是圖片能夠預覽這個圖片；若是是從服務器返回來的JSON數據，能夠查看格式話後的JSON
3. Response從服務器返回的響應結果
4. Cookies請求和響應的Cookie
5. Timing具體的響應時間

3.Resources標籤頁

Resources標籤頁能夠查看到請求的資源狀況，包括CSS、JS、圖片等的內容。也能夠設置各類斷點。對存儲的內容進行編輯而後保存也會實時的反應到頁面上。

 

4.Timeline標籤頁

注意這個Timeline的標籤頁不是指網絡請求的時間響應狀況，這個Timeline指的JS執行時間、頁面元素渲染時間

5.Profiles標籤頁

主要是作性能優化的，包括查看CPU執行時間與內存佔用

6.Audits標籤頁

這個對於優化前端頁面、加速網頁加載速度頗有用

Google chrome在「開發者工具」中提供了相似 dust-me 的冗餘css檢測功能。 chrome用戶能夠在Audits面板內使用這個功能： 選擇 Web Page Performance 選框並點擊Run，會獲得相似以下格式的提示

Remove unused CSS rules (185)35.39KB (51%) of CSS is not used by the current page.> my.release.css: 35.39KB (51%) is not used by the current page.

這裏顯示了當前頁面加載但沒有用到的css樣式文件和樣式名稱列表，點擊css文件名前的 箭頭能夠展開獲得一個列表。若是冗餘內容不多，就能夠直接分析一下而後到文件內刪掉了。 須要注意的是，這個功能只是分析當前頁面，因此不少其餘頁面須要但當前頁沒有使用的樣式 也會列出。因此須要謹慎操做，徹底肯定了是冗餘的樣式，再手工清除。

我主要用這個功能去除一些想要借鑑的頁面中冗餘的css，都是從網站上直接保存來的單獨頁面。 因此我自制了批量清理工具。

我進行批量清理的步驟（因爲Audits會將不少全局css認做unused，故批量清理比較危險，僅做學習使用）：

1.將冗餘的css列表保存成keys.txt

2.通常下載來的css都是壓縮後的，不方便查看，這裏我先將加密的css文件格式化：Replace regexp (default } -> }^J): RET

3.打開 keys.txt 和 須要精簡的css文件，在 * scratch * 內使用 C-x C-e 執行如下代碼： 因爲chrome分析出的結果可能重複，這段小程序使用了cl的去重方法。

(let ((sbuf (get-buffer "style.css")) (kb (get-buffer "keys.txt")) (keys nil)) (set-buffer kb) (goto-char (point-min)) (while (not (eobp)) (push (buffer-substring (point-at-bol) (point-at-eol)) keys) (next-line) ) (set-buffer sbuf) (goto-char (point-min)) (require 'cl) (dolist (x (remove-duplicates keys :test #'equal)) (replace-regexp (concat x "{.*}\n") "") (goto-char (point-min)) )

)

7.Console標籤頁

就是Javascript控制檯了：

在這個面板能夠查看錯誤信息、打印調試信息（console.log()）、寫一些測試腳本，還能夠看成Javascript API查看用。

console對象提供瀏覽器控制檯的接入，不一樣的瀏覽器工做的方式是不同的，這裏介紹一些大都會提供的接口api。

console方法

Console.assert()

判斷第一個參數是否爲真，false的話拋出異常而且在console輸出相應信息。

Console.count()

以參數爲標識記錄調用的次數，調用時在console打印標識以及調用次數。

Console.debug() 

console.log方法的別稱，使用方法能夠參考Console.log()

Console.dir()

打印一條以三角形符號開頭的語句，能夠點擊三角展開查看對象的屬性。

Console.error()

打印一條錯誤信息，使用方法能夠參考 string substitution。

Console._exception()

error方法的別稱，使用方法參考Console.error()

Console.group()

打印樹狀結構，配合groupCollapsed以及groupEnd方法;

Console.groupCollapsed()

使用方法和group相同，不一樣的是groupCollapsed打印出來的內容默認是摺疊的。

Console.groupEnd()

結束當前Tree

Console.info()

打印以感嘆號字符開始的信息，使用方法和log相同

Console.log()

打印字符串，使用方法比較相似C的printf格式輸出，可參考 string substitution 。

Console.profile()

能夠以第一個參數爲標識，開始javascript執行過程的數據收集。和chrome控制檯選項開Profiles比較相似，具體可參考chrome profiles

Console.profileEnd()

配合profile方法，做爲數據收集的結束。

Console.table()

將數據打印成表格。Console.table [en-US]

Console.time()

計時器，接受一個參數做爲標識。

Console.timeEnd()

接受一個參數做爲標識，結束特定的計時器。

Console.trace()

打印stack trace.

Console.warn()

打印一個警告信息，使用方法能夠參考 string substitution。