Wykorzystaj kolory w console.log jak… Facebook

Zapraszam Cię do poradnika jak dodawać style do console.log w JavaScript. Razem przyjrzymy się, jak to dokładnie działa i jak możesz ciekawie wykorzystać tą funkcjonalność w swojej codziennej pracy. Zobaczysz też, jak niektóre firmy używają styli w console.log aby kreatywnie komunikować się ze swoimi użytkownikami.

Facebook próbuje odstraszać

Jeśli zdarzyło Ci się kiedyś zerknąć na konsolę będąc na stronie Facebooka to pewnie zobaczyłaś lub zobaczyłeś taki oto widok:

console_img27-1
Facebook.com używa styli w console.log do odstraszenia potencjalnych ataków

Możesz pomyśleć, że to zasługa genialnych ludzi z Facebooka, którzy potrafią robić takie czary w konsoli 😉  Okazuje się jednak, że takie stylowanie wiadomości to standardowa funkcjonalność dostępna dla każdego. Zobaczmy więc jak uzyskać taki i wiele innych ciekawych efektów.

Jak dodać style do console log?

Jeśli czytałaś lub czytałeś poprzedni artykuł z serii na temat substitution strings w console log to już wiesz, że do wiadomości tekstowych możemy przekazywać również symbole ze znakiem %. Są one interpretowane przez konsolę jako miejsce, w które zostanie podstawiona inna zmienna. Na podobnej zasadzie działa dodawanie styli. Używamy do tego symbolu %c, pod który zostanie podstawiony podany w kolejnym argumencie styl. Przekazane style będą zastosowane tylko do tekstu, który następuje po symbolu %c.

console_img28
Dodanie styli do console.log
console_img29
Wynik dodania koloru w console.log w przeglądarce Firefox

Spacja pomiędzy %c a tekstem nie jest konieczna, tutaj została dodana dla zwiększenia czytelności przykładu.

Wcale nie musimy się też ograniczać tylko do jednego zestawu styli dla całego tekstu. Możemy podać wiele razy %c oraz odpowiadającą im liczbę styli jako kolejne argumenty.

console_img30
Do console.log można dodać różne style do jednego tekstu
console_img31
Wynik dodania dwóch różnych styli do jednego tekstu w console.log

Zróbmy to tak jak Facebook

Możemy teraz wykorzystać naszą wiedzę do tego, aby stworzyć komunikat podobny do tego, jaki Facebook umieszcza w konsoli. Chcemy więc stworzyć coś takiego:

Komunikat widoczny w konsoli przeglądarki kiedy jesteśmy na stronie Facebooka

Oprócz color będziemy dodawać również kilka innych styli jak font-size czy font-family, dlatego umieścimy nasze style w osobnej zmiennej dla zwiększenia czytelności.

				
					const header_style =
    `font-family:helvetica;
    font-size:50px; 
    font-weight:bold;
    color:red;
    -webkit-text-stroke:1px black`;

console.log("%cStop!", header_style);
				
			

W konsoli Chrome otrzymamy taki oto wynik:

console_img33-1
Napis "Stop!" w console.log ostylowany według Facebooka w konsoli Chrome

Dodajmy teraz pozostałe napisy i style. Tekst komunikatu ma font-size: 20px oraz font-family: helvetica.

				
					const header_style =
    `font-family:helvetica;
    font-size:50px; 
    font-weight:bold;
    color:red;
    -webkit-text-stroke:1px black`;

const text_style =
    `font-family:helvetica;
    font-size:20px;`;
    
console.log("%cStop!", header_style);
console.log("%cTa funkcja przeglądarki jest przeznaczona dla twórców aplikacji. Jeżeli ktoś polecił Ci skopiować i wkleić tu coś, aby włączyć funkcję Facebooka lub włamać się na czyjeś konto, jest to oszustwo mające na celu uzyskanie dostępu do Twojego konta na Facebooku.", text_style);
console.log("%cZobacz https://www.facebook.com/selfxss, aby dowiedzieć się więcej.", text_style);
				
			

Wynik w konsoli Chrome:

console_img34-1
Cały komunikat Facebooka ostylowany w console.log w konsoli Chrome

Warto zwrócić uwagę na to, że nie dodaliśmy żadnych specjalnych styli do linku. Przeglądarka sama nadała odpowiednie formatowanie i stworzyła klikalny link.

Możesz się zastanawiać skąd wiem, jakie dokładnie style zastosował Facebook. Nie można ich wprawdzie podejrzeć w żadnym narzędziu developerskim, jednak z łatwością możemy znaleźć je w kodzie strony Facebooka.

Nietypowe ogłoszenia o pracę

