debug

• 設定debug啟動後自動啟用視窗：setting > build > debugger > Show debug window on breakpoint
  

• 後端程式碼打上斷點後，使用dubug模式執行該專案；例如我們在處理登入請求的方法上打兩個斷點
  

• 前端頁面操作後，後臺自動啟用Debug視窗；這裡我們輸入使用者名稱和密碼，點選提交
  

• 這時按快捷鍵F8，斷點處的程式碼會一步步執行
  

熱部署

• 使用debug的方式，當我們修改程式碼後，需要重新啟動伺服器；而使用JRebel熱部署：每次修改程式碼後，不用重新啟動，自動部署

• 獲取jrebel的啟用碼，開啟網址：

  https://my.jrebel.com/

• 輸入姓名、郵箱、號碼、公司、區域後註冊賬號，啟用碼將傳送到郵箱
  

• idea安裝外掛Jrebel，輸入啟用碼
  

• 設定自動編譯：settings -> Build,Execution,Deploymeng -> Compiler -> 勾選Build project automatiocally
  

• 同樣後端程式碼打上斷點後，點選如下，使用dubug模式執行該專案，前端頁面操作後，後臺自動啟用Debug視窗
  

idea檢視方法、物件的原始碼

• ctrl + 滑鼠右擊

postman測試後端介面

瀏覽器抓包

• 當前端頁面向後臺伺服器傳送請求，我們可以使用瀏覽器抓取攜帶的引數
• 例如在登入頁面，輸入使用者名稱和密碼，點選提交，按F12開啟控制檯 -> Network -> Name(login) -> 詳細資訊
• 就可以清楚的看到請求的引數、相應頭、發包的資料等資訊
  

fastmock

• 當我們只有前端專案的時候，怎麼來測試呢，開啟模擬介面的網址：https://www.fastmock.site/

• 新建一個專案
  

• 建立介面
  

• 測試一下
  

console

• 當我們前端傳送請求後，返回的json資料使用console列印到控制檯

console.log(物件)
console.log(物件.鍵名)
console.log(物件.索引)

 

畫圖工具

• VSCode安裝外掛Draw.io Integration
• 新建一個字尾為drawio的檔案並用vscode開啟，非常方便