前端调试

本文介绍如何使用F12进行前端调试,特别针对Chrome浏览器的操作方法进行了详细说明。文章还讨论了如何利用Network面板检查请求信息,并提供了AngularJS调试时遇到异步问题的解决方案。此外,还介绍了使用Fiddler的AutoResponder功能来替换服务器上的JavaScript文件。
E:\GitHub\javanotesbig\java待上传github代码\\工具杂项tools\前端调试.txt 前端用f12也可以debug,以chrome为例,方法是找到当前页面的代码(在sources里),
点击左侧某一行的行号,变成蓝色则表示打断点成功。之后一步一步调试即可。
可以结合network查看请求的地址、是否请求成功和请求的返回值等。

======================================================================

注意angularjs调试时有时会不进入方法,如下面代码:
可以发现后台有接收到goodsService.findAll()的请求,
但前端debug时走到success后直接跳到最后一行,不进function(response)这个方法。
但后来添加alert(9)可以发现依旧不进,但是一段时间后会alert(9)。
原因应该是异步,不等待请求数据返回。

    $scope.findAll=function(){
        goodsService.findAll().success(
            function(response){
                alert(9);
                $scope.list=response;
            }            
        );
    }

======================================================================
    
使用fiddler的autoresponder可以把服务器的js替换成本地js,
方法是选择想要替换的js,add rule,下面的rule editor就是替换规则,
在第二个输入框输入自己的js的路径,点save保存.然后勾选enable rules和
unmatched requests passthrough(否则不符合规则的请求全部被拦截而失效)即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值