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

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Ayrıca, her yeni sekme için Geliştirme Araçları'nı otomatik olarak açmayı da öğrenebilirsiniz.

Chrome menülerinden Geliştirici Araçları'nı 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 Nesneler 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 İncele seçeneği.

Geliştirici Araçları, Nesneler panelini açar ve DOM ağacındaki öğeyi seçer. Stiller sekmesinde, seçili öğeye uygulanan CSS kurallarını görebilirsiniz.

Nesne panelinde seçilen bir öğe.

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

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

Üç nokta menüsünden Geliştirici Araçları seçeneği belirlenir.

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

Kısayollarla panelleri açma: Öğ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ı kolayca ezberlemenin bir yolu:

  • C, CSS'yi ifade eder.
  • JavaScript için J.
  • I, seçiminizi gösterir.

C kısayolu, denetleyici modunda Öğeler panelini açar. Bu modda, bir sayfadaki öğelerin üzerine geldiğinizde faydalı ipuçları gösterilir. Ayrıca, Öğeler > Stiller sekmesinde CSS'sini görüntülemek için herhangi bir öğeyi tıklayabilirsiniz.

Denetleyici modundaki öğeler paneli ve ipucu.

Geliştirici Araçları kısayollarının tam listesi için Klavye kısayolları başlıklı makaleyi inceleyin.

Geliştirici Araçları açıkken sayfayı önbellekle veya önbellek olmadan yeniden yükleme

Geliştirici Araçları açıkken sayfanızı üç şekilde yeniden yükleyebilirsiniz. Chrome penceresinin ana işlem çubuğunda Yeniden yükle düğmesine uzun basın ve seçeneklerden birini belirleyin:

Geliştirici Araçları açıkken üç yeniden yükleme seçeneği.

  • Normal Yeniden Yükleme Yeniden yükleme süresini kısaltmak için önbelleği kullanır.

    Kısayol: Cmd+R (macOS) veya Ctrl+R (Windows/Linux).

  • Yeniden yüklemeyi zorla. Önbelleği atlar ancak boşaltmaz.

    Kısayol: Cmd+Üst Karakter+R (macOS) veya Ctrl+Üst Karakter+R (Windows/Linux).

  • Önbelleği boşaltın ve sayfayı zorunlu olarak yeniden yükleyin. Yeniden yüklemeden önce tüm sitelerin önbelleğini boşaltır.

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

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

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

  2. En sevdiğiniz terminali veya komut satırı uygulamasını ç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

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

Sırada ne var?

Ardından, Geliştirici Araçları'nda daha hızlı gezinmek için bazı faydalı kısayolları ve ayarları öğrenmek üzere aşağıdaki videoyu izleyin.

Daha uygulamalı bir öğrenme deneyimi için Geliştirici Araçları'nı nasıl özelleştireceğinizi öğrenin.