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.debugconsole.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, debuginfo메소드는 구현 방식이 동일하지만 색상 및 아이콘이 다릅니다.

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


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