灵活使用console让 js调试更简单(3)

这里使用 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 中与选择器匹配的第一个元素。

可以使用 \$\$(tagName) 或 \$\$(.class), 注意双元符号，根据特定的选择器选择DOM的所有元素。这也将它们放入数组中，你也可以通过指定数组中该元素的位置来从中选择特定的元素。

（编辑：ASP站长网）