FireFox调试代码(很强大)

Firefox调试技巧:前端与网络请求深度解析
本文介绍了使用Firefox浏览器进行前端调试的方法,包括控制台查看资源加载、调试器设置断点检查JS变量、网络面板分析HTTP请求与响应,帮助开发者定位和解决问题。

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

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

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

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

第二个是控制台,

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

第三个是调试器,

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

第四个是样式编辑器,

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

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

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

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

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

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

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

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

评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值