if (thisThing) { debugger;}
var car; var func1 = function() {func2();} var func2 = function() {func4();} var func3 = function() { } var func4 = function() {car = new Car();car.funcX();} var Car = function() {this.brand = ‘volvo’;this.color = ‘red’; this.funcX = function() {this.funcY();} this.funcY = function() {this.funcZ();} this.funcZ = function() {console.trace(‘trace car’)}} func1();

多显示器尺寸测验Chrome有壹个可怜使人陶醉的功能正是能力所能达到模拟差异道具的尺寸,在Chrome的Inspector中式茶食击toggle
device
mode按键,然后就能够在不相同的配备显示屏尺寸下进展调节和测量检验咯。在Console火速选定DOM成分在Elements采用面板中精选有些DOM成分然后在Console中选拔该因素也是不行广泛的一个操作,Chrome
Inspector会缓存最终5个DOM成分在它的历史记录中,你能够用临近于Shell中的$0等方法来飞速关联到成分。例如下图的列表中有‘item-4′,
‘item-3’, ‘item-2’, ‘item-1’,
‘item-0’那多少个因素,你能够那样使用。获得某些函数的调用追踪记录JavaScript框架不小方便了大家的开发,然则也会拉动大气的预约义的函数,举例创设View的、绑定事件的等等,那样我们就不易于追踪大家自定义函数的调用进程了。固然JavaScript不是二个格外谨言慎行的言语,有的时候候很难搞理解毕竟发生了吗,非常是当您要求审阅其余人的代码的时候。那个时候console.trace将要起功能咯,它可以帮您举行函数调用的寻踪。比如下边包车型客车代码中我们要追踪出car对象中对此funcZ的调用进度:

var func1 = function(x, y, z) {};

那边就可以清晰地看出func1调用了func2,然后调用了func4,func4创办了Car的实例然后调用了car.funcX。格式化被核减的代码神迹在坐褥意况下大家开采了某些莫名玄妙的难点,然后忘了把sourcemaps放到那台服务器上,或然在看外人家的网址的源代码的时候,结果就见到了意气风发坨不精晓讲什么的代码,就如下图。Chrome为大家提供了二个很人性化的反压缩工具来加强代码的可读性,大约这么用。火速稳定调节和测验函数当大家想在函数里加个断点的时候,一般会筛选那样做:在Inspector中找到钦点行,然后增加一个断点在本子中加多一个debugger调用可是这二种艺术都存在三个小标题就是都要到对应的本子文件中然后再找到相应的行,那样会相比较费心。那边介绍一个针锋相投火速点的不二法门,正是在console中应用debug(funcName卡塔尔国然后脚本会在钦点到相应函数之处活动终止。这种方法有个毛病就是不恐怕在私有函数或然无名氏函数处甘休,所以依然要因时而异:

将Objects以表格格局显得神蹟大家须要看有的繁琐的目的的详细音信,最轻便易行的法子正是用console.log然后体现成四个列表状,上下滚动举办浏览。然则就好像用console.table浮现成列表会更加好哎,大约是介个样子:

var animals = [ { animal: 'Horse', name: 'Henry', age: 43 }, { animal: 'Dog', name: 'Fred', age: 13 }, { animal: 'Cat', name: 'Frodo', age: 18 }]; console.table(animals);

这种艺术能够让您实时监察和控制到底什么参数被盛传到了钦点函数中。Console中应用$进行成分查询在Console中也足以动用$来开展相似于querySelector那样基于CSS接受器的询问,$(‘css-selector’卡塔尔(قطر‎会重回满意相称的率先个要素,而$$(‘css-selector’卡塔尔会重回全体相配成分。注意,借使你会每每行使到成分,那么别忘了将它们存入变量中。Postman多三人习贯用Postman实行API调节和测验只怕发起Ajax诉求,可是别忘了你浏览器自带的也能做那几个,并且你也无需操心吗认证啊这几个,因为Cookie都以自带帮你传送的,这么些只要在network这一个tab里就会开展,大约那样子:DOM变化检查评定DOM一时候依然很操蛋的,不常候压根不了然几时就变了,但是Chrome提供了贰个小的法力正是当DOM爆发变化的时候它会提醒您,你能够监测属性别变化化等等:Further
Reading
Speed up your markup with zen coding emmetEmmet and css the
forgotten partChrome command line apiChrome developer tools tips and
tricksFirefox edit and resend a request

引用本文来源:segmentfault.com‘debugger;’除了console.log,debugger就是另多少个本身很赏识的连忙调节和测量试验的工具,将debugger参加代码之后,Chrome会自动在插入它的位置停下,很像C恐怕Java里面打断点。你也足以在有的规范决定中插入该调节和测量检验语句,例如:

console.todo = function(msg) {console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);} console.important = function(msg) {console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);} console.todo(“This is something that’ s need to be fixed”);console.important(‘This is an important message’);

制止不相干的本子运转当大家付出今世网页的时候都会用一些第三方的框架可能库,它们差不离都以透过测量检验何况相对来讲Bug超级少的。然则当大家调节和测量检验大家和好的本子的时候也会一十分大心跳到那个文件中,引发额外的调节和测量试验职分。解决方案吧正是禁绝那有的无需调剂的本子运营,详细情况可以知道那篇小说::
javascript-debugging-with-black-box。在较复杂的调弄整理意况下开采首要要素在一些复杂的调节和测量检验意况下大家可能要出口非常多行的剧情,那时候大家习于旧贯性的会用console.log,
console.debug, console.warn, console.info,
console.error这个来张开区分,然后就足以在Inspector中进行过滤。但是偶尔候我们依然期望可以自定义展现样式,你能够用CSS来定义本性化的消息样式:

var func1 = function() {func2();}; var Car = function() {this.funcX = function() {this.funcY();} this.funcY = function() {this.funcZ();}} var car = new Car();

在console.log(卡塔尔中你能够应用%s来代表一个字符串 , %i 来代表数字, 以至 %c
来表示自定义的样式。监测钦定函数的调用与参数在Chrome中得以监测钦点函数的调用意况以至参数:

相关文章

网站地图xml地图