Omówienie konsoli

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 dzienników i uruchamianie JavaScriptu.

Wyświetlanie zapisanych komunikatów

Programiści stron internetowych często rejestrują komunikaty w Konsoli, aby upewnić się, że JavaScript działa nie jest oczekiwany. Aby zapisać wiadomość, wstaw wyrażenie takie jak console.log('Hello, Console!') do swojej JavaScriptu. Gdy przeglądarka wykonuje JavaScript i widzi takie wyrażenie, wie, że ma zarejestrować tę wiadomość w Konsoli. Na przykład załóżmy, że jesteś w to proces zapisu kodu 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, jak wygląda konsola po wczytaniu strony i odczekaniu 3 sekund. Spróbuj które wiersze kodu powodują zapisanie wiadomości przez przeglądarkę.

Panel konsoli.

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. Zobacz konsolę API, aby przejrzeć pełną listę metod console. Główna różnica między to sposób wyświetlania danych, które rejestrujesz.

Wykonywanie kodu JavaScript

Konsola pełni też funkcję REPL. Aby wejść w interakcję ze stroną, możesz uruchomić kod JavaScript w konsoli który chcesz sprawdzić. Na przykład na Rys. 2 widać konsolę obok strony głównej Narzędzi deweloperskich. a Rysunek 3 pokazuje tę samą stronę po zmianie tytułu strony w konsoli.

Panel konsoli obok strony głównej Narzędzi deweloperskich.

Rysunek 2. Panel konsoli obok strony głównej Narzędzi deweloperskich.

Zmienianie tytułu strony w konsoli.

Rysunek 3. Zmienianie tytułu strony w konsoli.

Modyfikowanie strony z poziomu konsoli jest możliwe, ponieważ konsola ma pełny dostęp do window Narzędzia deweloperskie mają kilka udogodnień, które ułatwiają badanie strony. Dla: załóżmy, że JavaScript zawiera funkcję o nazwie hideModal. W toku debug(hideModal) wstrzymuje kod w pierwszym wierszu 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ć nowego kodu, który nie jest związany ze stroną. Załóżmy, że przed chwilą znasz wbudowany moduł map() metody tablicy JavaScript i chcesz ją wypróbować. Konsola dobrze działa aby wypróbować tę funkcję.

Zapoznaj się z artykułem Pierwsze kroki z uruchamianiem JavaScriptu, aby dowiedzieć się, jak uruchamiać go w w konsoli administracyjnej.