BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Internet Explorer 11 - grupowanie elementów w konsoli

11-03-2014 09:00 | Marcin Borecki
Poprzedni artykuł dotyczył pokazywania obiektów w konsoli Internet Explorera. Tym razem chciałbym pokazać jak takie obiekty można pogrupować.

Zaczniemy od razu od przykładu:

<!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.

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.