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 en sevdiğiniz yolu seçin.

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

Ayrıca her yeni sekme için Geliştirici Araçları'nı otomatik olarak açmayı öğrenin.

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

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'da açılır menüdeki Denetle seçeneği

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

Nesne panelinde seçilen bir öğe.

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

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ı.

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

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

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

Klavye kullanmayı tercih ederseniz 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 + Seçenek + C Cmd + Option + J Fn + F12
Cmd + Option + I

Kısayolları ezberlemenin kolay bir yolu:

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

C kısayolu, Öğeler panelini İnceleyin. denetleyici modunda açar. Bu mod, fareyle sayfadaki öğelerin üzerine geldiğinizde faydalı ipuçları gösterir. Ayrıca Elements > Stiller bölmesi.

Denetleyici modunda 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çın

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 sekme için otomatik olarak açılır.

Sırada ne var?

Ardından, aşağıdaki videoyu izleyerek Geliştirici Araçları'nda daha hızlı gezinmenizi sağlayacak bazı faydalı kısayolları ve ayarları öğrenebilirsiniz.

Daha uygulamalı bir öğrenme deneyimi için Geliştirici Araçları'nı özelleştirme bölümüne bakın.