cheatsheets

Google Chrome DevTools Cheatsheet

Otworzenie

• Windows/Linux:
  • F12
  • Ctrl + Shift + I
• macOS:
  • Cmd + Opt + I

Wyświetlanie danych

• console.log( MESSAGE )
• console.info( MESSAGE )
• console.warn( MESSAGE )
• console.debug( MESSAGE )
• console.error( MESSAGE )
• console.dir( MESSAGE )

Gdzie MESSAGE może być czymkolwiek.

Debugowanie

1. Zatrzymaj interpreter:
   • Wpisz słowo debugger w kodzie aplikacji
   • albo kliknij w numer wiersza, aby ustawić “czujkę”
2. Odśwież aplikację i wygeneruj przypadek, który chcesz sprawdzić
3. Analizuj stan w okienku po prawej stronie

Analiza wydajności

const doSomeStuff = () => Math.random();
console.time("doSomeStuff execution time");
doSomeStuff();
console.timeEnd("doSomeStuff execution time");

// doSomeStuff execution time: 0.009033203125ms