Do testowania i debugowania aplikacji internetowych w języku JavaScript służy Konsola.
Przegląd
Z tej strony dowiesz się, jak konsola w narzędziach Chrome dla programistów 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 schowku. Więcej informacji znajdziesz w artykule Otwieranie Konsoli w naszej dokumentacji funkcji.
Wyświetlanie skonfigurowanych 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ć komunikat w Konsoli. Załóżmy na przykład, że piszesz kod HTML i JavaScript dla 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 wygląd Konsoli po załadowaniu strony i po 3 sekundach oczekiwania. Spróbuj ustalić, które wiersze kodu spowodowały, że przeglądarka zapisała komunikaty.
Rysunek 1. panel Konsola.
Programiści stron internetowych rejestrują komunikaty z 2 głównych 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 konsoli 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 wchodzić w interakcje z przeglądaną stroną, możesz uruchamiać 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 pomocniczych znajdziesz w dokumentacji interfejsu API Console Utilities.
Podczas uruchamiania kodu JavaScript nie musisz wchodzić w interakcję ze stroną. W Konsoli możesz wypróbować nowy kod, który nie jest powią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ć. Konsola to dobre miejsce na wypróbowanie tej funkcji.
Aby dowiedzieć się więcej o uruchamianiu kodu JavaScript w Konsoli, zapoznaj się z artykułem Pierwsze kroki z uruchamianiem kodu JavaScript.