Na tej stronie wyjaśniamy, jak konsola Narzędzi deweloperskich w Chrome ułatwia tworzenie stron internetowych. Ma 2 główne zastosowania: wyświetlanie zapisanych komunikatów i uruchamianie kodu JavaScript.
Wyświetlanie zarejestrowanych wiadomości
Programiści stron internetowych często logują komunikaty w konsoli, aby sprawdzić, czy ich kod JavaScript działa zgodnie z oczekiwaniami. Aby zapisać wiadomość, wstaw w skrypcie JavaScript wyrażenie takie jak console.log('Hello, Console!'). Gdy przeglądarka wykona Twój JavaScript i zobaczy takie wyrażenie, wie, że powinna zarejestrować wiadomość w konsoli. Załóżmy np., że piszesz kod HTML i JavaScript strony:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
Rysunek 1 pokazuje, jak wygląda konsola po wczytaniu strony i odczekaniu 3 sekund. Spróbuj ustalić, które wiersze kodu spowodowały zapisanie wiadomości przez przeglądarkę.
Rysunek 1. Panel konsoli.
Komunikaty dziennika dla programistów stron internetowych pojawiają się z 2 ogólnych powodów:
- Upewnij się, że kod jest uruchamiany we właściwej kolejności.
- Badanie wartości zmiennych w określonym momencie.
Zapoznaj się z artykułem Pierwsze kroki z wiadomościami Logging, aby dowiedzieć się więcej o rejestrowaniu. Pełną listę metod console znajdziesz w dokumentacji interfejsu API konsoli. Główna różnica między tymi metodami polega na wyświetlaniu danych, które rejestrujesz.
Wykonywanie JavaScriptu
Konsola to też REPL. Aby wejść w interakcję z badaną stroną, możesz uruchomić w konsoli JavaScript. Na przykład Rysunek 2 przedstawia konsolę obok strony głównej Narzędzi dla deweloperów, a Rysunek 3 przedstawia tę samą stronę po zmianie tytułu strony w konsoli.
Rysunek 2. Panel Console obok strony głównej Narzędzi deweloperskich.
Rysunek 3. Użycie konsoli do zmiany tytułu strony.
Modyfikowanie strony w konsoli jest możliwe, ponieważ ma ona pełny dostęp do window strony. Narzędzia deweloperskie mają kilka udogodnień, które ułatwiają sprawdzanie strony. Załóżmy np., że JavaScript zawiera funkcję o nazwie hideModal. Wykonanie debug(hideModal) spowoduje wstrzymanie kodu w pierwszym wierszu elementu hideModal przy następnym wywołaniu.
Pełną listę funkcji narzędziowych znajdziesz w dokumentacji interfejsu Console Utilities API.
Uruchomienie JavaScriptu nie wymaga interakcji ze stroną. Możesz za pomocą konsoli wypróbować
nowy kod, który nie jest związany ze stroną. Załóżmy np., że wiesz już o wbudowanej metodzie tablicy JavaScript map() i chcesz z nią poeksperymentować. Konsola to dobre miejsce,
aby wypróbować funkcję.
Zapoznaj się z sekcją Pierwsze kroki z JavaScriptem, by nabrać doświadczenia w wykonywaniu kodu JavaScript w konsoli.