Web Tarayıcısı Geliştirici Araçları Nasıl Kullanılır

2024 Yazar: Abigail Brown | [email protected]. Son düzenleme: 2023-12-17 07:04

Web'de gezinmek isteyen günlük kullanıcılara odaklanan çoğu tarayıcı üreticisine ek olarak, web geliştiricilerine, tasarımcılarına ve bu kullanıcıların eriştiği sitelerin ve web sitelerinin güçlü web sitelerini entegre ederek geliştirmelerine yardımcı olan kalite güvence uzmanlarına da hizmet verirler. araçları doğrudan tarayıcıların kendilerine.

Bir tarayıcıda bulunan tek programlama ve test araçlarının bir sayfanın kaynak kodunu görüntülemenize izin verdiği ve başka bir şey yapmadığınız günler geride kaldı. Günümüzün tarayıcıları, JavaScript snippet'lerini yürütme ve hata ayıklama, DOM öğelerini inceleme ve düzenleme, darboğazları belirlemek için uygulamanız veya sayfanız yüklenirken gerçek zamanlı ağ trafiğini izleme, CSS performansını analiz etme, kodunuzun çok fazla bellek veya çok fazla CPU döngüsü kullanmamak ve çok daha fazlası.

Test perspektifinden, duyarlı tasarımın ve yerleşik simülatörlerin büyüsü sayesinde bir uygulamanın veya web sayfasının farklı tarayıcılarda ve farklı cihazlarda ve platformlarda nasıl görüneceğini yeniden oluşturabilirsiniz. En iyi yanı, tüm bunları tarayıcınızdan ayrılmak zorunda kalmadan yapabilmenizdir!

Aşağıdaki eğiticiler, çeşitli popüler web tarayıcılarında bu geliştirici araçlarına nasıl erişeceğiniz konusunda size yol gösterir.

Google Chrome

Chrome geliştirici araçları, kodu düzenlemenize ve hatalarını ayıklamanıza, performans sorunlarını ortaya çıkarmak için bileşenleri tek tek denetlemenize, Android veya iOS çalıştıranlar da dahil olmak üzere farklı cihaz ekranlarını simüle etmenize ve diğer birçok yararlı işlevi gerçekleştirmenize olanak tanır.

1. Chrome'un ana menüsünü seçin, üç yatay çizgiyle işaretlenir ve tarayıcının sağ üst köşesinde bulunur.

2. Açılır menü göründüğünde, fare imlecinizi Diğer araçlar seçeneğinin üzerine getirin.

   

3. Şimdi bir alt menü görünmelidir. Geliştirici araçları etiketli seçeneği belirleyin. Bu menü öğesinin yerine aşağıdaki klavye kısayolunu da kullanabilirsiniz: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +KOMUTU+I)

   

4. Bu örnek ekran görüntüsünde gösterildiği gibi, şimdi Chrome Geliştirici Araçları arayüzü görüntülenmelidir. Chrome sürümünüze bağlı olarak, gördüğünüz ilk düzen burada sunulandan biraz farklı olabilir. Geliştirici araçlarının, genellikle ekranın alt veya sağ tarafında bulunan ana merkezi, aşağıdaki sekmeleri içerir.

5. Bu bölümlere ek olarak, aşağıdaki araçlara Performans öğesinin sağında bulunan >> simgesi aracılığıyla da erişebilirsiniz. sekme.

   • Memory: Bir web sayfasındaki bellek kullanımını izleyin ve kaydedin. Sitenizdeki JavaScript'in ne kadar ağır olduğunu görebilirsiniz.
   • Security: Etkin sayfa veya uygulamayla ilgili sertifika sorunlarını ve güvenlikle ilgili diğer sorunları vurgular.
   • Application: Bir web uygulaması tarafından kullanılan kaynakları inceleyin. Nelerin kullanıldığının tam bir dökümünü alın.
   • Audits: Bir sayfanın veya uygulamanın yükleme süresini ve genel performansını optimize etmenin yollarını sunar.

   

6. Cihaz Modu, aktif sayfayı bir simülatörde görüntülemenize olanak tanır, bu da onu neredeyse tam olarak bir düzineden fazla cihazdan birinde görüneceği gibi oluşturur, birkaç tanınmış Android de dahil olmak üzere ve iPad, iPhone ve Samsung Galaxy gibi iOS modelleri. Ayrıca, özel geliştirme veya test gereksinimlerinize uyacak şekilde özel ekran çözünürlüklerini taklit etme olanağına da sahipsiniz.

   Cihaz Modu arasında geçiş yapmak ve kapatmak için, doğrudan simgesinin solunda bulunan cep telefonu simgesini seçin Öğeler sekmesi.

   

7. Ayrıca, önce menü düğmesini ile temsil edilen dikey olarak yerleştirilmiş üç nokta'yı seçerek geliştirici araçlarınızın görünümünü ve verdiği hissi özelleştirebilirsiniz. ve yukarıda belirtilen sekmelerin en sağ tarafında bulunur.

   Bu açılır menüden, yuvayı yeniden konumlandırabilir, farklı araçları gösterebilir veya gizleyebilir ve ayrıca cihaz denetçisi gibi daha gelişmiş öğeleri başlatabilirsiniz. Bu bölümde bulunan ayarlar aracılığıyla geliştirme araçları arayüzünün son derece özelleştirilebilir olduğunu göreceksiniz.

   

Mozilla Firefox

Firefox'un web geliştirici bölümü, stil düzenleyici ve piksel hedefleme damlalık gibi tasarımcılar, geliştiriciler ve test uzmanları için benzer araçlar içerir.

1. Firefox'un ana menüsünü seçin, üç yatay çizgi ile temsil edilir ve tarayıcı penceresinin sağ üst köşesinde bulunur.

2. Açılır menü göründüğünde, Web Developer öğesini seçin.

   

3. Aşağıdaki seçenekleri içeren Web Geliştirici menüsü şimdi görüntülenmelidir. Çoğu menü öğesinin kendileriyle ilişkili klavye kısayolları olduğunu fark edeceksiniz.

   • Toggle Tools: Genellikle tarayıcı penceresinin altında bulunan geliştirici araçları arayüzünü görüntüler veya gizler. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: Aktif sayfada ve ayrıca uzaktan hata ayıklama yoluyla taşınabilir bir cihazda CSS ve HTML kodunu incelemenize ve/veya ince ayar yapmanıza olanak tanır. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
   • Web Konsolu: Etkin sayfada JavaScript ifadelerini çalıştırmanıza ve güvenlik uyarıları, ağ istekleri, CSS mesajları ve daha fazlası dahil olmak üzere çeşitli günlük verileri incelemenize olanak tanır. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Hata Ayıklayıcı: JavaScript Hata Ayıklayıcı, kesme noktaları ayarlayarak, DOM düğümlerini inceleyerek, harici kaynakları kara kutuya alarak ve çok daha fazlasını yaparak kusurları saptamanıza ve düzeltmenize olanak tanır. Inspector'da olduğu gibi bu özellik de uzaktan hata ayıklamayı destekler. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Stil Düzenleyici: Yeni stil sayfaları oluşturmanıza ve bunları etkin web sayfasıyla birleştirmenize veya mevcut sayfaları düzenlemenize ve tek bir tıklamayla değişikliklerinizin tarayıcıda nasıl işlendiğini test etmenize olanak tanır. Klavye kısayolu: Mac OS X, Windows (SHIFT+F7)
   • Performans: Etkin sayfanın ağ performansı, kare hızı verileri, JavaScript yürütme süresi ve durumu, yanıp sönen boya ve çok daha fazlasının ayrıntılı bir dökümünü sağlar. Klavye kısayolu: Mac OS X, Windows (SHIFT+F5)
   • Network: Tarayıcı tarafından başlatılan her ağ isteğini ilgili yöntem, kaynak etki alanı, tür, boyut ve geçen süre ile birlikte listeler. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Bir web sitesi tarafından saklanan önbelleğe ve çerezlere bir göz atın. Klavye kısayolu: (SHIFT+F9)
   • Geliştirici Araç Çubuğu: Etkileşimli bir komut satırı yorumlayıcısı açar. Kullanılabilir tüm komutların listesi ve bunların uygun sözdizimi için yorumlayıcıya help girin. Klavye kısayolu: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Firefox OS çalıştıran gerçek bir cihaz veya Firefox OS Simulator aracılığıyla web uygulamaları oluşturma ve yürütme yeteneği sağlar. Klavye kısayolu: Mac OS X, Windows (SHIFT+F8)
   • Tarayıcı Konsolu: Web Konsolu ile aynı işlevselliği sağlar (yukarıya bakın). Ancak döndürülen tüm veriler, yalnızca etkin web sayfasının aksine tüm Firefox uygulaması (uzantılar ve tarayıcı düzeyinde işlevler dahil) içindir. Klavye kısayolu: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Duyarlı Tasarım Görünümü: Tabletler ve akıllı telefonlar da dahil olmak üzere birden fazla cihazı taklit etmek için bir web sayfasını farklı çözünürlüklerde, düzenlerde ve ekran boyutlarında anında görüntülemenizi sağlar. Klavye kısayolu: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Damlalık: Tek tek seçilen pikseller için on altılık renk kodunu görüntüler.
   • Scratchpad: Scratchpad, açılır bir Firefox penceresinden JavaScript kod parçacıklarını yazmanıza, düzenlemenize, entegre etmenize ve çalıştırmanıza olanak tanır. Kod yazmanıza ve bir web sitesinde test etmenize olanak tanıyan etkileşimli bir JavaScript belgesi açın. Klavye kısayolu: (SHIFT+F4)
   • Service Workers: Web uygulamanızdaki hizmet çalışanlarında hata ayıklayın. Performansları ve hataları hakkında ayrıntılı bilgi alın.
   • Sayfa Kaynağı: Orijinal tarayıcı tabanlı geliştirici aracı, bu seçenek yalnızca etkin sayfa için mevcut kaynak kodunu görüntüler. Klavye kısayolu: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Daha Fazla Araç Al: Mozilla'nın resmi eklenti sitesindeki Web Developer's Toolbox koleksiyonunu açar ve bir düzine popüler uzantı içerir. Firebug ve Greasemonkey olarak.

   