Nie tylko Facebook posługuje się kolorowymi wiadomościami w konsoli do komunikacji ze swoimi użytkownikami. Również m.in. serwisy BBC czy The Guardian używają takich wiadomości do zaproszenia potencjalnych pracowników na rekrutację.

www.bbc.com zaprasza w konsoli programistów na rekrutację do firmy

 www.bbc.com zaprasza w konsoli programistów na rekrutację do firmy

Zaproszenie na rekrutację możemy też znaleźć otwierając konsolę na stronie www.theguardian.comZaproszenie na rekrutację możemy też znaleźć otwierając konsolę na stronie www.theguardian.com

Twoje logi giną w gąszczu innych komunikatów

Jeśli pracowałaś lub pracowałeś kiedyś w dużym i co najmniej kilkuletnim projekcie to zapewne znana jest Ci sytuacja, kiedy Twoje logi giną w gąszczu innych komunikatów w konsoli. Często są to różne ostrzeżenia czy nawet błędy, ale zdarzają się też logi dodane celowo na stałe z różnych powodów.

Nierzadko bywają też sytuacje, kiedy ktoś z zespołu nie usunął swoich logów. Chociaż akurat w tym wypadku najlepiej byłoby taką sytuację szybko wyjaśnić i wyczyścić niechciane komunikaty.

W każdym razie musimy poradzić sobie jakoś z wyszukiwaniem własnych wiadomości w konsoli, najlepiej szybko i bez konieczności skrolowania konsoli i wypatrywania szukanych tekstów.

Jak odnaleźć zaginione logi?

Jednym z szybkich sposobów jest na pewno użycie filtra w konsoli – możemy tam wpisać dowolną frazę i odfiltrować tylko szukane wiadomości. Problem jednak może pojawić się w sytuacji, kiedy logujemy kilka rzeczy na raz i w dodatku z różnych plików i takie filtrowanie może być dość męczące.

Jednym z rozwiązań może być właśnie zastosowanie styli dla naszych wiadomości i np. dodanie wyróżniającej się etykiety. Zobaczmy to na przykładzie.

				
					const css = `
  background-color: #1C8090;
  color: #fff;
  font-weight: bold;
  padding: 4px;
`;

console.log("%cElement DOM", css, document.body);
				
			

Efekt w przeglądarce Chrome:

console_img37
Dodanie styli w JavaScript w console.log do etykiety logów w przeglądarce Chrome

Jeśli zamiast przeglądarki Chrome używasz Firefox to możesz zauważyć, że dodanie padding do etykiety działa tylko horyzontalnie. Będzie to lepiej widoczne, kiedy zwiększymy nieco padding do 20px:

Brak paddingu w pionie w console.log w konsoli Firefox

Aby uzyskać pożądany przez nas efekt wystarczy zmienić właściwość display na inline-block. Teraz wszystkie style będą wyświetlane prawidłowo.

Po dodaniu display: inline-block przeglądarka Firefox poprawnie wyświetla padding w konsoli

Utworzenie własnej funkcji do stylowania console log

Jeśli chcemy wylogować wiele wartości na raz, możemy wykorzystać kolorowanie do szybkiego rozróżnienia czego dotyczy dany log. Aby nie pisać w kółko tego samego utworzymy funkcję getCss zwracającą nam nasze style. Do funkcji przekażemy color, który zostanie przekazany do właściwości background-color. Takie kolorowe etykiety pomogą nam szybko zorientować się w naszych logach. Spójrzmy na przykład.

				
					const getCss = (color) => {
  return `
      background-color: ${color};
      color: #fff;
      font-weight: bold;
      padding: 4px;
      display: inline-block;
    `
}

console.log("%cElement DOM", getCss("#00A0B0"), document.body);
console.log("%cIndex.js", getCss("#AD2BAD"), "logi z pliku index.js..");
console.log("%cUtils.js", getCss("#F71568"), "logi z pliku utils.js..");
console.log("%cFetch_response", getCss("#26ADE4"), "wynik zapytania do API..");
				
			

Wynik w konsoli:

console_img40
Dodanie różnokolorowych etykiet w console.log za pomocą funkcji getCss

Dodawanie ikon do logów

Poza stylami css możemy również dodać do naszych logów ikony. Pamiętaj tylko, że muszą być one dodane jako string.

				
					console.log('🛑 Wazne logi');
				
			
console_img41
Użycie ikony w console.log w JavaScript

A czy można dodać logo albo zdjęcie do console.log?

Tak, można! W aktualnej wersji Chrome (oraz Edge, Opera i Safari) możliwe jest dodanie również background-image z adresu url. Funkcjonalność ta nie działa aktualnie w Firefox. Możesz więc jeszcze ulepszyć komunikację zaproponowaną przez BBC czy The Guardian i dodać własne logo czy zdjęcie do swojego komunikatu.

				
					const logoStyle = `
  display: inline-block;
  margin-bottom: 30px;
  padding: 40px;
  background-image: url('https://javascriptbeztajemnic.pl/logo');
  background-size: contain;
  font-size: 0;
`;

