这里要注意的是这是乱序的 - 最右边的列标题上的箭头显示了原因。 我点击该列进行排序。 找到列的最大或最小，或者只是对数据进行不同的查看非常方便。 顺便说一句，该功能与仅显示一些列无关，它总是可用的。
console.table() 只能处理最多1000行，因此它可能不适合所有数据集。
console.assert()
assert() 与 log() 是相同的函数，assert()是对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台，示例如下：
var arr = [1, 2, 3]; console.assert(arr.length === 4);
有时我们需要更复杂的条件句。例如，我们已经看到了用户 WAL0412 的数据问题，并希望仅显示来自这些数据的事务，这是直观的解决方案。
console.assert(tx.buyer === 'WAL0412', tx);
这看起来不错，但行不通。记住，条件必须为false，断言才会执行，更改如下：
console.assert(tx.buyer !== 'WAL0412', tx);
与其中一些类似，console.assert() 并不总是特别有用。但在特定的情况下，它可能是一个优雅的解决方案。
console.count()
另一个具有特殊用途的计数器，count只是作为一个计数器，或者作为一个命名计数器，可以统计代码被执行的次数。
for(let i = 0; i < 10000; i++) { if(i % 2) { console.count('odds'); } if(!(i % 5)) { console.count('multiplesOfFive'); } if(isPrime(i)) { console.count('prime'); } }
这不是有用的代码，而且有点抽象。这边也不打算演示 isPrime 函数，假设它是成立的。
执行后我们会得到一个列表：
odds: 1
odds: 2
prime: 1
odds: 3
multiplesOfFive: 1
prime: 2
odds: 4
prime: 3
odds: 5
multiplesOfFive: 2
...
还有一个相关的 console.countReset()，可以使用它重置计数器。
console.trace()
trace() 在简单的数据中很难演示。当您试图在类或库中找出是哪个实际调用者导致了这个问题时，它的优势就显现出来了。
例如，可能有 12 个不同的组件调用一个服务，但是其中一个组件没有正确地设置依赖项。
export default class CupcakeService { constructor(dataLib) { this.dataLib = dataLib; if(typeof dataLib !== 'object') { console.log(dataLib); console.trace(); } } ... }
这里使用 console.log() 仅告诉我们传递数据dataLib是什么 ，而没有具体的传递的路径。不过，console.trace() 会非常清楚地告诉我们问题出在 Dashboard.js，我们可以看到是 new CupcakeService(false) 导致错误。
console.time()
console.time() 是一个用于跟踪操作时间的专用函数，它是跟踪 JavaScript执行时间的好方法。
function slowFunction(number) { var functionTimerStart = new Date().getTime(); // something slow or complex with the numbers. // Factorials, or whatever. var functionTime = new Date().getTime() - functionTimerStart; console.log(`Function time: ${ functionTime }`); } var start = new Date().getTime(); for (i = 0; i < 100000; ++i) { slowFunction(i); } var time = new Date().getTime() - start; console.log(`Execution time: ${ time }`);
这是一种老派的做法，我们使用 console.time() 来简化以上代码。
const slowFunction = number => { console.time('slowFunction'); // something slow or complex with the numbers. // Factorials, or whatever. console.timeEnd('slowFunction'); } console.time(); for (i = 0; i < 100000; ++i) { slowFunction(i); } console.timeEnd();
我们现在不再需要做任何计算或设置临时变量。
console.group()
// this is the global scope let number = 1; console.group('OutsideLoop'); console.log(number); console.group('Loop'); for (let i = 0; i < 5; i++) { number = i + number; console.log(number); } console.groupEnd(); console.log(number); console.groupEnd(); console.log('All done now');
输出如下：
并不是很有用，但是您可以看到其中一些是如何组合的。
class MyClass { constructor(dataAccess) { console.group('Constructor'); console.log('Constructor executed'); console.assert(typeof dataAccess === 'object', 'Potentially incorrect dataAccess object'); this.initializeEvents(); console.groupEnd(); } initializeEvents() { console.group('events'); console.log('Initialising events'); console.groupEnd(); } } let myClass = new MyClass(false);
这是很多工作和很多调试信息的代码，可能不是那么有用。 但它仍然是一个有趣的想法，这样写使你的日志记录更加清晰。
选择DOM元素
如果熟悉jQuery，就会知道 $(‘.class') 和 $(‘#id') 选择器有多么重要。它们根据与之关联的类或 ID 选择 DOM 元素。
但是当你没有引用 jQuery时，你仍然可以在谷歌开发控制台中进行同样的操作。
$(‘tagName') $(‘.class') $(‘#id') and $(‘.class #id') 等效于document.querySelector(‘ ‘)，这将返回 DOM 中与选择器匹配的第一个元素。