灵活使用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的全部元素。这也将它们放入数组中，你也可以通过指定命组中该元素的位置来从中选择特定的元素。

（编辑：河北网）

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