Ocena użytkowników: 0 / 5

Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

Podczas pracy nad stronami internetowymi warto debugować kod JavaScript za pomocą console.log(), wyniki są wyświetlane w konsoli przeglądarki (rys. 1.). Jest to jeden z lepszych sposobów do sprawdzenia, czy aktualnie napisany przez nas kod zachowuje się w zaplanowany sposób.

 

Debugowanie kodu, konsola JavaScript Chrome Rys. 1. Debugowanie kodu, konsola JavaScript Chrome

 

W artykule zaprezentowaliśmy konsole w przeglądarce Google Chrome. Po uruchomieniu przeglądarki wybieramy z menu Widok > Programista > Konsola JavaScript (rys. 2.). Inny sposób to Widok > Programista > Narzędzia dla programistów, następnie w otwartym oknie wymieramy zakładkę Console (rys. 1.).

 

Otwieranie konsoli w przeglądarce Chrome Rys. 2. Otwieranie konsoli w przeglądarce Chrome

 

Różne sposoby użycia console.log() zaprezentowano na listingach poniżej.

 

Listing 1. Przykład javascript-konsola-1.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debugowanie kodu JavaScript konsola, przykład 1</title>
<script type="text/javascript">
    /* Wynik przykładu zaprezentowano na rysunku 1 */
    console.log("Hello World!");
</script>
</head>
<body>
    <h1>Debugowanie kodu JavaScript konsola, przykład 1</h1>
</body>
</html>

 

Listing 2. Przykład javascript-konsola-2.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debugowanie kodu JavaScript konsola, przykład 2</title>
<script type="text/javascript">

/* Sprawdzamy za pomocą console.log() zwartość utworzonej tablicy (rys. 3.) */
var names = ["Piotr", "Iwona", "Tomek", "Małgorzata"];
console.log(names);

</script>
</head>
<body>
    <h1>Debugowanie kodu JavaScript konsola, przykład 2</h1>
</body>
</html>

 

Debugowanie kodu, konsola JavaScript Chrome (Listing 2) Rys. 3. Debugowanie kodu, konsola JavaScript Chrome (Listing 2)

 

Listing 3. Przykład javascript-konsola-3.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debugowanie kodu JavaScript konsola, przykład 3</title>
<script type="text/javascript">

/* Sprawdzamy za pomocą console.log(), czy utworzona metoda w klasie Calculator działa prawidłowo (rys. 4.) */
class Calculator {
    add(a, b) {
        let result = a + b;
        console.log(`Wynik: ${a} + ${b} = ${result}`);
        return result;
    }
}

var myCalculator = new Calculator();
var result = myCalculator.add(2,5);
console.log("Wynik: " + result);

</script>
</head>
<body>
    <h1>Debugowanie kodu JavaScript konsola, przykład 3</h1>
</body>
</html>

 

Debugowanie kodu, konsola JavaScript Chrome (Listing 3) Rys. 4. Debugowanie kodu, konsola JavaScript Chrome (Listing 3) 

 

Materiały do artykułu można znaleźć w pliku javascript-konsola.zip – kodowanie plików tekstowych UTF-8, znaki końca linii (Unix).

 

Wybrane książki:

Książki Helion