1. 首页
  2. IT资讯

「前端小技巧」除了console.log,还有其它几个调试方法值得尝试

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fe0dfd3fddba8420ba2b02fdcf000b2db” img_width=”1620″ img_height=”674″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E在JavaScript开发调试中,console.log()是我们最常用的方法,但是还有其它几个常用的方法,值得我们试一试,也许会起到意想不到的效果。u003Cu002Fpu003Eu003Cpu003E预计本篇文章阅读时间预计u003Cstrongu003E2u003Cu002Fstrongu003E分钟u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E基础用法——console.log()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Ff4f87955-d295-4c49-9c04-f20bd7a26ab8″ img_width=”1200″ img_height=”799″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E打印一段文本u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Econsole.log(‘Is this working?’);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E打印对象u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003Econst foo = { id: 1, verified: true, color: ‘green’ };u003Cbru003Econst bar = { id: 2, verified: false, color: ‘red’ };u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E接着我们看控制台的输出展现:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F472f90680fe14850a161d7f2fe3e8f4d” img_width=”640″ img_height=”156″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从图中我们看出,无法看出对应的变量名;如果想让两个对象一起输出,我们可以使用console.log({ foo, bar }),由于一行内容显示有限,对象内容部分进行了省略,我们必须点击左边的小箭头看更详细的内容,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F7b343c6d652d4933ae9b6bc8b0aa2fa1″ img_width=”1004″ img_height=”194″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.table()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E为了增加输出的可读性,我们可以使用console.table()让其通过表格的形式进行展示,比如我们在控制台输出console.table({ foo, bar}),如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fde7ec758f983488082260069cafa280f” img_width=”1620″ img_height=”545″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.group()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E有时候,为了方便分析,你需要将一些对象变量等信息进行分组打印输出,示例如下:u003Cu002Fpu003Eu003Cpreu003Econsole.group(‘User Details’);u003Cbru003Econsole.log(‘name: John Doe’);u003Cbru003Econsole.log(‘job: Software Developer’);u003Cbru003Eu002Fu002F Nested Groupu003Cbru003Econsole.group(‘Address’);u003Cbru003Econsole.log(‘Street: 123 Townsend Street’);u003Cbru003Econsole.log(‘City: San Francisco’);u003Cbru003Econsole.log(‘State: CA’);u003Cbru003Econsole.groupEnd();u003Cbru003Econsole.groupEnd();u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F9955e3433ac74d0283e8003a9760114b” img_width=”926″ img_height=”580″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.warn() & console.error()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E一些特别的信息我们需要特别强调醒目的输出出来,比如警告和错误信息,你可以使用console.warn() & console.error(),输出的展示形式如下图所示,是不是更醒目:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F00bdb0a340284c2d839ba71938724e08″ img_width=”638″ img_height=”151″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E你还可以更进一步,自定义打印输出的样式,我们可以使用%c语法。使用这个语法我们可以更直观的区分打印输出来源哪个API调用,用户事件等,示例如下:u003Cu002Fpu003Eu003Cpreu003Econsole.log(‘%c Auth ‘, u003Cbru003E ‘color: white; background-color: #2274A5’, u003Cbru003E ‘登录验证通过’);u003Cbru003Econsole.log(‘%c GraphQL ‘, u003Cbru003E ‘color: white; background-color: #95B46A’, u003Cbru003E ‘获取用户信息’);u003Cbru003Econsole.log(‘%c Error ‘, u003Cbru003E ‘color: white; background-color: #D33F49’, u003Cbru003E ‘获取用户信息失败’);u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F01b6a8d00f91421697b96a3dd96b2219″ img_width=”1012″ img_height=”418″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.trace()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Econsole.trace()方法用于显示当前执行的代码在堆栈中的调用路径。如下段代码所示,在控制台里清晰了展示了add()的调用轨迹u003Cu002Fpu003Eu003Cpreu003Efunction add(a,b){u003Cbru003Econsole.trace();u003Cbru003Ereturn a+b;u003Cbru003E}u003Cbru003Efunction add3(a,b){return add2(a,b);}u003Cbru003Efunction add2(a,b){return add1(a,b);}u003Cbru003Efunction add1(a,b){return add(a,b);}u003Cbru003Evar x = add3(1,1);u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F5eb9f948793d4be5bdb8f9398bfb3205″ img_width=”690″ img_height=”492″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.time()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E我们在开发过程中,经常需要知道一个方法运行了多长时间,方便我们做出修改完善的判断,我们可以使用console.time(),示例如下:u003Cu002Fpu003Eu003Cpreu003Elet i = 0;u003Cbru003Econsole.time(“While loop”);u003Cbru003Ewhile (i < 1000000) {u003Cbru003E i++;u003Cbru003E}u003Cbru003Econsole.timeEnd(“While loop”);u003Cbru003Econsole.time(“For loop”);u003Cbru003Efor (i = 0; i < 1000000; i++) {u003Cbru003E u002Fu002F For Loopu003Cbru003E}u003Cbru003Econsole.timeEnd(“For loop”);u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F8367e6dece474900b681bad79a7be108″ img_width=”660″ img_height=”430″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003Econsole.dir()u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003Econsole.dir()可以直观展示一个对象的所有属性和方法,示例代码如下:u003Cu002Fpu003Eu003Cpreu003Efunction cat(name, age, score){u003Cbru003E this.name = name;u003Cbru003E this.age = age;u003Cbru003E this.score = score;u003Cbru003E}u003Cbru003Evar c = new cat(“miao”, 2, [6,8,7]);u003Cbru003Econsole.dir(c);u003Cbru003Eu003Cu002Fpreu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F465a5b872bd644da845ce62c0e6d1583″ img_width=”932″ img_height=”546″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002Ff6c11f4c-4536-4bce-aaae-bdc216dafb80″ img_width=”1023″ img_height=”660″ alt=”「前端小技巧」除了console.log,还有其它几个调试方法值得尝试” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天的小技巧分享就到这里,希望对你有所帮助,欢迎到留言区进行交流分享。u003Cu002Fpu003Eu003Cpu003E更多精彩内容,请微信关注u003Cstrongu003E“前端达人”公众号u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「前端小技巧」除了console.log,还有其它几个调试方法值得尝试

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10774.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code