Chrome Geliştirici Araçları'nı açmanın birçok yolu vardır. Bu kapsamlı referans kılavuzundan en sevdiğiniz yöntemi seçin.
Geliştirici Araçları'na Chrome kullanıcı arayüzünü veya klavyeyi kullanarak erişebilirsiniz:
- Chrome'daki açılır menülerden.
- Öğeler'i, Konsolu veya kullandığınız son paneli açan özel kısayollar bulunur.
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.
DevTools, Öğeler panelini açar ve DOM ağacındaki öğeyi seçer. Stiller sekmesinde, seçili öğeye uygulanan CSS kurallarını görebilirsiniz.
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 düğmesini tıklayın ve Diğer Araçlar > Geliştirici Araçları'nı seçin.
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çma: Öğeler, Konsola 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 + 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 denetleyici modunda açar. Bu mod, fareyle sayfadaki öğelerin üzerine geldiğinizde faydalı ipuçları gösterir. İstediğiniz öğeyi tıklayarak Öğeler > Stiller sekmesinde CSS'sini de görüntüleyebilirsiniz.
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çma
Chrome'u komut satırından çalıştırın ve --auto-open-devtools-for-tabs
işaretini iletin:
Çalışan tüm Chrome örneklerinden çıkın.
Sık kullandığınız terminal veya komut satırı uygulamanızı çalıştırın.
İş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 başlıklı makaleyi inceleyin.