Jak uruchomić debuger JavaScript w Google Chrome?

418

Podczas korzystania z Google Chrome chcę debugować kod JavaScript. Jak mogę to zrobić?

javascript google-chrome debugging google-chrome-devtools Kevin Driedger
źródło
Zobacz Jak otworzyć konsolę JavaScript w różnych przeglądarkach? na Webmasters.SE
Bergi
developers.google.com/chrome-developer-tools/docs/…
Davut Gürbüz
Może się to również przydać: How-to-terminate-script-wykonanie-when-debuggowanie-w-Google-Chrome
cssyphus

Odpowiedzi:

318

Windows: CTRL- SHIFT- JLUB F12

Mac: ⌥- ⌘-J

Dostępne również w menu klucza (Narzędzia> Konsola JavaScript):

Menu konsoli JavaScript

John Sheehan
źródło
23
Myślę, że skrót zmienił się na CTRL-SHIFT-J.
Martijn Laarman
5
lub Cmd-Shift-J dla komputerów Mac. Boże, kocham ten <kbd>tag. Szkoda, że ​​nie mogę tego użyć w komentarzach.
Anurag
11
Wygląda na to, że skrót na Maca jest Alt-Cmd-Jnajnowszą wersją Chrome.
Mathew Byrne,
64
F12jest najprostszym sposobem
Juan Mendes,
spojrzenie na to pytanie pozwala mi zrozumieć, o ile moje umiejętności w zakresie obsługi javascript poprawiły się z poziomu początkującego do całkiem przyzwoitych standardów
Kamal Reddy,
399

Spróbuj dodać to do źródła:

debugger;

Działa w większości, jeśli nie we wszystkich przeglądarkach. Po prostu umieść go gdzieś w kodzie, a będzie on działał jak punkt przerwania.

Omer van Kloeten
źródło
Trudno znaleźć nazwę tego polecenia, jeśli o tym zapomniałeś!
Ahmed Fasih
4
Google jest również trudny z powodów, dla których to nie zawsze działa. Czy są na to ograniczenia?
Seanonymous
2
Aby to zadziałało, musisz mieć otwarte narzędzia programistyczne Chrome (naciśnij klawisz F12 w systemie Windwos / Linux, nie znam klucza na komputerze Mac lub po prostu sprawdź element). Jeśli masz otwarte Narzędzia dla programistów, dodatkową zaletą jest to, że możesz kliknąć i przytrzymać przycisk Odśwież, aby wyczyścić pamięć podręczną.
toon81
2
@CallumRogers Tylko wtedy, gdy użytkownicy korzystają z Twojej witryny przy otwartych Narzędziach programisty.
Josh M.
3
@JoshM. Pamiętaj, że pozostawienie tego w kodzie produkcyjnym jest bardzo złe, ponieważ powoduje problemy w niektórych wersjach IE nawet dla użytkowników, którzy nie mają otwartych narzędzi programistycznych.
Omer van Kloeten,
57

Windows i Linux:

Ctrl+ Shift+ Iklucze, aby otworzyć Narzędzia programistyczne

Ctrl+ Shift+, Jaby otworzyć Narzędzia programistyczne i skoncentrować się na konsoli.

Ctrl+ Shift+, Caby przełączyć tryb Inspect Element.

Prochowiec:

⌥+ ⌘+ Iklucze, aby otworzyć Narzędzia programistyczne

⌥+ ⌘+, Jaby otworzyć Narzędzia programistyczne i skoncentrować się na konsoli.

⌥+ ⌘+, Caby przełączyć tryb Inspect Element.

Źródło

Inne skróty

użytkownik629309
źródło
3
Na komputerze Mac skrótem do przełączania trybu sprawdzania elementu jest shift ⌘ C (Shift - Command - C)
Roberto Barros
15

Naciśnij F12klawisz funkcyjny w przeglądarce Chrome, aby uruchomić debuger JavaScript, a następnie kliknij „Skrypty”.

Wybierz plik JavaScript na górze i umieść punkt przerwania w debuggerze dla kodu JavaScript.

Balachandar P.
źródło
3
F12 nie wydaje się otwierać debugera w moim systemie Windows 7 z Chrome 23.0.1246.0 dev-m.
astletron
+1 dla F12, działa również dla IE, FF, Edge. Nie musisz się uczyć Emacsa jak kombinacji klawiszy. Z wyjątkiem komputerów Mac.
Csaba Toth
11

Ctrl+ Shift+ Jotwiera narzędzia programistyczne.

Senyai
źródło
6

W Chrome 8.0.552 na Macu możesz to znaleźć w menu Widok / Konsola programisty / JavaScript ... lub możesz użyć Alt+ CMD+ J.

Primc
źródło
2

Shift+ Control+ Iotwiera okno narzędzia programisty. Z lewego dolnego lewego drugiego obrazu (który wygląda następująco) otworzy / ukryje konsolę:

Pokaż konsolę

Premanshu
źródło
2

Aby otworzyć dedykowany panel „Konsoli”:

  • Użyj skrótów klawiaturowych
    • W systemach Windows i Linux: Ctrl+ Shift+J
    • Na Macu: Cmd+ Option+J
  • Wybierz ikonę menu Chrome, menu -> Więcej narzędzi -> Konsola JavaScript . Lub jeśli Narzędzia programistyczne Chrome są już otwarte, presskarta „Konsola”.

Proszę odnieść się tutaj

Venkat
źródło
1

Użytkownicy komputerów Mac powinni przejść do Google Chrome -> Widok menu -> Deweloper -> Konsola JavaScript .

Zrzut ekranu

Neo123
źródło
1

Teraz Google Chrome wprowadził nową funkcję. Korzystając z tej funkcji możesz edytować kod w przeglądarce Chrome. (Trwała zmiana lokalizacji kodu)

W tym celu naciśnij F12 -> zakładka Źródło - (prawa strona) -> System plików - w tym miejscu wybierz lokalizację kodu. a następnie przeglądarka Chrome poprosi o pozwolenie, a po tym kod zostanie zatopiony w kolorze zielonym. i możesz zmodyfikować swój kod, który będzie również odzwierciedlał twoją lokalizację kodu (oznacza to, że zmieni się na stałe)

Dzięki

stackinfostack
źródło
0

Najskuteczniejszym sposobem na uzyskanie dostępu do debugera javascript jest uruchomienie tego:

chrome://inspect

Nestor Urquiza
źródło
0

F12 otwiera panel programisty

CTRL + SHIFT + C Otworzy narzędzie do najechania myszką w celu sprawdzenia, w którym podświetla elementy podczas najechania kursorem i możesz kliknąć, aby pokazać je na karcie elementów.

CTRL + SHIFT + I Otwiera panel programisty z kartą konsoli

KLIKNIJ PRAWO> Kliknij Sprawdź prawym przyciskiem myszy dowolny element, a następnie kliknij „ Sprawdź ”, aby wybrać go na karcie Elementy panelu programisty.

ESC Jeśli klikniesz prawym przyciskiem myszy i sprawdzisz element lub podobny element i skończysz w zakładce „Elementy” patrząc na DOM, możesz nacisnąć ESC, aby przełączać konsolę w górę i w dół, co może być dobrym sposobem na użycie obu tych elementów.

OG Sean
źródło
0

To są narzędzia, które widzisz

wciśnij F12

narzędzia deweloperskie

Johan Stiven Hernandez Osorio
źródło
-5

Z konsoli w Chrome możesz to zrobić console.log(data_to_be_displayed).

anand
źródło
3
To nie otworzy konsoli. Spowoduje to jedynie zalogowanie się do konsoli.
Shaz