Console()
- Ctrl + L : 清除控制台消息
- Enter: 執行代碼或者指令
Debugger(調試面闆)
- F8 or Ctrl + \: 暫停/繼續
- F10 or Ctrl + ': 單步執行
- F11 or Ctrl +;: 單步進入
- Shift + F11 or Ctrl + Shift+;: 單步退出
- Ctrl +./Ctrl+, : 上一幀/下一幀(譯為架構怪怪的)
- Ctrl +Shift+E: 被選中代碼在控制台中列印出console資訊(非常實用)
- Ctrl + Shift + A: 添加到debugger的watch裡面,可以關注你選中内容的變化
- Ctrl + B: 打斷點/取消斷點(很實用)
Timeline Panel(時間軸面闆)
- Ctrl + E:開始
- Ctrl + S:儲存時間軸資料
- Ctrl + O:加載時間軸資料
一. 先來認識一下這些按鈕
先來看這張圖最上頭的一行是一個功能菜單，每一個菜單都有它相應的功能和使用方法，依次從左往右來看
1.箭頭按鈕：用于在頁面選擇一個元素來審查和檢視它的相關資訊，當我們在Elements這個按鈕頁面下點選某個Dom元素時，箭頭按鈕會變成選擇狀态
2.裝置圖示：點選它可以切換到不同的終端進行開發模式，移動端和pc端的一個切換，可以選擇不同的移動終端裝置，同時可以選擇不同的尺寸比例，chrome浏覽器的模拟移動裝置和真實的裝置相差不大，是非常好的選擇
可選擇的适配
3.Elements 功能标簽頁：用來檢視，修改頁面上的元素，包括DOM标簽，以及css樣式的檢視，修改，還有相關盒模型的圖形資訊，下圖我們可以看到當我滑鼠選擇id 為lg_tar的div元素時，右側的css樣式對應的會展示出此id 的樣式資訊，此時可以在右側進行一個修改，修改即可在頁面上生效， 灰色的element.style樣式同樣可以進行添加和書寫，唯一的差別是，在這裡添加的樣式是添加到了該元素内部，實作方式即：該div元素的style屬性，這個頁面的功能很強大，在我們做了相關的頁面後，修改樣式是一塊很重要的工作，細微的差距都需要調整，但是不可能說做到每修改一點即編譯一遍代碼，再重新整理浏覽器檢視效果，這樣很低效，一次性在浏覽器中修改之後，再到代碼中進行修改
- 對應的樣式
- 盒模型資訊
同時，當我們浏覽網站看到某些特别炫酷的效果和難做的樣式時候，打開這個功能，我們即可看到别人是如何實作的，學會它這知識就是你的了，仔細鑽研也會有意想不到的收獲
4.Console控制台：用于列印和輸出相關的指令資訊，其實console控制台除了我們熟知的報錯，列印console.log資訊外，還有很多相關的功能，下面簡單介紹幾個：
a: 一些對頁面資料的指令操作，比如打斷點正好執行到擷取的資料上，由于資料都是層層嵌套的對象，這個時候檢視裡面的key/value不是很友善，即可用這個指令開檢視，obj的json string 格式的key/value，我們對于資料裡面有哪些字段和屬性即可一目了然
其他功能
b: 除了console.log還有其他相關的指令可用
console也有相關的API
5.Sources js資源頁面：這個頁面内我們可以找到當然浏覽器頁面中的js 源檔案，友善我們檢視和調試，在我還沒有走出校園時候，我經常看一些大站的js代碼，那時候其實基本都看不懂，但是最起碼可以看看人家的代碼風格，人家的命名方式，所有的代碼都是壓縮之後的代碼，我們可以點選下面的{}大括号按鈕将代碼轉成可讀格式
Sources Panel 的左側分别是 Sources 和 Content scripts和Snippets
- 對應的源代碼
- 格式化後的代碼
關于打斷點調試的内容，下面介紹，先來說一些，其他平時基本沒人用但是很有用的小點，比如當我們想不起某個方法的具體使用時候，會打開控制台随意寫一些測試代碼，或者想測試一下剛剛寫的方法是否會出現期待的樣子，但是控制台一打回車本想換行但是卻執行剛寫的半截代碼，是以推薦使用Sources下面的左側的Sinppets代碼片段按鈕，這時候點選建立一個新的片段檔案，寫完測試代碼後把滑鼠放在建立檔案上run，再結合控制台檢視相關資訊（建立了一個名叫：app.js的片段代碼，在你的項目環境頁面内，該片段可執行項目内的方法）
- 自己書寫的片段
Content scripts 是 Chrome 的一種擴充程式，它是按照擴充的ID來組織的，這些檔案也是嵌入在頁面中的資源，這類檔案可以讀寫和操作我們的資源，需要調試這些擴充檔案，則可以在這個目錄下打開相關檔案調試，但是幾乎我們的項目還沒有相關的擴充檔案，是以啥也看不到，平時也不需要關心這塊
無結果
6.Network 網絡請求标簽頁：可以看到所有的資源請求，包括網絡請求，圖檔資源，html,css，js檔案等請求，可以根據需求篩選請求項，一般多用于網絡請求的檢視和分析，分析後端接口是否正确傳輸，擷取的資料是否準确，請求頭，請求參數的檢視
- 所有的資源
以上我選擇了All，就會把該頁面所有資源檔案請求下來，如果隻選擇XHR 異步請求資源，則我們可以分析相關的請求資訊
- 請求的相關資訊
打開一個Ajax異步請求，可以看到它的請求頭資訊，是一個POST請求，參數有哪些，還可以預覽它的傳回的結果資料，這些資料的使用和檢視有利于我們很好的和後端工程師們聯調資料，也友善我們前端更直覺的分析資料
- 預覽請求的資料
7.Timeline标簽頁可以顯示JS執行時間、頁面元素渲染時間，不做過多介紹
8.Profiles标簽頁可以檢視CPU執行時間與記憶體占用，不做過多介紹
9.Resources标簽頁會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的内容編輯和删除 不做過多介紹
10.Security标簽頁 可以告訴你這個網站的安全性，檢視有效的證書等
11.Audits标簽頁 可以幫你分析頁面性能，有助于優化前端頁面，分析後得到的報告
- 分析結果
二.Sources資源頁面的斷點調試
1.如何調試：
調試js代碼，肯定是我們常用的功能，那麼如何打斷點，找到要調試的檔案，然後在内容源代碼左側的代碼标記行處點選即可打上一個斷點
2.斷點與 js代碼修改
看下面這張圖，我在一個名為toggleTab的方法下打了兩個斷點，當開始執行我們的點選切換tab行為後，代碼會在執行的斷點出停下來，并把相關的資料展示一部分，此時可以在已經執行過得代碼處，把滑鼠放上去，即可檢視相關的具體資料資訊，同時我們可以使用右側的功能鍵進行調試，右側最上面一排分别是：暫停/繼續、單步執行(F10快捷鍵)、單步跳入此執行塊(F11快捷鍵)、單步跳出此執行塊、禁用/啟用所有斷點。下面是各種具體的功能區
- 在代碼中打斷點
在目前的代碼執行區域，在調試中如果發現需要修改的地方，也是可以立即修改的，修改後儲存即可生效，這樣就免去了再到代碼中去書寫，再重新整理回看了
臨時修改
3.快速進入調試的方法
當我們的代碼執行到某個程式塊方法處，這個方法上可能你并沒有設定相關的斷點，此時你可以F11進入此程式塊，但是往往我們的項目都是經過很多源代碼封裝好的方法，有時候進入後，會走很多底層的封裝方法，需要很多步驟才能真正進入這個函數塊，此時将滑鼠放在此函數上，會出現相關提示，會告訴你在該檔案的哪一行代碼處，點選即可直接看到這個函數，然後臨時打上斷點，按F10或者點選右上角的第二個按鈕即可直接進入此函數的斷點處
4.調試的功能區域
每一個功能區，都有它相關的左右，先來看一張圖，它都有哪些功能
Call Stack調用棧：當斷點執行到某一程式塊處停下來後，右側調試區的 Call Stack 會顯示目前斷點所處的方法調用棧，從上到下由最新調用處依次往下排列，Call Stack 清單的下方是Scope Variables清單可以檢視此時局部變量和全局變量的值。圖中可以看出，我們最先走了toggleTab這個方法，然後走到了一個更新對象的方法上，目前調用在哪裡，箭頭會幫你指向哪裡，同時我們可以點選，調用棧清單上的任意一處，即可回頭再去看看代碼
但是若你想從新從某個調用方法出執行，可以右鍵Restart Frame， 斷點就會跳到此處開頭重新執行，Scope 中的變量值也會依據代碼從新更改，這樣就可以回退來從新調試，錯過的調試也可以回過頭來反複檢視
Breakpoints關于斷點：所有目前js的斷點都會展示在這個區域，你可以點選按鈕用來“去掉/加上”此處斷點，也可以點選下方的代碼表達式，調到相應的程式代碼處，來檢視
XHR Breakpoints
在XHR Breakpoints處，點選右側的+号，可以添加請求的URL，一旦 XHR 調用觸發時就會在 request.send() 的地方中斷
DOM Breakpoints:
可以給你的DOM元素設定斷點，有時候真的需要監聽和檢視某個元素的變化情況，指派情況，但是我們并是不太關心哪一段代碼對它做的修改，隻想看看它的變化情況，那麼可以給它來個監聽事件，這個時候DOM Breakpoints中會如圖
當要給DOM添加斷點的時候，會出現選擇項分别是如下三種修改1.子節點修改2.自身屬性修改3.自身節點被删除。選中之後，Sources Panel 中右側的 DOM Breakpoints 清單中就會出現該 DOM 斷點。一旦執行到要對該 DOM 做相應修改時，代碼就會在那裡停下來
Event listener Breakpoints
最後Event Listener 清單，這裡列出了各種可能的事件類型。勾選對應的事件類型，當觸發了該類型的事件的 JavaScript 代碼時就會自動中斷
三.Post man你值得擁有的網絡請求神器
在我們的開發過程中，後端的接口都是由發起AJAX請求而擷取到的相關資料，但是很多情況是我們的業務還沒有做到那塊時，後端的同學接口都已經準備好了，但是為了便于後期的工作，将接口請求的資料模拟通路，然後對接口聯調很重要，也很友善，因為我們不可能把每個請求代碼都寫到檔案裡編譯好了再去浏覽器内檢視，這時候可以安裝一個post man網絡請求插件，在谷歌應用商店下載下傳，需要翻牆
該擴充程式使用非常簡單，功能同時也非常強大，輸入你的請求，選擇好請求的method，需要請求參數的挨個填好，send之後，就可以看到傳回的資料，這個小工具很利于我們的開發