Strona główna > Internet Explorer > IE 11 DEV–logowanie do konsoli obiektów–console.dir

IE 11 DEV–logowanie do konsoli obiektów–console.dir

Dzisiaj chciałbym trochę opowiedzieć o tym jak logować do konsoli całe obiekty, tak byśmy mieli podgląd nie tylko na same zmienne co już prezentowałem w poprzednich artykułach, ale całe złożone elementy.

Zaczniemy od prostego kodu z dwoma przyciskami:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <script>

            function pokazOsobe() {
                var osoba = {
                    "Imie": "Marcin",
                    "Nazwisko": "Borecki",
                    "Wiek": "26"
                };

                console.dir(osoba);
            }


            function pokazWPetli() {
                var licznikOdwiedzin = {
                    "Drzwi": "Frontowe",
                    "Licznik": "0"
                };

                for (var i = 0; i < 10; i++) {
                    licznikOdwiedzin.Licznik++;
                    console.dir(licznikOdwiedzin);
                }

            }


        </script>


        <button onclick="pokazOsobe()">Pokaż osobę</button>
        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Kod realizuje następujące zadania:

  • Mamy dwa przyciski, które są podpięte do funkcji pokazOsobe I pokazWPetli
  • Funkcja pokazOsobe definiuje obiekt JSONowy, a w nim Imie I Nazwisko. Do konsoli logujemy obiekt poprzez wpisanie console.dir
  • Funkcja pokazWPetli wykorzystuje tą samą metodę, lecz robi to w pętli pokazując zmiany na obiekcie w trakcie działania programu. 

Poniżej prezentuję jak wygląda działanie console.dir na jednym obiekcie – widzimy dokładnie definicję obiektu oraz zmienne:

image

Klikając w drugi przycisk uzyskujemy podobny efekt:

image

Widzimy to, żę obiekty można zwijać i rozwijać – zwiększa to czytelność tego co serwuje nam konsola jako wynik działania Naszego małego programu.

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: