Home-theater-designers
Konsola przeglądarki internetowej jest jednym z najczęściej używanych narzędzi do debugowania aplikacji front-endowych. Interfejs API konsoli zapewnia programistom możliwość rozwiązywania błędów i rejestrowania komunikatów.
konsola.log() jest prawdopodobnie najczęściej używaną metodą w interfejsie API konsoli, ale istnieją również inne metody, których można użyć w przepływie pracy. W tym przewodniku przedstawiono różne metody konsoli przeglądarki internetowej, których można użyć do usprawnienia przepływu pracy debugowania.
Dlaczego logowanie jest ważne?
Logowanie do konsoli przeglądarki internetowej to jedna z najlepszych metod debugowania aplikacji typu front-end lub opartych na języku JavaScript.
Powiązane: 6 frameworków JavaScript, których warto się nauczyć
Większość nowoczesnych przeglądarek internetowych obsługuje interfejs API konsoli, dzięki czemu jest łatwo dostępny dla programistów. Obiekt konsoli jest odpowiedzialny za zapewnienie dostępu do konsoli debugowania przeglądarki. Implementacja może być różna w różnych przeglądarkach, ale większość metod będzie działać we wszystkich nowoczesnych przeglądarkach.
Wskazówka : Twoja konsola przeglądarki może uruchomić cały kod omówiony w tym przewodniku. naciskać F12 na klawiaturze, aby otworzyć narzędzia programistów przeglądarki w Chrome lub Firefox.
Logowanie wiadomości tekstowych
Jedną z najczęstszych metod konsoli jest konsola.log() . Po prostu wyprowadza wiadomość tekstową lub jakąś wartość do konsoli internetowej. W przypadku prostych wartości lub komunikatów tekstowych, konsola.log() metoda jest prawdopodobnie najlepszą opcją do użycia.
czy kije barana muszą pasować?
Aby wyprowadzić a Witaj świecie wiadomość, możesz użyć następujących.
console.log(`Hello World`); Kolejna szczególna cecha konsola.log() metoda to możliwość wydrukowania danych wyjściowych elementów DOM lub struktury części strony internetowej, na przykład, aby wyświetlić strukturę elementu body i wszystkiego, co się w nim znajduje, użyj następującego.
console.log(document.body) Wynikiem jest kolekcja elementów DOM w postaci drzewa HTML.
Rejestrowanie interaktywnych obiektów JavaScript
ten konsola.katalog () Metoda służy do rejestrowania interaktywnych właściwości obiektów JavaScript. Na przykład możesz go użyć do wyświetlenia elementów DOM na stronie internetowej.
Typowa wydajność konsola.katalog () Metoda składa się ze wszystkich właściwości określonego obiektu JavaScript w formacie JSON. Użyj poniższej metody, aby wydrukować właściwości wszystkich elementów w treści strony HTML:
console.dir(document.body) Ocena wyrażeń
Możesz być zaznajomiony z metodami potwierdzania z testów jednostkowych — cóż, konsola.assert() metoda działa w podobny sposób. Użyj konsola.assert() metoda oceny wyrażenia lub warunku.
Gdy metoda attach nie powiedzie się, konsola wypisuje komunikat o błędzie; w przeciwnym razie nic nie drukuje. Użyj poniższego kodu, aby ocenić, czy wiek danej osoby jest większy niż 18 lat:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Powyższa asercja kończy się niepowodzeniem i zostaje odpowiednio wydrukowany komunikat o błędzie.
Rejestrowanie danych w tabelach
Użyj konsola.tabela() metoda wyświetlania danych w formacie tabelarycznym. Dobrymi kandydatami do wyświetlenia w formie tabeli są tablice lub dane obiektowe.
Notatka : Niektóre przeglądarki, takie jak Firefox, mają maksymalny limit 1000 wierszy, które można wyświetlić za pomocą konsola.tabela() metoda.
Zakładając, że masz następujący zestaw obiektów samochodowych:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Możesz wyświetlić powyższą tablicę w tabeli, korzystając z poniższej metody:
console.table(cars); Rejestrowanie wiadomości według kategorii
Komunikaty konsoli przeglądarki internetowej są podzielone głównie na trzy grupy: błąd, ostrzeżenie i informacje.
Błędy
Aby w szczególności wydrukować komunikaty o błędach na konsoli za pomocą konsola.błąd() komunikaty o błędach są wyświetlane czerwoną czcionką.
console.error('error message'); Ostrzeżenia
Aby wydrukować ostrzeżenia, skorzystaj z poniższego. Podobnie jak w większości scenariuszy, komunikaty ostrzegawcze są wyświetlane w kolorze pomarańczowym:
console.warn('warning message');Informacje
Aby wydrukować ogólne informacje na konsoli, użyj konsola.info () metoda:
console.info('general info message') Łatwo jest filtrować lub znajdować wiadomości w konsoli przeglądarki, gdy są odpowiednio skategoryzowane.
Śledzenie przebiegu programu
Użyj konsola.trace() metoda drukowania śladu stosu przepływu lub wykonania programu. Jest to bardzo przydatna funkcja do debugowania, ponieważ wyświetla kolejność wykonywania funkcji w programie.
Aby zobaczyć konsola.trace() metody w akcji, możesz utworzyć trzy funkcje (jak poniżej) i umieścić ślad stosu w jednej z funkcji.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}W konsoli przeglądarki zadzwoń lub uruchom funkcjaJeden() a otrzymasz ślad stosu wywołań funkcji wydrukowanych w kolejności LIFO, ponieważ jest to stos.
Wykonanie programu czasowego
Aby określić, ile czasu zajmuje wykonanie operacji w twoim programie, możesz użyć konsola.czas() metoda. konsola.czas() jest zwykle używany razem z console.timeEnd () metoda, w której ta ostatnia jest używana do zakończenia licznika czasu.
Możesz mieć do 10 000 liczników uruchomionych na stronie internetowej, podkreślając znaczenie prawidłowego oznakowania swoich liczników czasu.
Aby określić, jak długo pętla for przejdzie przez liczby od 1 do 50 000, możesz użyć licznika w następujący sposób.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Rachunkowość
ten konsola.count() Metoda służy do śledzenia liczby wywołań funkcji lub fragmentu kodu w programie. Na przykład możemy śledzić, ile razy pętla for została wykonana w następujący sposób:
for(i=0; i<4; i++ ){
console.count();
}Grupowanie komunikatów dziennika
Podobnie jak metoda timera, konsola.grupa () , oraz konsola.groupEnd () metody są zwykle używane w parach.
Metoda grupowa pomaga w lepszym zorganizowaniu komunikatów dziennika. Na przykład możemy utworzyć grupę komunikatów ostrzegawczych z ostrzeżeniami etykiet w następujący sposób.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Dwa komunikaty w grupie ostrzegawczej są wizualnie skategoryzowane, jak widać na poniższym wyjściu.
Czyszczenie konsoli
Na koniec, oto kilka sposobów, dzięki którym możesz wyczyścić komunikaty dziennika w konsoli przeglądarki.
Użyj konsola.clear() metodę w następujący sposób.
console.clear() Możesz także wyczyścić konsolę przeglądarki za pomocą skrótów klawiaturowych przeglądarki.
Google Chrome : Ctrl + L
Firefox : Ctrl + Shift + L
Pełne korzystanie z konsoli przeglądarki
W tym przewodniku przedstawiono niektóre z różnych dostępnych metod konsoli przeglądarki internetowej, które ułatwiają debugowanie aplikacji frontonu. Interfejs API konsoli jest bardzo lekki, łatwy do nauczenia i szeroko obsługiwany w większości nowoczesnych przeglądarek.
negatywne skutki mediów społecznościowych
Wykonaj walidację CAPTCHA w swoim następnym projekcie i przetestuj swoje nowe umiejętności debugowania!
Udział Udział Ćwierkać E-mail Utwórz formularz weryfikacji CAPTCHA za pomocą HTML, CSS i JavaScriptZabezpiecz swoje witryny za pomocą weryfikacji CAPTCHA.
Czytaj dalej Powiązane tematy- Programowanie
- Tworzenie stron internetowych
- JavaScript
Mwiza z zawodu zajmuje się tworzeniem oprogramowania i pisze obszernie na Linuksie i programowaniu front-end. Niektóre z jego zainteresowań obejmują historię, ekonomię, politykę i architekturę przedsiębiorstwa.
Więcej od Mwizy KumwendyZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować