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.
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.).
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>
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>
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:
- Nicholas C. Zakas: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript, Wydawnictwo Helion, 2017.
- Luis Atencio: Programowanie funkcyjne z JavaScriptem. Sposoby na lepszy kod, Wydawnictwo Helion, 2017.
- Nicholas C. Zakas: JavaScript. Zasady programowania obiektowego, Wydawnictwo Helion, 2014.