나는 오늘 페이스 북의 크롬에서 콘솔을 쳐다 보았다.
놀랍게도 콘솔에서이 메시지를 받았습니다.
이제 내 질문은 :
어떻게 이것이 가능합니까?
콘솔에 대한 '악용'방법이 몇 가지 있다는 것을 알고 있지만 콘솔에서 이러한 글꼴 서식을 어떻게 만들 수 있습니까? (그리고 console.log입니까?)
나는 오늘 페이스 북의 크롬에서 콘솔을 쳐다 보았다.
놀랍게도 콘솔에서이 메시지를 받았습니다.
이제 내 질문은 :
어떻게 이것이 가능합니까?
콘솔에 대한 '악용'방법이 몇 가지 있다는 것을 알고 있지만 콘솔에서 이러한 글꼴 서식을 어떻게 만들 수 있습니까? (그리고 console.log입니까?)
답변:
예, 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("%cThis will be formatted with blue text", "color: blue");
문서 인용,
% c 형식 지정자를 사용하여 console.log () 또는 관련 메서드를 사용하여 콘솔에 쓰는 모든 문자열에 사용자 지정 CSS 규칙을 적용합니다.
console.log
이전 브라우저는 예외와 함께 스크립트를 중지 할 수 있으므로 에서 형식 문자열을 사용하기 전에 호환되는 브라우저가 사용 중인지 확인하는 것이 좋습니다. caniuse는 Firefox 9와 Edge 79에서 도입 되었다고 말합니다 . Chrome은 Chrome 83 이전에 분명히 지원하기 시작했지만 정확히 언제인지 알 수 없습니다.