『壹』 Chrome瀏覽器F12開發者工具的幾個小技巧總結
1、直接修改頁面元素
選擇頁面上元素，右鍵「檢查」，會打開開發者工具窗口，顯示當前選擇元素的源代碼，可以雙擊進行修改。
如果要修改的東西比較多，可以折疊元素並單擊選擇，再右鍵Edit as HTML修改。
2、顏色取色器
選擇頁面上元素，右鍵「檢查」，會打開開發者工具窗口，在Styles窗口中，點擊一個樣式的color右邊小方塊（如沒有color可自己輸入如color:red），會彈出顏色拾取器，可以在上面顏色畫板上選擇一個顏色，也可以選擇「筆」圖標可以拾取頁面上元素的顏色。
3、快速查找並定位文件
查看源代碼，滑鼠移到開發工具窗口，按ctrl+p，輸入鏈接地址的前幾個字母，會自動聯想顯示所有符合條件的地址，點擊打開即可。（有時第一次打開是空白內容，可再點擊一次鏈接）
打開之後，如果是js內容，就可以直接在上面打斷點調試，另外可以點擊內容框的左下角大括弧圖標「{ }」(pretty print)，對代碼進行排版美化。
4、編輯源代碼
（1）【Console】下面輸入框輸入，不過按回車不是換行，會直接執行，如果有多行代碼，需要在別的地方寫好再粘貼進去。
（2）【Sources】下面，點擊左上角第二行Sources旁邊的「>>」打開Snippets，點擊「+ New Snippet」新建一個文件編輯腳本，寫完右鍵「Save」保存，再右鍵點擊這個文件「Run」運行。
說明，如果是要覆蓋頁面js代碼：
如果是函數，則是直接以相同的函數名稱重寫方法即可。
如果是要覆蓋頁面js代碼的按鈕事件，則需要重新注冊該事件，否則相同的多個事件會全部響應。
$('#id').off().on(function() {
alert('test');
});
5、只分析非同步請求資源
【Network】下面點擊「XHR」，這樣就只會顯示XHR非同步請求資源，以便於快速分析請求Headers和Response。