FireFox调试代码(很强大)

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

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

FireFox调试代码(很强大)_第1张图片

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

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

第二个是控制台,

FireFox调试代码(很强大)_第2张图片

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

第三个是调试器,

FireFox调试代码(很强大)_第3张图片

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

第四个是样式编辑器,

FireFox调试代码(很强大)_第4张图片

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

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

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

FireFox调试代码(很强大)_第5张图片

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

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

FireFox调试代码(很强大)_第6张图片

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

FireFox调试代码(很强大)_第7张图片

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

FireFox调试代码(很强大)_第8张图片

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

你可能感兴趣的:(杂项)