js调试console

发表于 | 分类于

     Web开发最常用的高度就是 console.log ，虽然 console.log 占有一席之地，但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易，更快速，更直观。

console.log()

     在console.log中除了常用的打印功能，如console.log(object)用来查看对象，也可以console.log(object,otherObject,string)这样对象和字符串都会整齐的记录下来。

     格式化功能cosnole.log(msg,values)，有点像java中的println。

1
2
3
console.log('I like %s but I do not like %s','Skittles',;pus)
// 会得到下面结果
I like Skittles but I do not like pus.

这里面用到了占位符，常见的占位符有：

  • %o（字母o） 接收对象
  • %s 接收字符串
  • %d 小数或整数
  • %c css首位占位符，后面的参数必须是css语句，用来对输出的内容进行css渲染，常见的方式有：文字样式，图片输出。
    1
    2
    console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px');
    // 后面的css样式  会应用在 字符串 ‘button’上，即占位符 %c 后面的内容

console.dir()

      在大多数情况下，console.dir() 的函数非常类似于 log()，尽管它看起来略有不同。对于对象console.log()和console.dir()都可以清晰的打印对象的结构。
      当查看dom元素、节点元素时，console.log()会打印出html的结构，而console.dir()则可以清晰地展示d元素的层级结构

1
const element = document.getElementById('#2x-container')

console.log
image

console.dir这是一种更客观地看待元素的方式。有时候，这可能是您真正想要的，更像是检查元素。
iamge

console.warn()

      warn()是可以与log()相互替换，我们可以以log相同的用法使用warn()。唯一的区别就是打印的内容在控制台的颜色不同。

      不过，还有一个优势，因为输出是警告而不是信息，所以你可以过滤掉所有console.log并仅保留console.warn。 这对于偶尔会在浏览器中输出大量无用废话的应用程序尤其有用。

console.table()

      console.table()函数旨在以一种比仅仅转出原始对象数组更整洁的方式显示表格数据。
列如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const data = [{
  id: "7cb1-e041b126-f3b8",
  seller: "WAL0412",
  buyer: "WAL3023",
  price: 203450,
  time: 1539688433
},
{
  id: "1d4c-31f8f14b-1571",
  seller: "WAL0452",
  buyer: "WAL3023",
  price: 348299,
  time: 1539688433
},
{
  id: "b12c-b3adf58f-809f",
  seller: "WAL0012",
  buyer: "WAL2025",
  price: 59240,
  time: 1539688433
}];

用console.table()输出：
image

第二个可选参数是所需列的列表。显然，所有列都是默认值，但我们也可以这样做:

1
console.table(data, ["id", "price"]);

console.table()只能处理最多1000行，因此它可能不适合所有数据集。

console.assert()

      assert() 与 log() 是相同的函数，assert()是对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台，示例如下：

1
2
var arr = [1, 2, 3];
console.assert(arr.length === 4);

条件必须为false，断言才会执行，

console.count()

count()只是作为一个计数器，或者作为一个命名计数器，可以统计代码被执行的次数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
for(let i = 0; i < 10000; i++) {
  if(i % 2) {
    console.count('odds');
  }
  if(!(i % 5)) {
    console.count('multiplesOfFive');
  }
}
/* 
multiplesOfFive: 1
VM228:3 odds: 1
VM228:3 odds: 2
VM228:3 odds: 3
VM228:6 multiplesOfFive: 2
VM228:3 odds: 4
VM228:3 odds: 5
VM228:6 multiplesOfFive: 3
...
 */

console.trace()

      trace() 在简单的数据中很难演示。当您试图在类或库中找出是哪个实际调用者导致了这个问题时，它的优势就显现出来了。

例如，可能有 12 个不同的组件调用一个服务，但是其中一个组件没有正确地设置依赖项

1
2
3
4
5
6
7
8
9
10
11
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执行时间的好方法。

1
2
3
4
5
6
7
8
var sum = 0;
console.time('hello')
for(let i=0;i<10000;i++){
	sum += i;
}
console.timeEnd('hello')

//  hello: 0.982177734375ms

console.group()

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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');

image

将浏览器转换为编辑器

将浏览器转换为文本编辑器。我们可以在 DOM 中的任何位置添加文本和从中删除文本。
开发人员控制台并输入以下内容：

1
document.body.contentEditable=true

这将使内容可编辑。我们可以编辑DOM中的任何内容。

查找与DOM中的元素关联的事件

      调试时，需要查找 DOM 中某个元素的事件侦听器感时，谷歌控制台了 getEventListeners使找到这些事件更加容易且直观。
例如：getEventListeners($(‘selector’)) 返回一个对象数组，其中包含绑定到该元素的所有事件。
要找到特定事件的侦听器，可以这样做:

1
2
getEventListeners($(‘selector’)).eventName[0].listener 
// 这里 eventName[0] 是一个数组，它列出了特定事件的所有事件。

监控事件

  • monitorEvents($(‘selector’)) 将监视与选择器的元素关联的所有事件，然后在它们被触发时将它们打印到控制台。例如，monitore($(#firstName)) 将打印 ID 为 firstName元素的所有事件。
  • monitorEvents($(‘selector’),’eventName’) 将打印与元素绑定的特定事件。 你可以将事件名称作为参数传递给函数。 这将仅记录绑定到特定元素的特定事件。 例如，monitorEvents($(‘#firstName’),’click’) 将打印绑定到ID为’firstName’的元素的所有 click 事件。
  • monitore($(selector)，[eventName1, eventName3’， .])将根据您自己的需求记录多个事件。与其传递单个事件名作为参数，不如传递包含所有事件的字符串数组。例如monitore($(#firstName)，[click, focus])将记录与ID firstName元素绑定的 click事件和focus事件。
  • unmonitorevent ($(selector)):这将停止监视和打印控制台中的事件。
-------------本文结束感谢您的阅读-------------