다음은 쉽게 읽을 수 있도록 구조화되고 형식화된 JavaScript 콘솔 예제와 함께 Dev.to에 게시할 준비가 된 기사입니다.
JavaScript의 모든 콘솔 기능 살펴보기
JavaScript는 웹 개발을 위한 강력한 언어이지만 때로는 코드를 효과적으로 디버깅하기 어려울 수 있습니다. 다행스럽게도 콘솔 기능은 애플리케이션 동작을 검사, 진단 및 모니터링하는 데 도움이 되는 다양한 편리한 방법을 제공합니다.
이 기사에서는 사용 가능한 모든 콘솔 변형을 살펴보고 명확한 예를 들어 이를 사용하는 방법과 시기를 자세히 설명합니다.
1. console.log()
콘솔 제품군에서 가장 많이 사용되는 방법입니다. 프로그램의 일반적인 실행을 추적하는 데 자주 사용되는 메시지를 콘솔에 표시합니다.
console.log("Message général");
登录后复制
2. console.error()
이 방법은 콘솔에서 오류를 보고하는 데 사용됩니다. 오류 메시지는 일반적으로 브라우저 콘솔에 빨간색으로 표시됩니다.
console.error("Erreur détectée !");
登录后复制
3. console.warn()
console.warn()은 경고를 표시하는 데 유용합니다. 메시지는 콘솔에 노란색으로 표시되어 심각한 오류를 나타내지 않으면서도 주의를 끌 수 있습니다.
console.warn("Attention !");
登录后复制
4. console.info()
console.log()와 유사하지만 console.info() 메서드는 중요한 정보를 표시하는 데 사용됩니다.
console.info("Information importante");
登录后复制
5. console.debug()
console.debug()는 디버그 메시지용입니다. 이러한 메시지는 일부 환경에서 기본적으로 숨겨질 수 있지만 심층적인 디버깅에 적합합니다.
console.debug("Message de débogage");
登录后复制
6. 콘솔.테이블()
콘솔에서 객체나 테이블을 테이블(그리드)로 표시할 때 매우 유용한 기능입니다. 구조화된 데이터를 시각화하는 데 적합합니다.
console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);
登录后复制
7. console.dir()
객체의 검사 가능한 대화형 표현을 표시하여 객체의 속성을 더 자세히 볼 수 있습니다.
console.dir(document.body);
登录后复制
8. console.time() 및 console.timeEnd()
이러한 방법을 사용하면 두 호출 사이의 실행 시간을 측정할 수 있습니다. 코드 일부의 성능을 테스트하는 데 매우 유용합니다.
console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Simulation d'une tâche longue
console.timeEnd("chrono");
登录后复制
9. console.group() 및 console.groupEnd()
이러한 방법을 사용하면 콘솔에서 여러 메시지를 그룹화하여 쉽게 확장하거나 축소할 수 있는 계층 구조를 형성할 수 있습니다.
console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();
登录后复制
10. console.groupCollapsed()
console.group()과 유사하지만 기본적으로 그룹이 축소되어 있습니다.
console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();
登录后复制
11. 콘솔.추적()
코드가 실행된 위치로 이어지는 호출 스택의 전체 추적을 보려면 console.trace()를 사용하세요.
function functionOne() {
functionTwo();
}
function functionTwo() {
console.trace("Trace de la pile");
}
functionOne();
登录后复制
12. 콘솔.assert()
이 방법은 주어진 조건이 거짓인 경우에만 메시지를 표시합니다. 개발 중 가설을 검증하는 데 이상적입니다.
console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");
登录后复制
13. 콘솔.클리어()
콘솔을 지우려면 이 방법을 사용하세요. 어수선한 환경을 청소하는 데 유용합니다.
console.clear(); // Efface la console
登录后复制
14. console.count() 및 console.countReset()
이 메소드는 특정 레이블이 호출된 횟수를 계산하고 console.countReset()을 사용하여 카운터를 재설정할 수 있습니다.
console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");
登录后复制
15. 콘솔.메모리
일부 브라우저(예: Chrome)에서는 console.memory를 사용하여 메모리 관리에 대한 정보를 표시할 수 있습니다.
console.log(console.memory);
登录后复制
결합된 예
다음은 더 복잡한 상황에서 유용성을 보여주기 위해 위에서 언급한 여러 가지 콘솔 방법을 통합한 더 완전한 예입니다.
console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
console.log(`Itération : ${i}`);
if (i === 1) {
console.warn("Attention à l'itération 1");
}
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {}
console.timeEnd("Temps d'exécution");
登录后复制
결론
JavaScript의 콘솔 메소드 계열은 단순한 console.log() 메소드보다 훨씬 더 큽니다. 이러한 다양한 기능을 이해하고 사용하면 코드 디버깅을 개선하고 개발 중에 귀중한 통찰력을 얻을 수 있습니다.
프로젝트에 주저하지 말고 이러한 방법을 사용하고 이 방법이 제공할 수 있는 기능을 재미있게 탐색해 보세요!
이 코드 블록을 자신의 프로젝트에 복사하고 사용하여 콘솔의 강력한 기능을 심층적으로 탐색할 수 있습니다. ?
// console.log() : Affiche un message général
console.log("Message général");
// console.error() : Affiche un message d'erreur
console.error("Erreur détectée !");
// console.warn() : Affiche un avertissement
console.warn("Attention !");
// console.info() : Affiche des informations
console.info("Information importante");
// console.debug() : Affiche un message de débogage (souvent masqué par défaut)
console.debug("Message de débogage");
// console.table() : Affiche un tableau de données dans la console
console.table([{ nom: "Alice", âge: 25 }, { nom: "Bob", âge: 30 }]);
// console.dir() : Affiche une représentation interactive d'un objet
console.dir(document.body);
// console.time() et console.timeEnd() : Chronomètre pour mesurer le temps d'exécution
console.time("chrono");
for (let i = 0; i < 1000000; i++) {} // Code simulant une tâche longue
console.timeEnd("chrono");
// console.group() et console.groupEnd() : Groupe les messages dans la console
console.group("Groupe de messages");
console.log("Message dans le groupe");
console.log("Autre message dans le groupe");
console.groupEnd();
// console.groupCollapsed() : Groupe réduit par défaut
console.groupCollapsed("Groupe réduit");
console.log("Message dans le groupe réduit");
console.groupEnd();
// console.trace() : Affiche une trace de la pile d'appels
function functionOne() {
functionTwo();
}
function functionTwo() {
console.trace("Trace de la pile");
}
functionOne();
// console.assert() : Affiche un message uniquement si l'assertion est fausse
console.assert(1 === 2, "Ce message s'affiche car l'assertion est fausse");
// console.clear() : Efface la console
// console.clear(); // Décommentez cette ligne pour effacer la console
// console.count() et console.countReset() : Comptabilise le nombre d'appels avec une étiquette
console.count("compteur");
console.count("compteur");
console.countReset("compteur");
console.count("compteur");
// console.memory : Affiche des informations sur la mémoire utilisée (fonctionne dans certains environnements)
console.log(console.memory);
// Exemple combiné de plusieurs fonctions console :
console.log("Démarrage du programme");
console.group("Boucle");
for (let i = 0; i < 3; i++) {
console.log(`Itération : ${i}`);
if (i === 1) {
console.warn("Attention à l'itération 1");
}
}
console.groupEnd();
console.error("Fin du programme avec erreur");
console.time("Temps d'exécution");
// Code simulant une tâche
for (let j = 0; j < 1000000; j++) {}
console.timeEnd("Temps d'exécution");
登录后复制
Merci pour la lecture !
Vous avez des questions ou des suggestions ? Laissez un commentaire ci-dessous, ou partagez d'autres astuces console que vous utilisez dans vos projets !
以上是探索 JavaScript 中的所有控制台功能的详细内容。更多信息请关注PHP中文网其他相关文章！
