Chrome Geliştirici Araçları'nı aç

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome Geliştirici Araçları'nı açmanın birçok yolu vardır. Bu kapsamlı referanstan tercih ettiğiniz yöntemi seçin.

Geliştirici Araçları'na Chrome kullanıcı arayüzünü veya klavyeyi kullanarak erişebilirsiniz:

Ayrıca, Geliştirici Araçları'nı her yeni sekme için nasıl otomatik olarak açacağınızı öğrenin.

Geliştirici Araçları'nı Chrome menülerinden açma

Kullanıcı arayüzünü tercih ederseniz Chrome'daki açılır menülerden Geliştirici Araçları'na erişebilirsiniz.

DOM veya CSS'yi incelemek için Öğeler panelini açın

İncelemek için sayfadaki bir öğeyi sağ tıklayın ve İncele'yi seçin.

Chrome'daki açılır menüde bulunan İncele seçeneği.

Geliştirici Araçları, Öğeler panelini açar ve öğeyi DOM ağacında seçer. Stiller bölmesinde, seçilen öğeye uygulanan CSS kurallarını görebilirsiniz.

Nesne panelinde bir öğe seçildi.

Chrome'un ana menüsünden kullandığınız son paneli aç

Son Geliştirici Araçları panelini açmak için adres çubuğunun sağındaki Üç nokta menü. düğmesini tıklayın ve Diğer Araçlar > Geliştirici Araçları'nı seçin.

Üç noktalı menüden belirlenen Geliştirici Araçları seçeneği.

Alternatif olarak, son paneli kısayolla da açabilirsiniz. Daha fazla bilgi edinmek için sonraki bölüme bakın.

Kısayolları olan panelleri açın: Öğeler, Konsol veya son paneliniz

Klavyeyi tercih ediyorsanız işletim sisteminize bağlı olarak Chrome'da bir kısayola basın:

OS Öğeler Konsol Son paneliniz
Windows veya Linux Ctrl + Üst Karakter + C Ctrl + Üst Karakter + J F12
Ctrl + Üst Karakter + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

Kısayolları hatırlamanın kolay bir yolunu aşağıda bulabilirsiniz:

  • C, CSS anlamına gelir.
  • JavaScript için J.
  • I işareti seçiminizi belirtir.

C kısayolu, Öğeler panelini İncele'ye dokunun. denetleyici modunda açar. Bu mod, fareyle bir sayfadaki öğelerin üzerine geldiğinizde yararlı ipuçları gösterir. Ayrıca herhangi bir öğeyi tıklayarak CSS'sini Öğeler > Stiller bölmesinde de görüntüleyebilirsiniz.

Denetleyici modundaki, ipucu içeren Öğeler paneli.

Geliştirici Araçları kısayollarının tam listesi için Klavye kısayolları sayfasına göz atın.

Geliştirici Araçları'nı her yeni sekmede otomatik olarak aç

Chrome'u komut satırından çalıştırın ve --auto-open-devtools-for-tabs işaretini iletin:

  1. Çalışan tüm Chrome örneklerinden çıkın.

  2. Sık kullandığınız terminal veya komut satırı uygulamanızı çalıştırın.

  3. İşletim sisteminize bağlı olarak aşağıdaki komutu çalıştırın:

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs

  • Windows:

    start chrome --auto-open-devtools-for-tabs

  • Linux:

    google-chrome --auto-open-devtools-for-tabs

Geliştirici Araçları, siz Chrome'u kapatana kadar her yeni sekmede otomatik olarak açılır.

Sonraki adım

Ardından, DevTools'da daha hızlı gezinmenizi sağlayacak bazı faydalı kısayolları ve ayarları öğrenmek için aşağıdaki videoyu izleyin.

Daha uygulamalı bir öğrenme deneyimi için DevTools'u özelleştirme bölümüne bakın.