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?




Jawaban:


318

Windows: CTRL- SHIFT- JATAU F12

Mac: - -J

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

Menu Konsol JavaScript


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.


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


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.


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


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.



2

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

Tampilkan Konsol


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


1

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

Tangkapan layar


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


0

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

chrome://inspect


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.



-5

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


3
Ini tidak akan membuka konsol. Ini hanya akan masuk ke konsol.
Shaz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.