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

这是一种老派的做法，我们使用 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的所有元素。这也将它们放入数组中，你也可以通过指定数组中该元素的位置来从中选择特定的元素。

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!