Bagaimana Anda meluncurkan debugger JavaScript di Google Chrome?

418

Saat menggunakan Google Chrome, saya ingin men-debug beberapa kode JavaScript. Bagaimana saya bisa melakukan itu?

javascript google-chrome debugging google-chrome-devtools Kevin Driedger
sumber
Lihat Bagaimana cara membuka konsol JavaScript di berbagai browser? di Webmasters.SE
Bergi
developers.google.com/chrome-developer-tools/docs/…
Davut Gürbüz
Anda juga mungkin menemukan ini berguna: Bagaimana-untuk-mengakhiri-eksekusi-script-ketika-debugging-di-Google-Chrome
cssyphus

Jawaban:

318

Windows: CTRL- SHIFT- JATAU F12

Mac: ⌥- ⌘-J

Juga tersedia melalui menu perkakas (Alat> Konsol JavaScript):

Menu Konsol JavaScript

John Sheehan
sumber
23
Saya pikir jalan pintas telah berubah menjadi CTRL-SHIFT-J.
Martijn Laarman
5
atau Cmd-Shift-J untuk Mac. Ya Tuhan, aku suka <kbd>tag ini . Sayang sekali saya tidak bisa menggunakannya dalam komentar.
Anurag
11
Pintasan Mac tampaknya benar-benar berada Alt-Cmd-Jdi build Chrome terbaru.
Mathew Byrne
64
F12adalah cara paling sederhana
Juan Mendes
melihat pertanyaan ini membuat saya mengerti berapa banyak keterampilan javascript saya meningkat dari level pemula ke standar yang cukup layak
Kamal Reddy
399

Coba tambahkan ini ke sumber Anda:

debugger;

Ini berfungsi di sebagian besar, jika tidak semua browser. Tempatkan saja di suatu tempat dalam kode Anda, dan itu akan bertindak seperti breakpoint.

Omer van Kloeten
sumber
Sulit untuk menemukan apa yang disebut perintah ini jika Anda lupa!
Ahmed Fasih
4
Google juga sulit karena alasan mengapa ini tidak selalu berhasil. Apakah ada batasan untuk ini?
Seanonymous
2
Anda harus memiliki Alat Pengembang Chrome terbuka agar ini berfungsi (tekan F12 di Windwos / Linux, tidak tahu kunci pada Mac, atau hanya memeriksa elemen). Jika Anda memiliki Alat Pengembang terbuka, sedikit kehebatan adalah bahwa Anda dapat mengklik dan menahan tombol Refresh untuk menghapus cache.
toon81
2
@CallumRogers Hanya jika pengguna Anda menggunakan situs Anda dengan Alat Pengembang terbuka.
Josh M.
3
@ Josh. Harap dicatat bahwa meninggalkan ini dalam kode Produksi sangat buruk karena menyebabkan masalah dalam versi IE tertentu bahkan untuk pengguna yang tidak memiliki alat dev terbuka.
Omer van Kloeten
57

Windows dan Linux:

Ctrl+ Shift+ Iuntuk membuka Alat Pengembang

Ctrl+ Shift+ Juntuk membuka Alat Pengembang dan membawa fokus ke Konsol.

Ctrl+ Shift+ Cuntuk mengaktifkan mode Inspect Element.

Mac:

⌥+ ⌘+ Iuntuk membuka Alat Pengembang

⌥+ ⌘+ Juntuk membuka Alat Pengembang dan membawa fokus ke Konsol.

⌥+ ⌘+ Cuntuk mengaktifkan mode Inspect Element.

Sumber

Cara pintas lainnya

pengguna629309
sumber
3
Di mac, shorcut to toggle memeriksa mode elemen adalah shift ⌘ C (Shift - Command - C)
Roberto Barros
15

Tekan tombol F12fungsi di browser Chrome untuk meluncurkan debugger JavaScript dan kemudian klik "Script".

Pilih file JavaScript di atas dan tempatkan breakpoint ke debugger untuk kode JavaScript.

Balachandar P
sumber
3
F12 sepertinya tidak membuka debugger pada sistem Windows 7 saya dengan Chrome 23.0.1246.0 dev-m.
astletron
+1 untuk F12, ini juga berfungsi untuk IE, FF, Edge. Tidak perlu belajar Emacs seperti kombinasi tombol. Kecuali untuk Mac.
Csaba Toth
11

Ctrl + Shift + Jmembuka Alat Pengembang.

Senyai
sumber
6

Di Chrome 8.0.552 pada Mac, Anda dapat menemukan ini di bawah menu View / Developer / JavaScript Console ... atau Anda dapat menggunakan Alt+ CMD+ J.

Primc
sumber
2

Shift+ Control+ Imembuka jendela alat Pengembang. Dari gambar kiri bawah kedua (yang terlihat seperti berikut) akan membuka / menyembunyikan konsol untuk Anda:

Tampilkan Konsol

Premanshu
sumber
2

Untuk membuka panel 'Konsol' khusus, baik:

  • Gunakan pintasan keyboard
    • Di Windows dan Linux: Ctrl+ Shift+J
    • Di Mac: Cmd+ Option+J
  • Pilih ikon Menu Chrome, menu -> Alat Lainnya -> Konsol JavaScript . Atau jika Alat Pengembang Chrome sudah terbuka, presstab 'Konsol'.

Silakan lihat di sini

Venkat
sumber
1

Untuk pengguna Mac, buka Google Chrome -> menu View -> Developer -> JavaScript Console .

Tangkapan layar

Neo123
sumber
1

Sekarang google chrome telah memperkenalkan fitur baru. Dengan Menggunakan fitur ini Anda dapat mengedit kode Anda di penelusuran chrome. (Perubahan permanen pada lokasi kode)

Untuk itu Tekan F12 -> Tab Sumber - (sebelah kanan) -> Sistem File - di dalamnya silakan pilih lokasi kode Anda. dan kemudian browser chrome akan meminta Anda izin dan setelah itu kode akan tenggelam dengan warna hijau. dan Anda dapat memodifikasi kode Anda dan itu juga akan mencerminkan pada lokasi kode Anda (Ini berarti itu akan berubah secara permanen)

Terima kasih

stackinfostack
sumber
0

Cara paling efisien yang saya temukan untuk mendapatkan debugger javascript adalah dengan menjalankan ini:

chrome://inspect

Nestor Urquiza
sumber
0

F12 membuka panel pengembang

CTRL + SHIFT + C Akan membuka alat melayang-untuk-memeriksa di mana menyoroti elemen saat Anda mengarahkan mouse dan Anda dapat mengklik untuk menampilkannya di tab elemen.

CTRL + SHIFT + I Membuka panel pengembang dengan tab konsol

KLIK-KLIK> Periksa Klik kanan sembarang elemen, dan klik "periksa" untuk memilihnya di tab Elemen pada panel Pengembang.

ESC Jika Anda mengklik kanan dan memeriksa elemen atau serupa dan berakhir di tab "Elemen" melihat DOM, Anda dapat menekan ESC untuk beralih konsol ke atas dan ke bawah, yang bisa menjadi cara yang baik untuk menggunakan keduanya.

OG Sean
sumber
0

Ini adalah alat yang Anda lihat

tekan F12

alat pengembang

Johan Stiven Hernandez Osorio
sumber
-5

Dari konsol di Chrome, Anda bisa melakukannya console.log(data_to_be_displayed).

anand
sumber
3
Ini tidak akan membuka konsol. Ini hanya akan masuk ke konsol.
Shaz