Na tej stronie wyjaśniamy, jak konsola Narzędzi deweloperskich w Chrome ułatwia tworzenie stron internetowych. Konsola ma 2 główne zastosowania: wyświetlanie dzienników i uruchamianie JavaScriptu.
Wyświetlanie zapisanych komunikatów
Programiści stron internetowych często rejestrują komunikaty w Konsoli, aby upewnić się, że JavaScript działa
nie jest oczekiwany. Aby zapisać wiadomość, wstaw wyrażenie takie jak console.log('Hello, Console!') do swojej
JavaScriptu. Gdy przeglądarka wykonuje JavaScript i widzi takie wyrażenie, wie,
że ma zarejestrować tę wiadomość w Konsoli. Na przykład załóżmy, że jesteś w
to proces zapisu kodu 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, jak wygląda konsola po wczytaniu strony i odczekaniu 3 sekund. Spróbuj które wiersze kodu powodują zapisanie wiadomości przez przeglądarkę.
Rysunek 1. Panel konsoli.
Programiści stron internetowych logują komunikaty z 2 ogólnych powodów:
- Upewnienie się, że kod jest wykonywany we właściwej kolejności.
- Sprawdzanie wartości zmiennych w określonym momencie.
Zapoznaj się z artykułem Pierwsze kroki z wiadomościami logowania, aby dowiedzieć się więcej o logowaniu. Zobacz konsolę
API, aby przejrzeć pełną listę metod console. Główna różnica między
to sposób wyświetlania danych, które rejestrujesz.
Wykonywanie kodu JavaScript
Konsola pełni też funkcję REPL. Aby wejść w interakcję ze stroną, możesz uruchomić kod JavaScript w konsoli który chcesz sprawdzić. Na przykład na Rys. 2 widać konsolę obok strony głównej Narzędzi deweloperskich. a Rysunek 3 pokazuje tę samą stronę po zmianie tytułu strony w konsoli.
Rysunek 2. Panel konsoli obok strony głównej Narzędzi deweloperskich.
Rysunek 3. Zmienianie tytułu strony w konsoli.
Modyfikowanie strony z poziomu konsoli jest możliwe, ponieważ konsola ma pełny dostęp do
window Narzędzia deweloperskie mają kilka udogodnień, które ułatwiają badanie strony. Dla:
załóżmy, że JavaScript zawiera funkcję o nazwie hideModal. W toku
debug(hideModal) wstrzymuje kod w pierwszym wierszu hideModal przy następnym wywołaniu.
Pełną listę funkcji użytkowych znajdziesz w dokumentacji interfejsu Console utilities API.
Uruchamianie JavaScriptu nie wymaga interakcji ze stroną. Możesz użyć konsoli, aby wypróbować
nowego kodu, który nie jest związany ze stroną. Załóżmy, że przed chwilą znasz wbudowany moduł
map() metody tablicy JavaScript i chcesz ją wypróbować. Konsola dobrze działa
aby wypróbować tę funkcję.
Zapoznaj się z artykułem Pierwsze kroki z uruchamianiem JavaScriptu, aby dowiedzieć się, jak uruchamiać go w w konsoli administracyjnej.