码迷,mamicode.com
首页 > 其他好文 > 详细

FireFox调试代码技巧

时间:2016-10-31 12:52:53      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:user   sts   返回   gravity   http   cxf   use   文件   开发工具   

本文版权归 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,再来分享!

FireFox调试代码技巧

标签:user   sts   返回   gravity   http   cxf   use   文件   开发工具   

原文地址:http://www.cnblogs.com/itfantasy/p/6015248.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!