Do testowania i debugowania aplikacji internetowych w języku JavaScript służy Konsola.
Przegląd
Z tej strony dowiesz się, jak konsola w narzędziach Chrome dla programistów ułatwia tworzenie stron internetowych. Konsola ma 2 główne zastosowania: wyświetlanie zarejestrowanych komunikatów i uruchamianie kodu JavaScript.
Otwórz konsolę.
Konsolę możesz otworzyć jako panel lub kartę w schowku. Więcej informacji znajdziesz w artykule Otwieranie Konsoli w naszej dokumentacji funkcji.
Wyświetlanie skonfigurowanych wiadomości
Programiści i programistki stron internetowych często rejestrują komunikaty w Konsoli, aby mieć pewność, że kod JavaScript działa zgodnie z oczekiwaniami. Aby prowadzić rejestrowanie wiadomości, wstaw do kodu JavaScript wyrażenie takie jak console.log('Hello, Console!'). Gdy przeglądarka wykona kod JavaScript i zobaczy taki zapis, wie, że ma zapisać komunikat w Konsoli. Załóżmy na przykład, że piszesz kod HTML i JavaScript dla strony:
<!doctype html>
<html>
<head>
<title>Console Demo</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log('Loading!');
const h1 = document.querySelector('h1');
console.log(h1.textContent);
console.assert(document.querySelector('h2'), 'h2 not found!');
const artists = [
{
first: 'René',
last: 'Magritte'
},
{
first: 'Chaim',
last: 'Soutine'
},
{
first: 'Henri',
last: 'Matisse'
}
];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>
Rysunek 1 przedstawia wygląd Konsoli po załadowaniu strony i po 3 sekundach oczekiwania. Spróbuj ustalić, które wiersze kodu spowodowały, że przeglądarka zapisała komunikaty.