형식화 된 자바 스크립트 콘솔 로그 메시지를 어떻게 생성합니까?


94

나는 오늘 페이스 북의 크롬에서 콘솔을 쳐다 보았다.
놀랍게도 콘솔에서이 메시지를 받았습니다.

이제 내 질문은 :
어떻게 이것이 가능합니까?
콘솔에 대한 '악용'방법이 몇 가지 있다는 것을 알고 있지만 콘솔에서 이러한 글꼴 서식을 어떻게 만들 수 있습니까? (그리고 console.log입니까?)

답변:


133

예, console.log()다음과 같이 형식을 지정할 수 있습니다 .

console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");

%c첫 번째 인수 의 앞 텍스트와 두 번째 인수의 스타일 사양에 유의하십시오 . 텍스트는 귀하의 예처럼 보일 것입니다.

자세한 내용은 Google의 "CSS를 사용한 스타일링 콘솔 출력" 또는 FireBug의 콘솔 문서 를 참조하십시오.

문서 링크에는 콘솔 로그에 개체 링크를 포함하는 것과 같은 다른 깔끔한 트릭도 포함되어 있습니다.


console.log이전 브라우저는 예외와 함께 스크립트를 중지 할 수 있으므로 에서 형식 문자열을 사용하기 전에 호환되는 브라우저가 사용 중인지 확인하는 것이 좋습니다. caniuse는 Firefox 9와 Edge 79에서 도입 되었다고 말합니다 . Chrome은 Chrome 83 이전에 분명히 지원하기 시작했지만 정확히 언제인지 알 수 없습니다.
Silas S. Brown

38

이 시도:

console.log("%cThis will be formatted with blue text", "color: blue");

문서 인용,

% c 형식 지정자를 사용하여 console.log () 또는 관련 메서드를 사용하여 콘솔에 쓰는 모든 문자열에 사용자 지정 CSS 규칙을 적용합니다.

출처 : https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css


7
안녕하세요 downvoter, 추가 할 의견이 있습니까? -자신을 설명하는 댓글을 남기지 않으면 (좋지 않다고 생각하는) 답변을 개선하기가 어렵습니다. :)
blurfus

31

하위 문자열을 형식화 할 수도 있습니다.

var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);

여기에 이미지 설명 입력


4
의 첫 번째 인수 내에서만 스타일을 지정할 수 console.log있으며 스타일은 바로 뒤에 와야합니다.
Qwerty

9

Google 웹 사이트 : 사이트

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.