Strona główna > Internet Explorer > IE 11 DEV–grupowanie elementów w konsoli

IE 11 DEV–grupowanie elementów w konsoli

Ten wpis będzie bardzo mocno powiązany z poprzednim, który znajdziemy pod tym adresem.

Bierzemy kod z poprzedniego odcinka I lekko modyfikujemy zostawiając jeden przycisk i dodajemy trochę wiecej informacji do konsoli z każdego przebiegu pętli:

<!DOCTYPE html>

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

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

                for (var i = 0; i < 10; i++) {
                    
                    console.log("Petla - przebieg %d", i + 1);
                    console.log("Poprzednia wartość licznika %d", licznikOdwiedzin.Licznik);

                    licznikOdwiedzin.Licznik++;
                    console.log("Nowa wartość licznika %d", licznikOdwiedzin.Licznik);

                    console.dir(licznikOdwiedzin);
                }

            }


        </script>


        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Wynik przebiegu takiego programu po wciśnięciu przycisku wygląda tak:

image

Patrząc na to trudno rozdzielić dane z jednego przebiegu pętli od drugiego, jest to podane wszystko w dość nieczytelnej formie.

Na szczęście mamy słowo kluczowe console.group które pozwala na grupowanie komunikatów po unikalnej nazwie, popatrzmy na nowy kod i jego wynik:

image

a kod wygląda tak:

<!DOCTYPE html>

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

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

                for (var i = 0; i < 10; i++) {
                    
                    var znacznik = "Petla - przebieg " + (i + 1);
                    console.group(znacznik);
                    
                    console.log("Poprzednia wartość licznika %d", licznikOdwiedzin.Licznik);

                    licznikOdwiedzin.Licznik++;
                    console.log("Nowa wartość licznika %d", licznikOdwiedzin.Licznik);

                    console.dir(licznikOdwiedzin);

                    console.groupEnd(znacznik);
                }

            }


        </script>


        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Bardzo ważne tutaj jest to by pilnować tego aby group i groupEnd miały tę samą nazwę. Teraz forma i sposób prezentacji jest dla mnie bardzo zadowalający, mam nadzieje, że Wam też się spodobała taka forma pokazywania danych zgrupowanych.

  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: