使用浏览器自带的 NetWork 提高我们的开发效率、减少我们查找错误的时间

当我们开发web端的添加页面的时候，总是会报一些稀奇古怪的问题，尤其是导入、上传等功能。

大多数时候，页面或者后端开发工具都会给报出相应的错误，可以自己根据错误可以解决掉，但是也有很大一部分问题常用工具无法帮我们找到。如上传的时候因为MultipartFile类型的数据，导致我们什么错误也接收不到，程序就是不对，我们光知道什么反应也没有，代码就是走着走着就跟丢了似的，这时候我们需要相信的知道我们提交的数据是什么类型，携带什么参数，走到了哪里等等 。这些事情，开发工具在特殊情况下是没法提供了的，这时候我们可以使用浏览器自带的网络监控工具进行查看

诸如上面这样的表单，当我们点击保存按钮的时候，我们可以在控制台看到对应的详细的请求方式以及携带的参数和访问的时间，以及文件的加载顺序，等等：

1）如上图，圈1处说明了在15000~5000ms之间这段时间里浏览器什么也没干，就是在等待后台返回数据，也就是说在圈2处的这个方法耗时50000-15000=35000ms的时间。

2）圈1处的两个箭头的地方是可以拖动的，当你拖动他的时候，你会发现，绿色的就是访问到的文件并且长短就是加载该文件所需要的时间，你可以拖到任意地方看看某段时间内加载了什么文件，加载时携带的参数是什么。

3）然后圈2处的name和time列，在一起也说明了，每个文件加载的时间间隔是多少，加载的什么文件，加载顺序是什么顺序，每个文件加载共耗时多久，等等，从status列可以看到你的哪个文档又没有加载成功。

再如：

4）再如，因为这是一个简单的添加表单，咱们点击保存的那一瞬间，程序先干了什么，咱们怎么知道？把执行时间拖到如上图所示的地方，我们可以看到，在这段很短的时间内，程序共访问了两个后端接口：saveZkdgwhObj、getInitParamList。

5）当我们点击第一个方法 saveZkdgwhObj 的时候，我们可以清楚的看到请求的具体地址、端口号、请求状态以及详细的表单内容参数及类型，这样我们也就不用使用console什么的打印了，这样就很方便啊，省得写代码删代码，忘记删除还影响性能(可忽略)。

6）当请求失败的时候，或者请求成功没有刷新页面的时候，我们点击preview页签时我们会发现详细的错误信息，这里可以看到idea等工具看不到的错误提示信息哦。

等等等等，自己慢慢研究吧。