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 应该是最佳最有效率的方式了吧，感觉调试的技巧还有很多，慢慢积累学习。