Microsoft Edge/Internet Explorer

Genellikle F12 Geliştirici Araçları olarak anılır, Internet Explorer'ın önceki sürümlerinden bu yana arabirimi başlatan klavye kısayoluna saygı, IE11 ve Microsoft Edge'deki geliştirme araç seti çok kullanışlı monitörler, hata ayıklayıcılar, öykünücüler ve anında derleyiciler sunarak başlangıcından bu yana çok yol kat etti.

Microsoft artık Internet Explorer'ı desteklememektedir ve daha yeni Edge tarayıcısına güncelleme yapmanızı önerir. En yeni sürümü indirmek için sitelerine gidin.

1. Seç Diğer işlemler, üç nokta ile gösterilir ve tarayıcı penceresinin sağ üst köşesinde bulunur.

   

2. Açılır menü göründüğünde, Geliştirici Araçları etiketli seçeneği belirleyin.

   

3. Geliştirme arayüzü şimdi tipik olarak tarayıcı penceresinin altında görüntülenmelidir. Aşağıdaki araçlar mevcuttur ve her birine ilgili sekme başlığına tıklayarak veya beraberindeki klavye kısayolunu kullanarak erişilebilir.

   

   • DOM Explorer: Aktif sayfada stil sayfalarını ve HTML'yi düzenlemenize olanak tanır ve siz ilerledikçe değiştirilen sonuçları verir. Uygun olduğunda kodu otomatik olarak tamamlamak için IntelliSense işlevselliğini kullanır. Klavye kısayolu: (CTRL+1)
   • Konsol: Sayaçlar, zamanlayıcılar, izler ve özelleştirilmiş mesajlar dahil olmak üzere hata ayıklama bilgilerini entegre bir API aracılığıyla gönderme yeteneği sağlar. Ayrıca, aktif bir web sayfasına kod eklemenize ve gerçek zamanlı olarak bağımsız değişkenlere atanan değerleri değiştirmenize olanak tanır. Klavye kısayolu: (CTRL+2)
   • Hata Ayıklayıcı: Kesme noktaları ayarlamanıza ve kod yürütülürken, gerekirse satır satır hata ayıklamanıza olanak tanır. Klavye kısayolu: (CTRL+3)
   • Network: Protokol ayrıntıları, içerik türü, bant genişliği kullanımı ve çok daha fazlasını içeren sayfa yükleme ve yürütme sırasında tarayıcı tarafından başlatılan her ağ isteğini listeler. Klavye kısayolu: (CTRL+4)
   • Performans: Sayfa yükleme sürelerini ve diğer etkinlikleri hızlandırmanıza yardımcı olmak için kare hızlarını, CPU kullanımını ve performansla ilgili diğer ölçümleri ayrıntılarıyla verir. Klavye kısayolu: (CTRL+5)
   • Bellek: Farklı zaman aralıklarından anlık görüntülerle birlikte bir bellek kullanım zaman çizelgesi görüntüleyerek mevcut web sayfasındaki olası bellek sızıntılarını izole etmenize ve düzeltmenize yardımcı olur. Klavye kısayolu: (CTRL+6)
   • Emulation: Etkin sayfanın çeşitli çözünürlüklerde ve ekran boyutlarında nasıl oluşturulacağını, akıllı telefonları, tabletleri ve diğer cihazları taklit ederek gösterir. Enlem ve boylam girerek farklı coğrafi konumları simüle etmenin yanı sıra kullanıcı aracısını ve sayfa yönünü değiştirme yeteneği de sağlar. Klavye kısayolu: (CTRL+7)

