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?

— 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

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

6

Di sini, Anda dapat menemukan pintasan untuk mengakses alat pengembang.

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

— hernanvicente
sumber

2

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

— 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

— 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