A quoi sert la console en javascript ?

L'utilisation de JavaScript dans la console est : 1. la syntaxe "console.assert(expression, object[, object...])" ; 2. la syntaxe "console.count([label])", etc.

L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.

Pour les développeurs front-end, lorsqu'ils ont besoin de surveiller la valeur de certaines expressions ou variables pendant le processus de développement, l'utilisation du débogueur sera trop lourde. Au lieu de cela, la valeur sera affichée sur la console pour un débogage facile. . La phrase la plus couramment utilisée est console.log(expression).

Cependant, la plupart des gens ne comprennent pas complètement l'objet console en tant qu'objet global. Bien sûr, moi aussi. Après quelques études, je connais désormais cet objet qui peut jouer avec la console. J'ai une certaine compréhension des objets JS et j'aimerais les partager avec vous.

L'objet console a de nombreuses autres méthodes en plus de console.log(), qui est la méthode la plus couramment utilisée par les développeurs. Une utilisation flexible de ces méthodes peut ajouter beaucoup de commodité au processus de développement.

méthode console

console.assert(expression, object[, object...])

reçoit au moins deux paramètres, le premier Lorsque la valeur d'un paramètre ou la valeur de retour est false, la valeur du paramètre suivant sera affichée sur la console. Par exemple :

console.assert(1 == 1, object); // 无输出，返回 undefined
console.assert(1 == 2, object); // 输出 object

console.count([label])

Afficher le nombre de fois que la ligne est exécutée. Le paramètre facultatif label peut être affiché avant le nombre. de fois, par exemple :

(function() {  for (var i = 0; i < 5; i++) {
    console.count('count');
  }
})();// count: 1// count: 2// count: 3// count: 4// count: 5

console.dir(object)

affichera les attributs de l'objet entrant, y compris les attributs des sous-objets, dans la liste formulaire, par exemple :

var obj = {
  name: 'classicemi',
  college: 'HUST',
  major: 'ei'};
console.dir(obj);

Sortie :

console.error(object[, object...])

est utilisé pour afficher les informations d'erreur, et son utilisation est la même que celle du console.log commun, la différence est que le contenu de sortie sera marqué avec le mauvais style pour une identification facile. Résultat de sortie :

console.group

Il s'agit d'une méthode intéressante, qui peut produire différents niveaux de relations d'imbrication pour les instructions générées par la console A. console.group() ajoutera une couche d'imbrication. Au contraire, pour réduire une couche d'imbrication, vous pouvez utiliser la méthode console.groupEnd(). L'expression du langage est relativement faible. Regardez le code :

console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');

Résultat de sortie :

et console.group() sont similaires dans la mesure où console.groupCollapsed() a le même effet. que le contenu de sortie imbriqué est à l'état Plié, utilisez cette méthode lors de la sortie d'une grande section de contenu pour éviter que la mise en page de sortie ne soit trop longue. . .

console.info(object[, object...])

Cette méthode est la même que la console.error mentionnée précédemment, utilisée pour afficher des informations, non Quelque chose de spécial.

console.info('info'); // 输出 info

console.table()

peut afficher l'objet ou le tableau entrant sous forme de tableau. Par rapport à la sortie arborescente traditionnelle, ce schéma de sortie est plus. convient aux objets ou aux tableaux dont les éléments internes sont soigneusement disposés, sinon il peut y avoir beaucoup d'indéfinis.

var obj = {
  foo: {
    name: 'foo',
    age: '33'
  },
  bar: {
    name: 'bar',
    age: '45'
  }
};var arr = [
  ['foo', '33'],
  ['bar', '45']
];

console.table(obj);
console.table(arr);

Vous pouvez également

console.log(object[, object...])

Inutile de dire que cela devrait be C'est le plus couramment utilisé par les développeurs, je ne sais pas qui l'a spécifié. . .

console.log('log'); // 输出 log

console.profile([profileLabel])

C'est une chose très sophistiquée qui peut être utilisée pour l'analyse des performances. Dans le développement JS, nous devons souvent évaluer les performances d'un morceau de code ou d'une certaine fonction. Il est possible d'imprimer manuellement l'heure dans la fonction, mais elle n'est pas assez flexible et comporte des erreurs. Avec l'aide de la console et de la méthode console.profile(), nous pouvons facilement surveiller les performances de course.

Par exemple, le code suivant :

function parent() {  for (var i = 0; i < 10000; i++) {
    childA()
  }
}function childA(j) {  for (var i = 0; i < j; i++) {}
}

console.profile('性能分析');
parent();
console.profileEnd();

Ensuite, nous pouvons voir le temps consommé lors de l'exécution du code ci-dessus sous le panneau Profils.

L'optimisation des performances du processus de chargement des pages est une partie importante du développement front-end. Utilisez le panneau de profils de la console pour surveiller l'état d'exécution de tous les JS. La méthode d'utilisation est comme un enregistreur vidéo. . La console enregistrera le processus en cours. Comme le montre l'image, il y a des boutons d'enregistrement et d'arrêt sur la barre d'outils.

Résultat de l'enregistrement :

console.time(name)
minuterie, vous pouvez associer console.time() et console.timeEnd() La course l'heure du code est sortie sur la console et le paramètre name peut être utilisé comme nom d'étiquette.

console.time('计时器');for (var i = 0; i < 1000; i++) {  for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');

console.trace()

console.trace()用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function tracer(a) {
  console.trace();  return a;
}function foo(a) {  return bar(a);
}function bar(a) {  return tracer(a);
}var a = foo('tracer');

输出：
console.warn(object[, object...])

输出参数的内容，作为警告提示。

console.warn('warn'); // 输出 warn

占位符

console对象上的五个直接输出方法，console.log(),console.warn(),console.error(),console.exception()(等同于console.error())和console.info()，都可以使用占位符。支持的占位符有四种，分别是字符(%s)、整数(%d 或 %i)、浮点数(%f)和对象(%o)。

console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);var obj = {
  name: 'classicemi'}
console.log('%o', obj);

还有一种特殊的标示符%c，对输出的文字可以附加特殊的样式，当进行大型项目开发的时候，代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息，比如常见的招聘信息和个人介绍啥的。

输出结果：<span class="hljs-built_in">console.log(<span class="hljs-string">'%cMy name is classicemi.', <span class="hljs-string">'color: #fff; background: #f40; font-size: 24px;');</span></span></span>

%c标示符可以用各种 CSS 语句来为输出添加样式，再随便举个栗子，background属性的url()中添加图片路径就可以实现图片的输出了，各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~

【推荐学习：javascript高级教程】

 网友补充：

1.console.debug() 用于输出输出debug的信息。

2.console.timeStamp() 用于标记运行时的timeline信息。

3.console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）。

4.console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）。

5.$0 可以在控制台输出在Elements面板选中的页面元素。

6.$_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果。

7.$x 可以用xPath的语法来获取页面上的元素。 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!