對於每個前端開發者來說，除了F5和Ctrl C+V （大霧） 之外，用的最多的恐怕就是F12 Chrome開發者工具了。對於這個工具，相信很多前端同學都瞭解不少使用的技巧，但是系統地學習過它的人卻不多，今天咱們就一起完整地學習一下它的功能和使用方法，你也許會發現很多之前“用錯”的工具呢。
本文中採用的示例和截圖，來自於葡萄城前端表格產品SpreadJS，大家手邊如果沒有相關環境也不影響學習，我們今天的主題還是Chrome 開發者工具。
首先開啟谷歌瀏覽器，進入SpreadJS線上表格編輯器示例。透過F12（快捷鍵：Ctrl+Shift+I 或者Cmd+Shift+I ）或者透過右鍵選單項的“檢查“選單項來開啟開發者工具。在開發者工具中，最核心的功能就是功能面板。如下圖所示，包括了選擇元素、裝置模式以及元素、控制檯、原始碼等。
元素：
用於檢視網頁中的html結構與css樣式 ；
控制檯：
瀏覽器中輸入控制檯資訊，js指令碼執行過程中，輸出執行狀態可以在控制檯檢視；
原始碼：
原始碼與靜態資源，進行網站原始碼的除錯、檢視、編輯；
網路：
每一個網站都有後臺web伺服器，網站前端與伺服器http互動過程中，可以檢視網路日誌，可以檢視除錯；
效能：
分析網站效能狀態，js指令碼執行效能、網頁渲染效能、 後端請求效能；
記憶體：
當前網頁記憶體情況，是否存在記憶體洩漏；
應用：
檢視網頁的快取資訊，如cookie、loocalStroage等；
滑鼠點選圖示後變為藍色背景。此時將滑鼠移至網頁中，會發現滑鼠移到某個頁面元素上時，右側開發者工具”元素”面板會高亮對應dom結構。
滑鼠點選圖示啟用瀏覽器模擬器。
將滑鼠移到裝置上可檢視圓形“觸控”游標。這將對基於觸控的 JavaScript 事件（ 如touchstart，touchmove和touchend）做出反應。滑鼠特定的事件和 CSS 效果不會 做出反應。SpreadJS 控制元件已針對觸屏進行最佳化，方便使用者在移動端使用。啟用瀏覽器模擬器後，可以檢視SpreadJS的移動端使用情況。如下圖所示：
其次還可以透過拖拽控制檯，修改尺寸，動態修改當前網頁解析度。
這時候有小夥伴發現我的開發者工具一直停留在網頁右側，如果此時想修改位置，怎麼辦呢？可以設定停靠模式：在新頁面開啟；左側；右側；下側等。如下圖所示：
在元素面板中，分為左右兩欄，左欄顯示整個文件的dom結構，樹形結構。在此面板中選擇特性dom元素，右側會顯示更詳細的屬性資訊。
透過元素選擇器選中元素後，可以直接修改dom元素。選中顏色高亮，雙擊，進入編輯狀態，修改dom元素，是實時發生的。
透過右鍵選單 可以進行新增屬性、 修改屬性、刪除屬性、複製貼上元素（原地複製）、
複製（可以複製多種格式如：複製outerHtml、selector、js路徑、樣式、xPath、完整xPath）、隱藏元素、強制執行狀態（：hover、：focus）、儲存為全域性變數等
選中元素後，可以修改樣式。如下圖所示，直接修改線上表格編輯器高度，將‘100%’改為‘1024px’。
同時修改樣式時，支援顏色選擇器（實時預覽顏色 顏色 透明度，編碼方式）、支援陰影選擇器等。
在控制檯面板中，有如下功能：
1、控制檯可以清空或者儲存歷史，如下圖所示。在控制檯輸入資訊後，可以右鍵選擇相應操作。
2、透過上下鍵來切換控制檯程式碼歷史。
3、透過關鍵字來搜尋控制檯資訊。
4、建立控制檯實時表示式。
線上表格編輯器例項化了一個Designer元件，在控制檯中可以對其進行操作。第一步根據dom節點獲取Designer例項物件，其次可以透過getWorkbook（）方法獲取WorkBook例項物件spread。由於一個工作簿可能存在多個sheet表單，所以這裡可以透過getActiveSheet（）方法獲取下表單例項sheet。在sheet基礎上，可以為當前表單設定單元格值，設定列寬等等。
var designer = GC。Spread。Sheets。Designer。findControl（document。querySelector（“#gc-designer-container”））var spread = designer。getWorkbook（）var sheet = spread。getActiveSheet（）；sheet。setValue（0，0，‘hello，Spread’）sheet。setColumnWidth（0，100）
5、控制檯程式設計介面
1） console。log 最常用 / console。warn / console。error
2） console。assert
3） console。time / console。timeEnd
4） console。group / console。groupEnd / console。groupCollapsed
5） console。table
6） console。clear
下面就分別來看看著六種控制檯列印介面用法吧
1、console。log（） 支援列印字串，數字，物件，物件等等。同時還可以設定字型顏色，如console。log（‘%c hello ，SpreadJS’，‘color：red’）； 為‘ hello ，SpreadJS’ 設定了紅色字型。執行結果如下圖所示：
cosole。warn（） 列印警告，會出現黃色背景，與感嘆號符號。執行結果如下圖所示：
onsole。erroe（） 列印報錯資訊，會出現紅色背景與錯誤符號。執行結果如下圖所示：
2、console。assert（） 列印斷言，如果斷言為假，則進入控制檯，如果斷言為真，則不會發生任何事情。
在本文前面部分，我們講了如何獲取designer物件，繼而獲取了當前活動表單sheet，其實獲取表單的方法不只是getActiveSheet（），還有getSheet（）、getSheetByName（）等方式，那麼透過console。assert來判斷下這幾種方式獲取的表單例項是不是同一個呢？如下程式碼：
var sheet_2 = spread。getSheet（1）；
console。assert（sheet==sheet_2 ，‘期待兩個例項是一樣的’）；
var sheet2 = spread。getSheetFromName（‘Sheet2’）；
console。assert（sheet==sheet2 ，‘期待兩個例項是一樣的’）；
執行結果如下圖所示：
那麼，如果斷言失敗，會怎麼樣子呢？這裡獲取了索引位置為0的表單與索引為1的表單進行了斷言，如下所示：
3、console。time（） / console。timeEnd（） 可以用來獲取自從執行console。time（）到執行console。end（） 中間時間。
在使用SpreadJS中，官方建議如果設定大資料量的更新時，可以使用掛起繪製與恢復繪製來提高效能，咱們來對比下使用與不用這個方法的具體時間差吧，
下圖一是使用了suspendPaint/resumePaint 方法，為100行10列的單元格設定資料，一共耗時81毫秒。
下圖二是沒有使用suspendPaint/resumePaint 方法，一共耗時21294毫秒。差距還是挺大的。
4、console。group（）控制檯輸入樹形結構，如下圖所示：
console。group（）組合使用建立二級節點，如下圖所示：
5、console。table（）可以打印表格結構，如下圖所示：
6、console。profile（） 可以進行效能分析。
在原始碼面板中，大概分成三欄，左側展示資源樹，中間為開啟的原始碼內容，右側除錯工具包括斷點，呼叫堆疊等。在原始碼面板中，主要功能為檢視程式碼，除錯程式碼。其中在檢視程式碼過程中，可以進行美觀輸出。
現在大部分原始檔為了提供效能，提供壓縮後的檔案，如果遇到某行程式碼報錯，開啟原始檔看到一堆程式碼非常不利於閱讀，此時可以透過原始檔下方大括號的圖示來進行美化程式碼。
在除錯程式碼過程中，可以透過打斷點方式來除錯程式碼，如何打斷點呢？定位到目標行數，在行數左側輕輕點一下，會出現一個藍色小圓點，此時斷點就ok了。當網頁執行到該程式碼時，就會觸發DeBug模式。
在網路面板中，可以獲取資源與檢視日誌。
限於篇幅，今天的分享先到這裡，更復雜的應用場景以後會持續給大家分享，歡迎關注。
