javascript断点调试心得分享_javascript技巧

《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、么呢？自己再琢磨琢磨~继续上图: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事件中的函数被调用了，进一步说明了点击事件生效。那么我们对于这