控制台打開：F12或者快捷鍵Ctrl+Shift+J
箭頭圖表：
用于在頁面選擇一個元素來審查和檢視它的相關資訊，當我們在Elements這個按鈕頁面下點選某個Dom元素時，箭頭按鈕會變成選擇狀态
裝置圖示：點選它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端裝置，同時可以選擇不同的尺寸比例，chrome浏覽器的模拟移動裝置和真實的裝置相差不大，是非常好的選擇
選擇Dock side
Elements功能标簽頁：用來檢視，修改頁面上的元素，包括DOM标簽，以及css樣的式檢視，修改，還有相關盒模型的圖形資訊下圖我們可以看到當我滑鼠選擇id 為wrapper的div元素時，右側的css樣式對應的會展示出此id 的樣式資訊，此時可以在右側進行一個修改，修改即可在頁面上生效， 灰色的element.style樣式同樣可以進行添加和書寫，唯一的差別是，在這裡添加的樣式是添加到了該元素内部，實作方式即：該div元素的style屬性，這個頁面的功能很強大，在我們做了相關的頁面後，修改樣式是一塊很重要的工作，細微的差距都需要調整，但是不可能說做到每修改一點即編譯一遍代碼，再重新整理浏覽器檢視效果，這樣很低效，一次性在浏覽器中修改之後，再到代碼中進行修改
Console控制台：用于列印和輸出相關的指令資訊，
Console的API功能 控制台的核心對象是console,如果需要檢視console有哪些方法何屬性，可以直接在Console中輸入“console”并執行
Console
提示資訊：console.info()
警告提示：console.warn()
報錯提示：console.error()
基本輸出：console.log();
調試輸出：console.debug()
代碼跟蹤：console.trace()
代碼執行次數統計：console.count()
對象輸出：console.dir()
輸出DOM節點：console.dirxml()
輸出代碼執行時間：console.time(),console.timeEnd()
輸出代碼細節：console.profile(),console.profileEnd()
分組輸出資訊：console.group(),console.groupEnd()
格式化輸出數組或對象：console.table()
清空控制台：console.clear()
Sources js資源頁面：這個頁面内我們可以找到當然浏覽器頁面中的js 源檔案，友善我們檢視和調試，在我還沒有走出校園時候，我經常看一些大站的js代碼，那時候其實基本都看不懂，但是最起碼可以看看人家的代碼風格，人家的命名方式，所有的代碼都是壓縮之後的代碼，我們可以點選下面的{}大括号按鈕将代碼轉成可讀格式
Network 網絡請求标簽頁：可以看到所有的資源請求，包括網絡請求，圖檔資源，html,css，js檔案等請求，可以根據需求篩選請求項，一般多用于網絡請求的檢視和分析，分析後端接口是否正确傳輸，擷取的資料是否準确，請求頭，請求參數的檢視
本文轉自：https://blog.csdn.net/xueer767/article/details/65936204
感謝總結！！