前言
我使用的是chrome瀏覽器，開發工具為IDEA，我做的是JAVA開發，但是經常在開發過程需要前台調試，之前一直懵懵懂懂，故此做下筆記，以供參考。
調試菜單欄介紹
快捷鍵Ctrl + Shift + i ,打開調試菜單欄，如下圖：
在此畫面中，我常用的是前四個：Elements(要素)、Console(控制台)、Sources(起源)、Network(相互關系)；下面詳細解釋下各個畫面的操作方法步驟與其含義：
1.Elements以及調試畫面箭頭作用：
首先，點擊一下調試畫面的箭頭，再將鼠標放到需要查看瀏覽器頁面標簽位置，即可看到對應的標簽詳細信息，這個頁面看到的信息也就是我們工具中寫的JSP信息；
2.Console（控制台）
這個頁面為控制台頁面，即在這個頁面我們可以打印出一些我們需要調試的參數值信息以及一些其他的我們需要知道的元素或者方法返回值等。。。避免了我們重新啟動和debug步驟；這個里面的需要查詢的參數值或者方法我們可以在sources中獲取；
3.sources（源碼調試）
先在sources畫面打上斷點，再點擊頁面查詢按鈕（這里在什么地方打斷點，主要看我們是想調試什么部分，我們要先行預判，這里我們模擬查詢報錯，所以我們在查詢的地方設置斷點，點擊畫面的查詢按鈕），進入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 ,即可在這里看到我們選中部分的詳細信息；
4.Network（前后台交互）
首先可以看到我們前后台交互信息是否正常，也就是我們前台的方法是否正常請求到后台，請求了后台的哪些方法，后台是否有做出響應。然后再判斷后台對前台的請求處理結果是否正確，這里我們可以根據Response，查看到后台響應過后的返回結果，並根據返回結果判斷問題出現在前台還是后台。
小主們，有用的點個贊再走唄，小海在這里謝過諸位啦！