欢迎来到天天文库
浏览记录
ID:30777666
大小:243.49 KB
页数:11页
时间:2019-01-03
《javascript断点调试心得分享_javascript技巧》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、javascript断点调试心得分享1•断点调试是啥?难不难?断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了。操作起來似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例)ElementsSourcesConsoleNetworkTimelineProfilesResourcesSecurSourcesConten…Snippets▼Otop▼omcms.f•corn.cn▼libcssi
2、iMges/iconnewsjsremjsEnews.jsx217218219commonjsLJJEiB221]222223;224225226227228
3、229*/columnlnfo:function(typm){$("bodyfooter1').hide();news•getColumnMsg(type);news.touchNav();news.navNd();$("・swiper・container-st")・hide();//加载更多vari=l;$(”.btn-more").click(fu
4、nction(){i++;$(this).text("■正在加载"〉.prepend(nev/s・getColumnMsg(typji);5、1」201碍的“最美环湖,r东西湖的这条环金银湖的环湖路,现在可算是看到完工的曙光了!记者从施工^中建三局f司环湖路项目经理…加载更多直页电脑版400-027-1113假设我们现在止在实现一个加载更多的功能,如上图,但是现在加载更多功能出现了问题,点击以后数据没有加载出來,这时候我们第一时间想到的应该是啥?(换一行写答案,大家可以看看自己的第一反应是啥)我最先想到的是,我点击到底有没有成功?点击事件里的方法有没有运行?好,要想知道这个问题的答案,我们立马去打个断点试试看,断点打在哪?口己先琢磨一下。接着上图:6、224//加载更多225vari=l;227:226$(".btn-more").click(function(){228$(this).text("正在加载").prepend(M");229news.getColumnMsg(typei);rrc、各位想到没?没错,既然想知道点击是否成功,我们当然是在代码中的点击事件处添加一个断点,切记不要添加在226行哦,因为被执行的是click方法内的函数,而不是226行的选择器。断点现在已经打上了,然后做什7、么呢?自己再琢磨琢磨~继续上图:Pausedindebugger8、>G■348楚平路南湖大桥动工南湖居民出行…楚平路(雄楚大道一南湖大道)工程,處雄楚大道,南接南湖大道•全长约2.557公里,由既有道路改造、新建道路和跨南湖大・・£989・0武汉最高最大广告牌开始拆除30层…3月中旬r广告商花费百万元开始自拆。这块江城目前最高最大的广告牌由于拆除难度大,拆除时间预计还II半个月。加载醪JL190■0…"■I1八▼Otop206207•、▼Omcms.fdc.208►■css►limages丿2092102119、»Js212213214}},/*.nsplan.s(nodoma215216*栏目请217*/218columnlrv219$(”bod>220news.g€221news.tc222news.ru223$(“・sw:224//加载禺225vari=:226$(u.btr227i++;228$(th:229newsme然后我们当然是回去点击加载更多按钮啦,为什么?额。。。如果你这么问,请允许我用这个表情2不点击加载更多按钮,怎么去触发点击事件?不触发点击事件,怎么去执行点击事件里的函数?咆哮状。。不过我相10、信大家肯定不会问这么low的问题~不瞎扯了~继续正题,上面的图就是点击加载更多按钮后的情况,我们可以看到左侧的页面被一个半透明的层给盖住了,页面上方还有一串英文和两个按钮,右侧代码227行被添加上了背景色,出现这个情况,先不管那些按钮英文是啥意思冇啥作用,你从这个图得到了什么信息?继续琢磨琢磨~如果岀现了上图这个情况,说明一点,click事件中的函数被调用了,进一步说明了点击事件生效。那么我们对于这
5、1」201碍的“最美环湖,r东西湖的这条环金银湖的环湖路,现在可算是看到完工的曙光了!记者从施工^中建三局f司环湖路项目经理…加载更多直页电脑版400-027-1113假设我们现在止在实现一个加载更多的功能,如上图,但是现在加载更多功能出现了问题,点击以后数据没有加载出來,这时候我们第一时间想到的应该是啥?(换一行写答案,大家可以看看自己的第一反应是啥)我最先想到的是,我点击到底有没有成功?点击事件里的方法有没有运行?好,要想知道这个问题的答案,我们立马去打个断点试试看,断点打在哪?口己先琢磨一下。接着上图:
6、224//加载更多225vari=l;227:226$(".btn-more").click(function(){228$(this).text("正在加载").prepend(M");229news.getColumnMsg(typei);rrc、各位想到没?没错,既然想知道点击是否成功,我们当然是在代码中的点击事件处添加一个断点,切记不要添加在226行哦,因为被执行的是click方法内的函数,而不是226行的选择器。断点现在已经打上了,然后做什
7、么呢?自己再琢磨琢磨~继续上图:Pausedindebugger
8、>G■348楚平路南湖大桥动工南湖居民出行…楚平路(雄楚大道一南湖大道)工程,處雄楚大道,南接南湖大道•全长约2.557公里,由既有道路改造、新建道路和跨南湖大・・£989・0武汉最高最大广告牌开始拆除30层…3月中旬r广告商花费百万元开始自拆。这块江城目前最高最大的广告牌由于拆除难度大,拆除时间预计还II半个月。加载醪JL190■0…"■I1八▼Otop206207•、▼Omcms.fdc.208►■css►limages丿209210211
9、»Js212213214}},/*.nsplan.s(nodoma215216*栏目请217*/218columnlrv219$(”bod>220news.g€221news.tc222news.ru223$(“・sw:224//加载禺225vari=:226$(u.btr227i++;228$(th:229newsme然后我们当然是回去点击加载更多按钮啦,为什么?额。。。如果你这么问,请允许我用这个表情2不点击加载更多按钮,怎么去触发点击事件?不触发点击事件,怎么去执行点击事件里的函数?咆哮状。。不过我相
10、信大家肯定不会问这么low的问题~不瞎扯了~继续正题,上面的图就是点击加载更多按钮后的情况,我们可以看到左侧的页面被一个半透明的层给盖住了,页面上方还有一串英文和两个按钮,右侧代码227行被添加上了背景色,出现这个情况,先不管那些按钮英文是啥意思冇啥作用,你从这个图得到了什么信息?继续琢磨琢磨~如果岀现了上图这个情况,说明一点,click事件中的函数被调用了,进一步说明了点击事件生效。那么我们对于这
此文档下载收益归作者所有