Na tej stronie wyjaśniamy, jak konsola Narzędzi deweloperskich w Chrome ułatwia tworzenie stron internetowych. Konsola ma 2 główne zastosowania: wyświetlanie zalogowanych komunikatów i uruchamianie JavaScriptu.
Wyświetlanie zapisanych komunikatów
Programiści stron internetowych często logują komunikaty w konsoli, aby mieć pewność, że JavaScript działa zgodnie z oczekiwaniami. Aby zapisać wiadomość, wstaw w JavaScript wyrażenie takie jak console.log('Hello, Console!'). Gdy przeglądarka wykona JavaScript i zobaczy takie wyrażenie, wie, że musi zarejestrować komunikat w konsoli. Załóżmy np., że piszesz
kod HTML i JavaScript na stronie:
<!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 przedstawia, jak wygląda konsola po wczytaniu strony i odczekaniu 3 sekund. Spróbuj ustalić, które wiersze kodu powodują zarejestrowanie komunikatów przez przeglądarkę.
Rysunek 1. Panel konsoli.
Programiści stron internetowych logują komunikaty z 2 ogólnych powodów:
- Upewnienie się, że kod jest wykonywany we właściwej kolejności.
- Sprawdzanie wartości zmiennych w określonym momencie.
Zapoznaj się z artykułem Pierwsze kroki z wiadomościami logowania, aby dowiedzieć się więcej o logowaniu. Pełną listę metod console znajdziesz w dokumentacji interfejsu Console API. Główną różnicą między tymi metodami jest sposób wyświetlania logowanych danych.
Wykonywanie kodu JavaScript
Konsola pełni też funkcję REPL. Aby wejść w interakcję ze stroną, którą chcesz sprawdzić, możesz uruchomić kod JavaScript w konsoli. Na przykład Rysunek 2 przedstawia konsolę obok strony głównej Narzędzi deweloperskich, a Rysunek 3 – tę samą stronę po zmianie tytułu strony w konsoli.
Rysunek 2. Panel konsoli obok strony głównej Narzędzi deweloperskich.
Rysunek 3. Zmienianie tytułu strony w konsoli.
Modyfikowanie strony w konsoli jest możliwe, ponieważ konsola ma pełny dostęp do elementu window strony. Narzędzia deweloperskie mają kilka udogodnień, które ułatwiają badanie strony. Załóżmy np., że Twój JavaScript zawiera funkcję o nazwie hideModal. Uruchomienie debug(hideModal) wstrzymuje kod w pierwszym wierszu funkcji hideModal przy następnym wywołaniu.
Pełną listę funkcji użytkowych znajdziesz w dokumentacji interfejsu Console utilities API.
Uruchamianie JavaScriptu nie wymaga interakcji ze stroną. Możesz użyć konsoli, aby wypróbować
nowy kod, który nie jest związany ze stroną. Załóżmy np., że znasz już wbudowaną metodę tablicy JavaScript map() i chcesz z nią poeksperymentować. Konsola to dobre miejsce do przetestowania tej funkcji.
Zapoznaj się z artykułem Pierwsze kroki z uruchamianiem kodu JavaScript, aby dowiedzieć się, jak uruchamiać JavaScript w konsoli.