4. Diğer araçlardan herhangi birinin içindeyken Konsol'u görüntülemek için, içinde sağ köşeli ayraç bulunan kare düğmesine basın. geliştirme araçları arayüzünün sağ üst köşesi.

   

5. Geliştirici araçları arayüzünü ayrı bir pencere haline gelecek şekilde ayırmak için, iki basamaklı dikdörtgeni seçin veya şu klavye kısayolunu kullanın: CTRL+P. İkinci kez CTRL+P tuşlarına basarak araçları orijinal konumlarına geri yerleştirebilirsiniz.

   

Apple Safari (Yalnızca Mac)

Safari'nin çeşitli geliştirme araç seti, tasarım ve programlama ihtiyaçları için Mac kullanan büyük geliştirici topluluğunu yansıtır. Güçlü bir konsola ve geleneksel günlük kaydı ve hata ayıklama özelliklerine ek olarak, kullanımı kolay bir duyarlı tasarım modu ve kendi tarayıcı uzantılarınızı oluşturmak için bir araç da sağlanır.

1. Ekranınızın üst kısmında bulunan tarayıcı menüsünde Safari öğesini seçin. Açılır menü göründüğünde, Tercihler öğesini seçin. Bu menü öğesinin yerine aşağıdaki klavye kısayolunu da kullanabilirsiniz: COMMAND+COMMA(,)

   

2. Safari'nin Preferences arayüzü şimdi tarayıcı pencerenizin üzerinde görüntülenmelidir. Başlığın en sağ tarafında bulunan Gelişmiş simgesini seçin.

   

3. Gelişmiş tercihleri artık görünür olmalıdır. Bu ekranın alt kısmında menü çubuğunda Geliştirme menüsünü göster etiketli bir seçenek ve bir onay kutusu bulunur. Kutuda herhangi bir onay işareti yoksa, oraya yerleştirmek için bir kez tıklayın.

   

4. Preferences arayüzünü kapatın.

