前端的Debug調試

目錄：
  1. alert、confirm；
  2. console
  3. element
  4. breakpoint
  5. network

  Debug，快速定位，，理順邏輯，調試代碼。看到後端使用Debug，總會露出羨慕的小眼神。於是手指輕跳，前端也有自己的 Debug。如 console.log，confirm，alert，Breakpoint 等，在此備忘。

  alert()，confirm()，雖然也可以起到調試的作用，但是它適合傳達信息的場景就是有限的，因爲它會使甚至關閉窗口這樣的操作無效化。而且 alert 的樣式也依賴於瀏覽器的默認樣式，並且只能顯示文本，不適合自定義。總的來說就是阻塞頁面加載，降低網頁的性能與質量。

  接下來的內容需要藉助 Chrome，就先大致記錄一下。瀏覽網頁的時候，有以下兩種方式打開菜單欄，打開之後如下圖：
  1）Ctrl+shift+i ;
  2) F12;

 

 
  下面介紹一下常用的功能：Elements(要素)、Console(控制檯)、Sources(起源)、Network(相互關係)；
Elements(要素)
  如下圖，點擊一下調試畫面的箭頭，再將鼠標放到需要查看瀏覽器頁面標籤位置，即可看到對應的標籤詳細信息，如 HTML、CSS 等，這個頁面看到的信息也就是我們工具中寫的代碼信息；
 

 
Console（控制檯）
  目前大多數前端都會使用 console.log 進行調試，如用console.log來進行輸出一些變量的值，輸出一段標記性提示。同時console還有其它的用處、技巧。首先console是可以分類輸出的，效果如下圖。爲什麼要分類輸出呢，這樣我們其實是可以通過chrome這個調試工具進行過濾等級，比如我們只想顯示錯誤的輸出信息，屏蔽掉其他的輸出，我們可以選擇Filter旁邊的下拉框，來進行顯示哪些調試級別的信息。
  console.log(‘文字信息’);
  console.info(‘提示信息’);
  console.warn(‘警告信息’);
  console.error(‘錯誤信息’);
 

 
sources（源碼）（debug）
  先在 sources 畫面打上斷點（breakpoint），再點擊頁面查詢按鈕（這裏在什麼地方打斷點，主要看我們是想調試什麼部分，我們要先行預判，這裏我們模擬查詢報錯，所以我們在查詢的地方設置斷點，點擊畫面的查詢按鈕），進入Debug模式：
下面這個畫面就是前端debug中相對重要的部分：
1、
 -（三角形）debug執行鍵
 基本類似於後臺debug的調試鍵；
 -（等號）
 暫停腳本執行。
2、
 -（半弧箭頭）step 快捷鍵：F9
 單步執行 注意：遇到子函數會進去繼續單步執行。
3、
 -（下箭頭）step into 快捷鍵：F11
 單步執行，遇到子函數就進去繼續單步執行；
 -（上箭頭）step over 快捷鍵：F10
 單步執行，遇到子函數並不進去，將子函數執行完並將其作爲一個單步；
 -（右箭頭）step out 快捷鍵：Shift + F11
 直接跳出當前的函數，返回父級函數。
4、
 -（右粗箭頭，點擊一下多一個斜線，再次點擊就取消了）
 禁用斷點/啓用斷點
 -（圓形等號）
 暫停執行
5、
 Watch:
 在調試畫面需要查詢返回值或者參數詳細信息的時候，可以選中相應的部分單擊鼠標右鍵，再點擊Add selected text to watches ,即可在這裏看到我們選中部分的詳細信息。
  我們前端應該經常用到這個調試技巧，它會讓我們的前端水平極大的提升，可以直接調試一些框架代碼。這樣就能夠研究透一些自己不理解的痛點。
 

 
Network（前後臺交互）
  可以看到我們前後臺交互信息是否正常，也就是我們前臺的方法是否正常請求到後臺，請求了後臺的哪些方法，後臺是否有做出響應。然後再判斷後臺對前臺的請求處理結果是否正確，這裏我們可以根據 Response，查看到後臺響應過後的返回結果，並根據返回結果判斷問題出現在前臺還是後臺。