FireFox调试代码技巧

Posted 2020-08-16

本文版权归 csdn DyncRole 所有，此处为技术收藏，如有再转请标明原创作者及出处，以示尊重！

作者：DyncRole

原文：http://blog.csdn.net/qqhjqs/article/details/41889413

这些天做的任务出现好多的错误，但是我也局限于再开发工具eclipse上调试，但是传到前台的数据没有办法调试，找经理来解决问题，被吵了，同时也学到一些小的技巧，在这里记下来，不是很全面，以后学到更多再来更新。

打开火狐浏览器，按“F12”，页面下方会出现这样的界面：

我设置了黑色样式，右上角有齿轮的图标，可以在那里修改样式

第一个是查看器，直接查看html脚本，右边是一些样式，这个功能我暂时用不到；

第二个是控制台，

从下面就可以看到，它的功能就是再页面加载的时候加载的以下css样式文件，js文件和安全信息，日志文件，这里我有用到，观察自己引入的js文件有没有路径错误或者js文件里面有没有语法错误等等，这些再eclipse是无法看到的，这一点我很喜欢；

第三个是调试器，

这个直接在前台对js文件进行调试，可以打断点，右边可以看到用到的变量和事件，比如你声明的变量获取到什么值之类的，这里都可以看到（前提是打断点）;

第四个是样式编辑器,

这个我也用不到，属于前端人员用的，调样式什么的；

第五个是性能，我一点也没有用到，暂且不说；

第六个是网络，我用的最多，也很牛逼，

这个界面就是在你点击网页上的链接，发送给服务器的请求，与接受到服务器的响应都在这里显示，如上面的GET与POST，get是发送的请求后面有格式大小与时间，post是服务器响应的结果；

然后你点击请求比如上面的“listSubOrgTreeNode.do?orgType=1”，右面会出现这个请求的所以信息

这里你可以检查发送的请求对不对，和你想要发送的是否一致，参数可以在参数选项中查看

一切都正确之后再检查服务器响应返回的数据，点击响应

请求是要求服务器返回是JSON数据，果然响应里出现的就是JSON数据，OBJECT就是数据组，到此一个请求的发送与响应检查完毕！这样的调试可以直接确认你写的代码是前台还是后台除了错误，或者再发送请求或这再接受响应的时候参数或数据对不对！这一点省了我很多的时间，就到这里，等学到新的skill，再来分享！