5. Artık tarayıcı menüsünde Yer İşaretleri ve Pencere arasında yer alan Develop adlı yeni bir seçenek fark edeceksiniz. Bu menü öğesine tıklayın. Şimdi aşağıdaki seçenekleri içeren bir açılır menü görüntülenmelidir.

   • Sayfayı Şununla Aç: Etkin web sayfasını Mac'inizde yüklü olan diğer tarayıcılardan birinde açmanıza olanak tanır.
   • Kullanıcı Aracısı: Chrome, Firefox ve Internet Explorer'ın çeşitli sürümleri de dahil olmak üzere bir düzineden fazla önceden tanımlanmış kullanıcı aracısı değerinden seçim yapmanıza ve kendi özelleştirmenizi tanımlamanıza olanak tanır dize.
   • Duyarlı Tasarım Moduna Girin: Geçerli sayfayı çeşitli cihazlarda ve farklı ekran çözünürlüklerinde görüneceği şekilde işler.
   • Web Müfettişini Göster: Safari'nin geliştirme araçları için ana arayüzü başlatır, genellikle tarayıcı ekranınızın altına yerleştirilir ve şu bölümleri içerir: Öğeler, Ağ, Kaynaklar, Zaman Çizelgeleri, Hata Ayıklayıcı, Depolama, Konsol.
   • Hata Konsolunu Göster: Ayrıca geliştirici araçları arayüzünü, doğrudan hataları, uyarıları ve aranabilir diğer öğeleri gösteren Konsol sekmesine başlatır günlük verileri.
   • Sayfa Kaynağını Göster: Etkin sayfanın belgeye göre sınıflandırılmış kaynak kodunu görüntüleyen Kaynaklar sekmesini açar.
   • Sayfa Kaynaklarını Göster: Sayfa Kaynağını Göster seçeneğiyle aynı işlevi gerçekleştirir.
   • Snippet Editor: CSS ve HTML kodunu girebileceğiniz ve çıktısını anında önizleyebileceğiniz yeni bir pencere açar.
   • Uzantı Oluşturucuyu Göster: CSS, HTML ve JavaScript ile Safari uzantıları oluşturma veya düzenleme olanağı sağlar.
   • Zaman Çizelgesi Kaydını Göster: Zaman Çizelgeleri sekmesini açar ve ağ isteklerini, düzeni ve oluşturma bilgilerinin yanı sıra JavaScript yürütmesini gerçek zamanlı olarak görüntülemeye başlar.
   • Boş Önbellek: Sabit sürücünüzde şu anda depolanan tüm önbelleği siler.
   • Önbellekleri Devre Dışı Bırak: Safari'nin önbelleğe alınmasını durdurur, böylece her sayfa yüklendiğinde tüm içerik sunucudan alınır.
   • Görüntüleri Devre Dışı Bırak: Görüntülerin tüm web sayfalarında oluşturulmasını engeller.
   • Stilleri Devre Dışı Bırak: Bir sayfa yüklendiğinde CSS özelliklerini yok sayar.
   • JavaScript'i Devre Dışı Bırak: Tüm sayfalarda JavaScript yürütmesini kısıtlar.
   • Uzantıları Devre Dışı Bırak: Yüklü tüm uzantıların tarayıcıda çalışmasını engeller.
   • Siteye Özgü Hack'leri Devre Dışı Bırak: Safari, etkin web sayfasına özgü sorunları açıkça ele alacak şekilde değiştirildiyse, bu seçenek, sayfanın bu değişiklikler uygulanmadan önceki gibi yüklenir.
   • Yerel Dosya Kısıtlamalarını Devre Dışı Bırak: Tarayıcının yerel disklerinizdeki dosyalara erişmesine izin verir; bu, güvenlik nedeniyle varsayılan olarak kısıtlanmış bir eylemdir.
   • Kökenler Arası Kısıtlamaları Devre Dışı Bırak: Bu kısıtlamalar, XSS ve diğer olası tehlikeleri önlemek için varsayılan olarak uygulanır. Ancak, geliştirme amacıyla genellikle geçici olarak devre dışı bırakılmaları gerekir.
   • Akıllı Arama Alanından JavaScript'e İzin Ver: Etkinleştirildiğinde, javascript ile URL'leri girme yeteneği sağlar: doğrudan adres çubuğuna eklenir.
   • SHA-1 Sertifikalarını Güvensiz Olarak Kabul Edin: SHA-1 algoritmasını kullanan SSL sertifikalarının güncelliğini yitirdiği ve savunmasız olduğu kabul edilir.