Debug：前後端交互的斷點調試(Pycharm & F12-Console)

在 Django 的一個項目中，出現一個 bug ，藉着這個問題，記錄一下調試的過程。

1. bug出現的場景

在“新建接口集”時，輸入正確格式的數據時，點擊“確定”後，返回的數據有問題，與預期不符合。

問題截圖：

2. 選擇 debug 工具

在前端的頁面進行調試，F12打開瀏覽器開發者工具進行調試。

說明：在 pycharm 中的 js 代碼中添加斷點不能 debug 進入。

在 bug 出現的頁面打開瀏覽器開發者工具（F12）：

3. 前端post數據給後端

首先，點擊“新建接口集”（我是在這裏出的 bug ），填寫數據後點擊“確定”後提交（可見問題截圖）；

接着後端就拿到了前端傳來的數據：

後端處理數據，主要是把前端的數據寫入數據庫，這一步操作沒有問題。
通常後端成功做了某操作，要給前端一個提示，問題就在這一步。
於是往後走，馬上就要到後端返回數據後出錯的地方了，所以在後端給前端 response 前，在前端添加斷點。

4. 在前端添加斷點

前一步點擊collections.js後，就來到了這裏，然後根據業務，因爲我是新建接口集，找到這片代碼的位置，在可能出現的地方添加斷點。

5. 後端返回response

回到後端代碼中，添加斷點後，才能讓後端給前端返回 response，否則來不及添加斷點程序就跑完了。

執行下一步讓 JsonResponse 把數據返回給前端，讓前端渲染展示出成功的結果提示。可以看到，後端傳給前端數據的流程，停在了斷點處：

6. 利用console調試

因爲傳到前端的數據比較長，在調試時沒有全部展示出來，可以在 console 界面中打印：

可以發現問題所在：傳到前端的數據，其中的 errno 的值不等於 ''0"，所以無法進入前端成功創建的語句分支中，而是進入了 else 分支，那麼我需要結束此次調試然後重新改代碼、填寫數據來調試嘛？

不需要，因爲還沒有進入關鍵分支語句，我可以通過 console 來修改後端傳來的數據，然後驗證正確的數據傳入以後、前端代碼的執行流程。

發現 bug 根源在於後端傳給前端的數據中 errno 的值不是 “0” 的問題，如果直接下一步可以肯定進入 else 語句，於是在上一步中在 console 中修改正確的數據後，再回到 Sources 中執行下一步。

終於讓數據有了走了正確的道路（前端代碼終於走對了分支），於是界面的提示也就正確了。

由於本次演示最後這張圖不容易截取到， 所以試了好幾次（那個測試數據也有略微的差異）。

終於完成了本次的斷點調試，說難不難。coding 過程中出現的大部分問題，通過添加斷點來 debug 應該是最佳最有效率的方式了吧，感覺調試的技巧還有很多，慢慢積累學習。