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

Kayce Baskler
Kayce Baskçalar
Ceren Yeen
Jecelyn Yeen
Sofya Emelianova
Sofya Emelianova

Chrome Geliştirici Araçları'nı açmanın birçok yolu vardır. Bu kapsamlı referanstan en sevdiğ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 ediyorsanız 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 yer alan Denetle seçeneği.

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

Nesne panelinde seçili bir öğe.

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

Geliştirici Araçları'nın son 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.

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

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

Panelleri kısayollarla 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 ise seçiminizi belirtir.

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

İnceleyici modundaki, ipucu içeren Öğeler paneli.

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

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. Favori 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ı, Chrome'u kapatana kadar her yeni sekmede otomatik olarak açılır.

Sonraki adım

Ardından, Geliştirici Araçları'nda 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 Geliştirici Araçları'nı özelleştirme başlıklı makaleyi inceleyin.