Jak uruchomić debuger JavaScript w Google Chrome?

418

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

— 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

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

6

Tutaj znajdziesz skróty umożliwiające dostęp do narzędzi programistycznych.

https://developer.chrome.com/devtools/docs/shortcuts

— hernanvicente
ź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ę:

— 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

— 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