我当初在调试代码的时候根本用的都是console.log()
调试法,尽管低级,但好用呀。当然,遇到简单点的就会借助其它工具,但日常开发中 console.log()
根本够用了。
前缀铺垫的差不多了,明天咱们来看看 console.log()
中还有哪些花里胡哨的写法。
1. 用 ES6 解构赋值输入变量名
如果打印多个值的,为了区别咱们个别会连同变量名打印进去:
const variableX = 42;
console.log('variableX:', variableX);
// 或者
console.log(`variableX: ${ variableX}`);
其实,还有一种很简洁的形式就是应用解构的形式:
const variableX = 42;
console.log({variableX}); // {variableX: 42}
2. 应用适当的打印类型
console.log()
个别这样用:
console.log('no-frills log message');
但它不是惟一的类型。音讯能够被归类为 information(其解决形式与console.log()
雷同)。
console.info('this is an information message');
正告:
console.warn('I warned you this could happen!');
谬误:
console.error('I\'m sorry Dave, I\'m afraid I can\'t do that');
或不太重要的调试信息:
console.debug('nothing to see here - please move along');
console.table()
能够以更敌对的格局输入对象的值。
const obj = {
propA: 1,
propB: 2,
propC: 3
};
console.table(obj);
或对象的数组:
const arr2 = [{ a: 1, b: 2, c: 3},
{a: 4, b: 5, c: 6},
{a: 7, b: 8, c: 9}
];
console.table(arr2);
其余选项包含:
console.dir(obj)
显示一个 JS 对象的交互式属性列表console.dirxml(element)
显示指定的 HTML 或 XML 节点的子代元素的互动树。console.clear()
革除控制台之前的所有信息。
3. 过滤日志音讯
浏览器以适当的色彩显示日志信息,但也能够进行过滤,以显示特定的类型。点击控制台窗格左上方的图标,就能够关上 Chrome 的侧边栏。
留神,console.debug()
信息只有在查看 verbose
选项时才会显示。
4. 应用 printf-type
的信息
所有的日志类型都能够应用 c 语言格调的 printf
音讯格局,该格局定义了一个模板,其中蕴含一个变量被替换的 %
指示器。例如
console.log(
'The answer to %s is %d.',
'life, the universe and everything',
42
);
// The answer to life, the universe and everything is 42.
带款式的格调
console.log(
'%cOK, things are really bad now!',
`
font-size: 2em;
padding: 0.5em 2em;
margin: 1em 0;
color: yellow;
background-color: red;
border-radius: 50%;
`
);
控制台中的后果:
6. 应用相似测试的断言
相似于测试的 console.assert()
命令能够用来在条件失败时输入一个信息。能够用一个条件和一个或多个对象来定义断言,当该条件失败时输入,例如
console.assert(
life === 42,
'life is expected to be',
42,
'but is set to',
life
);
另外,也能够应用一个信息和替换值。
console.assert(
life === 42,
'life is expected to be %s but is set to %s',
42,
life
);
当条件失败时,这两个选项都会显示一个断言谬误。
7. 运行堆栈跟踪
能够应用 console.trace()
输入形成以后执行点的所有函数调用的日志。
function callMeTwo() {console.trace();
return true;
}
function callMeOne() {return callMeTwo();
}
const r = callMeOne();
跟踪显示每次调用是哪一行,并且能够在控制台窗格中折叠或开展:
8. 组日志音讯
打印日志时,能够在结尾应用console.group(label)
和结尾应用 console.groupEnd()
将日志音讯分成命名组。音讯组能够嵌套和折叠或开展(console.groupCollapsed(label)
最后显示处于折叠状态的组):
// start log group
console.group('iloop');
for (let i = 3; i > 0; i--) {console.log(i);
// start collapsed log group
console.groupCollapsed('jloop');
for (let j = 97; j < 100; j++) {console.log(j);
}
// end log group (jloop)
console.groupEnd();}
// end log group (iloop)
console.groupEnd();
9. 应用定时器
console.time
和 console.timeEnd
这两个办法能够用来让 WEB 开发人员测量一个 javascript 脚本程序执行耗费的工夫。随着 WEB 利用越来越重要,JavaScript 的执行性能也日益受到重视,WEB 开发人员晓得一些性能测试机器是必须的。
console.time
办法是开始计算工夫,console.timeEnd
是进行计时,输入脚本执行的工夫。
// 启动计时器
console.time('testForEach');
// (写一些测试用代码)
// 进行计时,输入工夫
console.timeEnd('testForEach');
// 4522.303ms
这两个办法中都能够传人一个参数,作为计时器的名称,它的作用是在代码并行运行时候分明各个计时器。对 console.timeEnd
的调用会立刻输入执行总共耗费的工夫,单位是毫秒。
10. 按名称调试和监控函数
DevTools Sources 面板 (或 Firefox 中的调试器) 容许关上一个文件,并通过单击行号设置断点。基于 chrome 的浏览器也容许你通过在控制台中输出 debug(functionName)
来设置断点,例如:
debug(doSomething);
该函数必须在全局命名空间中可用,并且浏览器将在调用它时立刻启动调试器。能够应用 undebug(functionName)
或从新加载页面来勾销调试。
monitor(function)
,它接管一个函数名作为参数,比方 function a
, 每次a
被执行了,都会在控制台输入一条信息,外面蕴含了函数的名称 a
及执行时所传入的参数。
而 unmonitor(function)
便是用来进行这一监听。
11. 查找和修复事件监听器
Firefox DevTools Inspector 面板会在任何附加了处理程序的 DOM 元素旁边显示一个 event 图标。单击图标查看函数名,而后单击右边的箭头图标开展代码。或者,“在调试器中关上”图标将在“调试器”窗格中定位处理程序,以便能够设置断点
Chrome 的实现没有那么好,但能够通过 getEventListeners()
函数传递一个 DOM 节点来查看所有事件监听器。例如,getEventListeners($0)
显示利用于以后 Elements 面板中高亮显示的 DOM 节点的侦听器
12. 复制属性到剪贴板
控制台的 copy()
命令能够复制任何值到剪贴板。它能够是一个原始值、数组、对象或 DOM 节点。
当传递一个 DOM 节点时,copy()
将该元素及其所有子元素的 HTML 放在剪贴板上。这与右键点击一个节点并抉择复制,而后抉择复制外层 HTML 是一样的。
命令 copy(document.documentElement)
复制整个 HTML 文档。这能够粘贴到文本编辑器中并进行丑化加强可读性。