Google Chrome'da JavaScript hata ayıklayıcısını nasıl başlatırsınız?

418

Google Chrome'u kullanırken bazı JavaScript kodlarında hata ayıklamak istiyorum. Bunu nasıl yapabilirim?

javascript  google-chrome  debugging  google-chrome-devtools 
— Kevin Driedger
kaynak
— Bergi
— Davut Gürbüz
— cssyphus

Yanıtlar:

318

Windows: CTRL- SHIFT- JVEYA F12

Mac: ⌥- ⌘-J

İngiliz anahtarı menüsünden de erişilebilir (Araçlar> JavaScript Konsolu):

JavaScript Konsol Menüsü

— John Sheehan
kaynak
23
Kısayol o zamandan beri CTRL-SHIFT-J olarak değiştiğini düşünüyorum.
— Martijn Laarman
5
veya Mac'ler için Cmd-Shift-J. Tanrım bu <kbd>etiketi seviyorum . Çok kötü yorumlarda kullanamıyorum.
— Anurag
11
Mac kısayolu aslında Alt-Cmd-Jen son Chrome derlemesinde görünüyor.
— Mathew Byrne
64
F12en basit yoldur
— Juan Mendes
bu soruya baktığımda javascript becerilerimin acemi seviyelerden oldukça iyi standartlara ne kadar geliştiğini anlamam
— sağlanıyor
399

Bunu kaynağınıza eklemeyi deneyin:

debugger;

Tüm tarayıcılarda olmasa da çoğunda çalışır. Sadece kodunuzda bir yere yerleştirin ve bir kesme noktası gibi davranacaktır.

— Ömer van Kloeten
kaynak
Unutursanız bu komutun ne olduğunu bulmak zor!
— Ahmed Fasih
4
Bunun neden her zaman işe yaramadığı için Google'a gitmek de zor. Bununla ilgili sınırlamalar var mı?
— Seanonymous
2
Bunun çalışması için Chrome Geliştirici Araçları'nın açık olması gerekir (Windwos / Linux'ta F12 tuşuna basın, Mac'teki anahtarı bilmeyin veya yalnızca bir öğeyi inceleyin). Geliştirici Araçları açıksa, fazladan harika bir şey, önbelleği temizlemek için Yenile düğmesini tıklayıp basılı tutabilmenizdir.
— toon81
2
@CallumRogers Ancak kullanıcılarınız sitenizi Geliştirici Araçları açıkken kullanıyorsa.
— Josh M.
3
@JoshM. Dev kodları açık olmayan kullanıcılar için bile IE'nin belirli sürümlerinde sorunlara neden olduğu için bunu Üretim kodunda bırakmanın çok kötü olduğunu lütfen unutmayın.
— Omer van Kloeten
57

Windows ve Linux:

CtrlGeliştirici Araçlarını açmak için + Shift+ Ituşları

Ctrl+ Shift+ JAçık Geliştirici Araçları ve Konsol getirmek için söz veriyorum.

CtrlEleman İnceleme modunu değiştirmek için + Shift+ C.

Mac:

⌥Geliştirici Araçlarını açmak için + ⌘+ Ituşları

⌥+ ⌘+ JAçık Geliştirici Araçları ve Konsol getirmek için söz veriyorum.

⌥Eleman İnceleme modunu değiştirmek için + ⌘+ C.

Kaynak

Diğer kısayollar

— user629309
kaynak
3
Mac'te, öğe inceleme modunu değiştirmek için kullanılan kısayol kaydırma ⌘ C'dir (Shift - Komut - C)
— Roberto Barros
15

F12JavaScript hata ayıklayıcısını başlatmak için Chrome tarayıcısındaki işlev tuşuna basın ve ardından "Komut Dosyaları" nı tıklayın.

Üstteki JavaScript dosyasını seçin ve kesme noktasını JavaScript kodu için hata ayıklayıcıya yerleştirin.

— Balachandar P
kaynak
3
F12, Windows 7 sistemimdeki hata ayıklayıcıyı Chrome 23.0.1246.0 dev-m ile açmıyor gibi görünüyor.
— astletron
+1, F12 için, IE, FF, Edge için de çalışır. Tuş kombinasyonları gibi Emacs öğrenmeye gerek yok. Mac hariç.
— Csaba Toth
11

Ctrl+ Shift+ J, Geliştirici Araçlarını açar.

— Senyai
kaynak
6

Bir Mac'teki Chrome 8.0.552'de bunu Görünüm / Geliştirici / JavaScript Konsolu ... menüsünde bulabilirsiniz veya Alt+ CMD+ kullanabilirsiniz J.

— Primc
kaynak
2

Shift+ Control+ I, Geliştirici aracı penceresini açar. Sol alt ikinci görüntüden (aşağıdakine benzer) konsolu sizin için açar / gizler:

Konsolu göster

— Premanshu
kaynak
2

Özel 'Konsol' panelini açmak için:

  • Klavye kısayollarını kullanma
    • Windows ve Linux'ta: Ctrl+ Shift+J
    • Mac'te: Cmd+ Option+J
  • Chrome Menüsü simgesini, menü -> Diğer Araçlar -> JavaScript Konsolu'nu seçin . Veya Chrome Geliştirici Araçları zaten açıksa, press'Konsol' sekmesi.

Lütfen buraya bakın

— Venkat
kaynak
1

Mac kullanıcıları için Google Chrome -> menü Görünümü -> Geliştirici -> JavaScript Konsolu'na gidin .

Ekran görüntüsü

— Neo123
kaynak
1

Artık google chrome yeni bir özellik sunuyor. Bu özelliği kullanarak kodunuzu krom taramasında düzenleyebilirsiniz. (Kod konumunda kalıcı değişiklik)

Bunun için lütfen kod konumunuzu seçmek için F12 -> Kaynak Sekmesi - (sağ taraf) -> Dosya Sistemi - tuşlarına basın. ve sonra krom tarayıcı size izin isteyecek ve bu koddan sonra yeşil renkle batılacaktır. ve kodunuzu değiştirebilirsiniz ve kod konumunuzu da yansıtacaktır (Kalıcı değişiklik olacağı anlamına gelir)

Teşekkürler

— stackinfostack
kaynak
0

Javascript hata ayıklayıcı almak için bulduk en verimli yolu şu çalıştırmaktır:

chrome://inspect

— Nestor Urquiza
kaynak
0

F12 , geliştirici panelini açar

CTRL + ÜST KARAKTER + C Fareyle üzerine gelindiğinde öğeleri vurguladığı imleci denetleme aracını açar ve öğeler sekmesinde göstermek için tıklayabilirsiniz.

CTRL + ÜST KARAKTER + I Konsol sekmeli geliştirici panelini açar

SAĞ-TIKLAYIN> Denetle Herhangi bir öğeyi sağ tıklayın ve Geliştirici panelinin Öğeler sekmesinde seçmek için "denetle" yi tıklayın.

ESC Elemanı veya benzerini sağ tıklayıp incelerseniz ve DOM'a bakarak "Öğeler" sekmesinde kalırsanız , konsolu yukarı ve aşağı değiştirmek için ESC tuşuna basabilirsiniz , bu da her ikisini de kullanmanın güzel bir yolu olabilir.

— OG Sean
kaynak
-5

Chrome'daki konsoldan yapabilirsiniz console.log(data_to_be_displayed).

— anand
kaynak
3
Bu, konsolu açmayacaktır. Bu yalnızca konsola oturum açar.
— Shaz
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.