Do testowania i debugowania aplikacji internetowych w języku JavaScript służy Konsola.
Przegląd
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 zarejestrowanych komunikatów i uruchamianie kodu JavaScript.
Otwórz konsolę
Konsolę możesz otworzyć jako panel lub kartę w panelu. Aby dowiedzieć się, jak to zrobić, zapoznaj się z sekcją Otwieranie konsoli.
Wyświetlanie skonwertowanych wiadomości
Programiści i programistki stron internetowych często rejestrują komunikaty w Konsoli, aby mieć pewność, że kod JavaScript działa zgodnie z oczekiwaniami. Aby prowadzić rejestrowanie wiadomości, wstaw do kodu JavaScript wyrażenie takie jak console.log('Hello, Console!'). Gdy przeglądarka wykona kod JavaScript i zobaczy taki zapis, wie, że ma zapisać wiadomość w Konsoli. Załóżmy na przykład, że piszesz kod HTML i JavaScript na potrzeby 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 przedstawia konsolę po wczytaniu strony i odczekaniu 3 sekund. Spróbuj ustalić, które linie kodu spowodowały, że przeglądarka zapisała komunikaty.
Rysunek 1 panel Konsola.
Programiści stron internetowych logują komunikaty z 2 ogólnych powodów:
- Upewnij się, że kod jest wykonywany we właściwej kolejności.
- sprawdzanie wartości zmiennych w określonym momencie;
Aby dowiedzieć się więcej o logowaniu, przeczytaj artykuł Wprowadzenie do logowania wiadomości. Pełną listę metod console znajdziesz w dokumentacji interfejsu Console API. Główna różnica między tymi metodami polega na sposobie wyświetlania danych, które rejestrujesz.
Uruchamianie JavaScriptu
Konsola jest też REPL. Aby wejść w interakcję ze stroną, którą sprawdzasz, możesz uruchomić kod JavaScript w konsoli. Na przykład rysunek 2 przedstawia Konsolę obok strony głównej DevTools, a rysunek 3 – tę samą stronę po zmianie tytułu za pomocą Konsoli.
Rysunek 2. Panel Konsola obok strony głównej Narzędzi deweloperskich.
Rysunek 3. W Konsoli możesz zmienić tytuł strony.
Modyfikowanie strony w Konsoli jest możliwe, ponieważ Konsola ma pełny dostęp do window strony. Narzędzia deweloperskie mają kilka przydatnych funkcji, które ułatwiają sprawdzanie strony. Załóżmy, że kod JavaScript zawiera funkcję o nazwie hideModal. Uruchomienie funkcji
debug(hideModal)
zatrzymuje kod na pierwszym wierszu funkcji hideModal, gdy zostanie ona wywołana po raz kolejny.
Pełną listę funkcji narzędziowych 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 na przykład, że właśnie dowiadasz się o wbudowanej metodzie tablicy JavaScript map() i chcesz ją wypróbować. Dobrym miejscem do wypróbowania tej funkcji jest Konsola.
Aby dowiedzieć się więcej o uruchamianiu kodu JavaScript w Konsoli, zapoznaj się z artykułem Pierwsze kroki z uruchamianiem kodu JavaScript.