console.log ()와 console.debug ()의 차이점은 무엇입니까?


143

"console.debug"를 검색하면 "console"과 "debug"라는 단어가있는 여러 페이지가 표시되기 때문에 Google은 도움이되지 않았습니다.

나는 차이가 사이에 무엇인지 궁금 console.log()하고 console.debug(). 많은 console.debug()명령문 을 사용하고 스위치를 뒤집어 모든 디버그 명령문이 콘솔로 전송되는 것을 쉽게 차단 할 수있는 방법이 있습니까 (사이트를 시작한 후)?


다음은 console.log 출력을 비활성화하는 방법입니다. stackoverflow.com/questions/1215392/…
— frazras 18.14의

색상을 넣을 수 있습니다. console.log ( '% c 샘플 텍스트', 'color : green;'); 또는 다음을 사용하여 텍스트에 VAR을 추가하십시오. console.log (`Sample $ {variable}`, 'color : green;');
— Gilberto B. Terra Jr.

답변:


74

55
Chrome debug()에서 파란색과 log()검정색으로 표시
— Simon_Weaver 4:31의

38
log ()에 비해 크게 개선되었습니다.
— Vael Victus 2016 년

32
developer.mozilla.org/en-US/docs/Web/API/console : console.debug () - 참고 : Chromium 58
— cilf

Chrome에서 디버그 사용 : 디버그 호출이 허용되지 않음
— Masoud Bimar

103

기술적 console.log console.debug와 console.info동일하지만 그것들은 데이터를 표시하는 방법은 조금 다르다

console.log 아이콘이없는 검은 색 텍스트

console.info 아이콘이있는 파란색 텍스트

console.debug 순수한 검은 색 텍스트

console.warn 아이콘이있는 노란색 텍스트

console.error 아이콘이있는 붉은 색 텍스트

var playerOne = 120;
var playerTwo = 130;
var playerThree = 140;
var playerFour = 150;
var playerFive = 160;

console.log("Console.log" + " " +  playerOne);
console.debug("Console.debug" + " " +playerTwo);
console.warn("Console.warn" + " " + playerThree);
console.info("Console.info" + " " + playerFour);
console.error("Console.error" + " " + playerFive);

여기에 이미지 설명을 입력하십시오


Google 크롬에서는 브라우저 info수준 로그가 단순히 아이콘 (스냅 샷과 동일)으로 표시되지만 텍스트 ( console.info게시물의 텍스트)는 검은 색이고 행의 배경색은 흰색입니다. firefox 브라우저의 스냅 샷일 수 있습니다.
— RBT

3
스크린 샷으로 명확하게 답변 해 주셔서 감사합니다. 그래도 왜 문자열을 연결해야합니까? 왜 console.log("Console.log");대신에 console.log("Console.log" + " " + playerOne);? 무엇을 " " + playerOne합니까?
— hofnarwillie

콘솔에서 다음과 같은 디스플레이를 얻습니다.console.log("Console.log"); console.debug("Console.debug"); console.warn("Console.warn"); console.info("Console.info"); console.error("Console.error");
— kotchwane

36

그것들은 거의 동일합니다-유일한 차이점은 최신 버전의 Chrome에서 디버그 메시지가 기본적으로 숨겨져 있다는 것입니다 (디버그 메시지 Verbose를 보려면 콘솔에있는 동안 Devtools 상단 막대에서 로그 수준을 설정해야 합니다. 기본적으로 로그 메시지는 표시됩니다).


2
안녕하세요, 이것은 사실처럼 보이지만이 동작에 대한 정보를 찾을 수 없습니다. 크롬 문서는 오늘날의로 그것을 언급하지 않습니다.
— oligofren

3
이제 마침내 "콘솔 상단에서 로그 수준을 Verbose로 설정"을 이해했습니다. 개발자 도구에는 하단에 콘솔이 있음을 의미합니다. 이 섹션의 상단에는 필터 및 프레임 선택기와 함께 로그에 대한 상세 정보 드롭 다운이 있습니다 ( "정보"로 사전 설정 됨)
— oligofren

1
가장 관련성이 높은 답변입니다. 모두가 색상을 언급하지만 이것이 IMO보다 중요합니다.
— DurkoMatko

15

console.info, console.debug방법은 동일하다 console.log.

  • console.log 인쇄 명세서
  • console.info 파란색에서 "i"아이콘이있는 검은 색 텍스트
  • console.debug 파란색 텍스트

선적 서류 비치:


Console.info는 파란색을 인쇄하고 console.warn은 노란색을 인쇄하며 console.error는 빨간색을 인쇄합니다
— shivgre

Chrome에서 테스트했습니다. 52.0.2743.82 Console.Info는 파란색 아이콘으로 검은 색으로 인쇄되고 Console.warn은 노란색 아이콘 콘솔로 검은 색으로 인쇄됩니다. 오류가 빨간색 아이콘으로 붉은 색으로 인쇄 됨
— Venkat

downvote를 upvote 또는 제거 할 수 있도록 적절하게 답변을 편집하십시오. console.info ()를 사용하는 동안 인쇄 된 텍스트 앞에 파란색 "i"아이콘이 표시
— 되었습니까?

2

제품이 완료된 후 로깅을 사용하지 않으려면 기능을 대체 console.debug()하거나 다른 사용자 정의 기능 을 작성할 수 있습니다 .

console.debug = function() {
    if(!console.debugging) return;
    console.log.apply(this, arguments);
};

console.debugging = true;
console.debug('Foo', {age:41, name:'Jhon Doe'});

푸 ▸ {나이 : 41, 이름 : "Jhon Doe"}

console.debugging = false;
console.debug('Foo', {age:26, name:'Jane Doe'});

출력 없음

그러나 출력물에 색상을 지정하는 방법을 찾지 못했습니다.


1

브라우저 문서에서 log, debug및 info메소드는 구현 방식이 동일하지만 색상 및 아이콘이 다릅니다.

https://jsfiddle.net/yp4z76gg/1/


1
이것은 OP와 다른 사람들을 이해하는 데 동일하거나 차이가없는 방법에 대한 해설과 함께 설명이거나 더 많은 설명을 추가해야합니다. 감사합니다
— ρяσѕρєя K
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.