console.log("%cLogo", logoStyle);
				
			
console_img42-1
W konsoli Chrome można dodać background-image do funkcji console.log

Jeśli chodzi o przeglądarkę Safari to niestety nie możemy w niej użyć paddingu i marginu.  Aby rozwiązać ten problem musimy posłużyć się właściwościami font-size oraz line-height, dzięki czemu pole z obrazkiem zostanie prawidłowo rozszerzone. Ważne jest, aby dopasować te wielkości do wymiarów obrazka oraz ustawić kolor czcionki na transparent. Poniżej rozszerzony kod oraz efekt w Safari:

				
					const logoStyle = `
  display: inline-block;
  margin-bottom: 30px;
  padding: 40px;
  background-image: url('https://javascriptbeztajemnic.pl/logo');
  background-size: contain;
  font-size: 26px; 
  line-height: 4;
  color: transparent;
`;

console.log("%cLo", logoStyle); // <-- skrócony tekst "Lo"
				
			
Efekt dodania obrazka w console.log z dodatkowymi stylami w konsoli Safari

Wystarczy więc dobrać wyświetlany kod do możliwości przeglądarki i możemy skonstruować całkiem ciekawy komunikat dla naszych użytkowników… lub developerów z naszego zespołu 😉

Zachęta do wyczyszczenia swoich logów w przeglądarce Chrome 😛

W przeglądarce Firefox możemy wyświetlić alternatywną wersję:

Alternatywna wersja w console.log dla przeglądarki Firefox

Poniżej uproszczony kod, który rozpoznaje przeglądarkę i na tej podstawie dobiera odpowiednie style.

				
					const titleStyle = `
  color: red;
  -webkit-text-stroke: 1px black;
  line-height: 1.2;
  font-weight: bold;
  font-size: 45px;
  font-family: helvetiva, sans-serif;
`;

const getLogoStyle = (browser) => {
  const padding = browser === "Safari" ? "120px 179px" : "120px 160px";
  const fontSize = browser === "Safari" ? "70px" : 0;

  return `
      display: inline-block;
      margin-bottom: 30px;
      padding: ${padding};
      background-image: url('https://javascriptbeztajemnic.pl/clear-your-logs');
      background-size: contain;
      font-size: ${fontSize}; 
      line-height: 6;
      color: transparent;
    `;
}

const browser = () => {
  const { userAgent } = window.navigator;

  if (userAgent.includes("Chrome")) {
    return "Chrome";
  }

  if (userAgent.includes("Firefox")) {
    return "Firefox";
  }

  if (userAgent.includes("Safari")) {
    return "Safari";
  }

  return "Firefox"; // defaultowo bezpieczniej będzie pokazać sam tekst
}

const createMessage = () => {
  if (browser() === "Firefox") {
    return console.log("%c⚡ CLEAR YOUR LOGS! ⚡", titleStyle);
  } else {
    return console.log("%cIm", getLogoStyle(browser()));
  }
}


console.log(createMessage());
				
			

Sposób na rozpoznawanie przeglądarki tak, jak powyżej potraktuj tylko roboczo! Jeśli podoba Ci się koncepcja takiej komunikacji z użytkownikami i chcesz jej użyć w swoim projekcie to skorzystaj z bardziej szczegółowych metod identyfikowania przeglądarek. Możesz np. skorzystać z jednej z popularnych bibliotek Bowser czy Platform.js. Szerzej o problemie z prawidłowym rozpoznawaniem przeglądarek możesz poczytać tutaj.

Podsumowanie

Teraz już dodawanie styli do console.log w JavaScript nie powinno stanowić dla Ciebie żadnego problemu. Możesz z łatwością wyróżnić swoje logi w konsoli albo dodać ciekawe komunikaty dla swoich współpracowników czy nawet użytkowników swojej aplikacji czy strony internetowej.

Bardzo chętnie zobaczę też Twoje pomysły na wykorzystanie styli w console log. Możesz napisać do mnie wiadomość lub podzielić się nimi w komentarzach.

Wartościowe materiały prosto na Twoją skrzynkę mailową

Zapisz się do newslettera i nie przegap kolejnych artykułów, które pogłębią Twoją wiedzę o Java Script. Absolutne zero spamu.

Uzupełniając powyższe pole wyrażam zgodę na zapis do newslettera, aby otrzymać więcej materiałów i ciekawych linków z portalu javascriptbeztajemnic.pl. Zero spamu. Mogę w każdej chwili wycofać zgodę zgodnie z Polityką Prywatności.