Debuguj JavaScript w Chrome

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo

Nawet dla profesjonalistów kodowanie nie jest łatwe. Prawdopodobnie dlatego programiści spędzają dużo czasu na szukaniu błędów w swoim kodzie. Czasami błąd jest oczywisty, powodując awarię całego programu od razu. Innym razem błąd jest bardzo subtelny, dając dobrze wyglądające wyjście, które zawsze zawiera wady.

Jakkolwiek sprzeczne z intuicją może to zabrzmieć, oczywiste błędy są lepsze, ponieważ są łatwiejsze do znalezienia. Podstępny błąd może czaić się w codziennym oprogramowaniu przez lata.

Pomyśl o tym w ten sposób: gdybyś był w budynku, który powoli wypełniał się trującym gazem, chciałbyś, aby gaz był bezwonny , bez smaku i bezbarwny lub jasnofioletowy i pachnący jak puder. cannon?

Debugowanie to kluczowy krok w procesie rozwoju , dostępnych jest wiele narzędzi do tego celu. Dzisiaj porozmawiamy o debugowaniu JavaScript w Chrome. JavaScript jest zdecydowanie jednym z najpopularniejszych języków ogólnie i prawdopodobnie najpopularniejszym językiem do tworzenia stron internetowych. Podobnie Chrome jest jedną z najczęściej używanych przeglądarek internetowych.

Jako ktoś, kto wkrótce zostanie programistą internetowym na żądanie , warto zapoznać się z debugowaniem JavaScript w Chrome. Zachęcam do śledzenia eleganckiej przykładowej strony > stworzony specjalnie do ćwiczenia debugowania.

Korzystanie z panelu Źródło

Chrome jest wyposażony w zestaw potężnych narzędzi, które pozwalają programistom sprawdzać kod źródłowy witryny , w tym HTML, CSS i JavaScript.

To świetny sposób na przeczytanie kodu ulubionych witryn i nauczenie się, jak je debugować.

Wybierz przewodnik

Od 2019 r. i najnowszej wersji Chrome dostęp do narzędzi programistycznych jest tak prosty, jak przejście do Widok -> programista -> Programowanie narzędzi w górnym menu przeglądarki na ekranie. Spowoduje to otwarcie panelu programistów Chrome z wieloma przydatnymi kartami.

Zakładka „Elementy” umożliwia przeglądanie kodu HTML i JavaScript tworzących stronę internetową. Zakładka „Konsola” daje Ci miejsce na majstrowanie przy JavaScript. Otwórz konsolę dla przykładowej strony połączonej w poprzedniej sekcji i wpisz console.log (`hello`). To polecenie JavaScript powinno działać w Twojej przeglądarce.

Karta „Źródła” pokazuje rzeczywistą zawartość plików źródłowych strony i umożliwia ustawienie punktów przerwania i sprawdzenie stosu wywołań.

Punkty przerwania i debugery ;

Wraz z instrukcjami drukowania punkty przerwania są jedną z podstawowych technik używanych przez programistów do debugowania.

Definiowanie zamknięcia punktu przerwania w konsoli Chrome jest proste — po prostu kliknij numer éro Byłem z wiersza, który Cię interesuje. Punkt przerwania to miejsce, w którym kod automatycznie zatrzymuje się podczas wykonywania. Pozwala to na sprawdzenie wszystkiego, co wydarzyło się do tej pory, w tym rzeczy takich jak bieżąca wartość każdej zmiennej i wszelkie przekształcenia, które miały miejsce.

Punkty przerwania to świetny sposób na sprawdzenie postępów kod, aby sprawdzić, czy coś poszło nie tak.

Możemy osiągnąć ten sam efekt ręcznie, umieszczając debugger; w naszym kodzie, od którego chcemy rozpocząć proces debugowania.

Ustawiając wiele punktów przerwania, możemy uzyskać zbliżenia wszystkiego, co robi nasz kod, co znacznie ułatwia wykrywanie błędów.

Chociaż z pewnością nie jest to wszystko, czego potrzebujesz do opanowania sztuki debugowania, jest to miły plus. Najbardziej poprawną korektą kodu jest bardzo cierpliwe i bardzo jasne przemyślenie tego, co chciałeś zrobić ze swoim kodem i porównanie go z tym, co faktycznie powiedziałeś w swoim kodzie. . ;