Web Tarayıcısı Geliştirici Araçlarını Kullanma



Yazarı:

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

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 günler geride kaldı. Günümüzün tarayıcıları, JavaScript parçacıkları 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 ve kodunuzun daha iyi olmasını sağlayarak çok daha derin bir dalış yapmanıza olanak tanır. çok fazla bellek veya çok fazla CPU döngüsü kullanmamak ve çok daha fazlası.

Test perspektifinden, duyarlı tasarım 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 işleneceğini yeniden üretebilirsiniz. En iyi yanı, tüm bunları tarayıcınızdan ayrılmadan yapabilmenizdir!

Aşağıdaki eğitimler, ç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'un geliştirici araçları, kodu düzenlemenize ve hatalarını ayıklamanıza, performans sorunlarını ortaya çıkarmak için ayrı bileşenleri denetlemenize, Android veya iOS çalıştıranlar dahil olmak üzere farklı cihaz ekranlarının simülasyonunu yapmanıza ve diğer birçok yararlı işlevi gerçekleştirmenize olanak tanır.

  1. Chrome'u seçin Ana menü, üç yatay çizgi ile işaretlenmiş ve tarayıcının sağ üst köşesinde yer almaktadır.

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

  3. Şimdi bir alt menü görünmelidir. Etiketli seçeneği seçin Geliştirici araçları. Bu menü öğesi yerine aşağıdaki klavye kısayolunu da kullanabilirsiniz: Chrome OS / Windows (CTRL + ÜST KRKT + I), Mac OS X (ALT (SEÇENEK) + COMMAND + I)

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

  5. Bu bölümlere ek olarak aşağıdaki araçlara şu araçlardan da erişebilirsiniz: >> simgesinin sağında bulunan performans sekmesi.

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

  6. Cihaz Modu aktif sayfayı, iPad, iPhone ve Samsung Galaxy gibi birkaç tanınmış Android ve iOS modeli de dahil olmak üzere bir düzineden fazla cihazda göründüğü gibi yapan bir simülatörde görüntülemenizi sağlar. Ayrıca, özel geliştirme veya test ihtiyaçlarınıza uyacak şekilde özel ekran çözünürlüklerini taklit etme becerisine sahip olursunuz.

    Geçiş yapmak için Cihaz Modu açın ve kapatın, seçin cep telefonu simgesi doğrudan solda bulunur Elements sekmesi.

  7. Önce geliştirici araçlarınızın görünümünü ve tarzını özelleştirebilirsiniz. menü butonu ile temsil edilen dikey olarak yerleştirilmiş üç nokta ve yukarıda bahsedilen 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 bir 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 kendisinin oldukça özelleştirilebilir olduğunu göreceksiniz.

Mozilla Firefox

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

  1. Firefox’ları seçin Ana menü, ile temsil edilen üç yatay çizgi ve tarayıcı penceresinin sağ üst köşesinde bulunur.

  2. Açılır menü göründüğünde, seçin Web Geliştirici.

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

    • Araçları Değiştir: Genellikle tarayıcı penceresinin altında konumlandırılan geliştirici araçları arayüzünü görüntüler veya gizler. Klavye kısayolu: Mac OS X (ALT (SEÇENEK) + COMMAND + I), Pencereler (CTRL + ÜST KRKT + I)
    • Müfettiş: Uzaktan hata ayıklama yoluyla aktif sayfadaki ve taşınabilir bir cihazdaki CSS ve HTML kodunu incelemenizi ve / veya değiştirmenizi sağlar. Klavye kısayolu: Mac OS X (ALT (SEÇENEK) + COMMAND + C), Pencereler (CTRL + ÜST KARAKTER + C)
    • web Konsolu: Etkin sayfada JavaScript ifadeleri yürütmenize ve ayrıca güvenlik uyarıları, ağ istekleri, CSS mesajları ve daha fazlası dahil olmak üzere çeşitli günlüğe kaydedilmiş verileri incelemenize olanak tanır. Klavye kısayolu: Mac OS X (ALT (SEÇENEK) + COMMAND + K), Pencereler (CTRL + ÜST KRKT + K)
    • Debugger: JavaScript Hata Ayıklayıcı, kesme noktaları ayarlayarak, DOM düğümlerini inceleyerek, harici kaynakları kara kutuya alarak ve çok daha fazlasını yaparak hataları saptamanıza ve gidermenize olanak tanır. Inspector'da olduğu gibi, bu özellik de uzaktan hata ayıklamayı destekler. Klavye kısayolu: Mac OS X (ALT (SEÇENEK) + COMMAND + S), Pencereler (CTRL + ÜST KRKT + S)
    • Stil Düzenleyicisi: Yeni stil sayfaları oluşturmanıza ve bunları etkin web sayfasıyla birleştirmenize veya mevcut sayfaları düzenlemenize ve değişikliklerinizin bir tarayıcıda yalnızca tek bir tıklama ile nasıl işlendiğini test etmenize olanak tanır. Klavye kısayolu: Mac OS X, Windows (ÜST KRKT + F7)
    • performans: Etkin sayfanın ağ performansı, kare hızı verileri, JavaScript yürütme süresi ve durumu, boya yanıp sönmesi ve çok daha fazlasının ayrıntılı bir dökümünü sağlar. Klavye kısayolu: Mac OS X, Windows (ÜST KRKT + F5)
    • ağ: Tarayıcı tarafından başlatılan her ağ talebini ilgili yöntem, kaynak etki alanı, tür, boyut ve geçen süre ile birlikte listeler. Klavye kısayolu: Mac OS X (ALT (SEÇENEK) + COMMAND + Q), Pencereler (CTRL + ÜST KRKT + Q)
    • Depolama Denetçisi: Bir web sitesi tarafından saklanan önbelleğe ve çerezlere bir göz atın. Klavye kısayolu: (ÜST KRKT + F9)
    • Geliştirici Araç Çubuğu: Etkileşimli bir komut satırı yorumlayıcısı açar. Giriş yardım et tüm mevcut komutların listesi ve uygun sözdizimi için yorumlayıcıya. Klavye kısayolu: Mac OS X, Windows (ÜST KRKT + 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 (ÜST KRKT + 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üzeyi işlevler dahil) içindir. Klavye kısayolu: Mac OS X (ÜST KARAKTER + KOMUT + J), Pencereler (CTRL + ÜST KRKT + J)
    • Duyarlı Tasarım Görünümü: Tabletler ve akıllı telefonlar 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 (SEÇENEK) + COMMAND + M), Pencereler (CTRL + ÜST KARAKTER + M)
    • damlalık: Ayrı ayrı seçilen pikseller için onaltılık renk kodunu görüntüler.
    • Scratchpad'i: Scratchpad, açılır bir Firefox penceresinden JavaScript kod parçacıkları yazmanıza, düzenlemenize, entegre etmenize ve yürütmenize 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: (ÜST KRKT + F4)
    • Hizmet Görevlileri: Web uygulamanızda hizmet çalışanlarının hatalarını ayıklayın. Performansları ve hataları hakkında ayrıntılı bilgi alın.
    • Sayfa Kaynağı: Orijinal tarayıcı tabanlı geliştirici aracı olan bu seçenek, etkin sayfanın mevcut kaynak kodunu görüntüler. Klavye kısayolu: Mac OS X (COMMAND + U), Pencereler (CTRL + U)
    • Daha Fazla Araç Alın: Açar Web Geliştiricisinin Araç Kutusu Mozilla'nın resmi eklenti sitesinde Firebug ve Greasemonkey gibi yaklaşık bir düzine popüler uzantı içeren koleksiyon.

Microsoft Edge / Internet Explorer

Genellikle şu şekilde anılır: F12 Geliştirici Araçları, Internet Explorer'ın önceki sürümlerinden bu yana arayüzü başlatan klavye kısayoluna bir saygı, IE11 ve Microsoft Edge'deki geliştirici araç seti, çok kullanışlı bir monitör, hata ayıklayıcı, öykünücü grubu sunarak başlangıcından bu yana uzun bir yol kat etti. -the-fly derleyiciler.

  1. seçmek Diğer eylemler, ile temsil edilen üç nokta ve tarayıcı penceresinin sağ üst köşesinde bulunur.

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

  3. Geliştirme arayüzü artık tipik olarak tarayıcı penceresinin altında görüntülenmelidir. Aşağıdaki araçlar mevcuttur, her birine ilgili sekme başlıklarına tıklayarak veya ilgili klavye kısayolu kullanılarak erişilebilir.

    • DOM Gezgini: Etkin sayfadaki stil sayfalarını ve HTML'yi düzenlemenize, değiştirilen sonuçları ilerledikçe oluşturmanıza olanak tanır. Mümkün olduğunda kodu otomatik tamamlamak için IntelliSense işlevini kullanır. Klavye kısayolu: (CTRL + 1)
    • konsolos: Entegre bir API aracılığıyla sayaçlar, zamanlayıcılar, izlemeler ve özelleştirilmiş mesajlar dahil olmak üzere hata ayıklama bilgilerinin gönderilebilmesini sağlar. Ayrıca, aktif bir web sayfasına kod eklemenize ve tek tek değişkenlere atanan değerleri gerçek zamanlı olarak değiştirmenize olanak tanır. Klavye kısayolu: (CTRL + 2)
    • Debugger: Kesme noktaları belirlemenize ve kodunuz çalışırken gerekirse satır satır hata ayıklamanıza izin verir. Klavye kısayolu: (CTRL + 3)
    • ağ: Protokol ayrıntıları, içerik türü, bant genişliği kullanımı ve çok daha fazlası dahil olmak üzere 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 anlatın. 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ı yalıtmanıza ve düzeltmenize yardımcı olur. Klavye kısayolu: (CTRL + 6)
    • Emülasyon: Etkin sayfanın çeşitli çözünürlüklerde ve ekran boyutlarında nasıl işleneceğini, akıllı telefonlar, tabletler ve diğer cihazları taklit ettiğini gösterir. Ayrıca, kullanıcı aracısını ve sayfa yönünü değiştirme ve bir enlem ve boylam girerek farklı coğrafi konumları simüle etme yeteneği sağlar. Klavye kısayolu: (CTRL + 7)

  4. Görüntülemek için konsolos diğer araçlardan herhangi birinin içinde kare düğme geliştirme araçları arayüzünün sağ üst köşesinde bulunan içinde bir sağ köşeli ayraç bulunur.

  5. Geliştirici araçları arayüzünü ayırarak ayrı bir pencere haline getirmek için, iki basamaklı dikdörtgen veya aşağıdaki 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 OS X)

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

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

  2. Safari Tercihler arayüz şimdi tarayıcı pencerenizi kaplayarak görüntülenmelidir. Seçin Gelişmiş simge, başlığın en sağ tarafında bulunur.

  3. The gelişmiş tercihler artık görünür olmalıdır. Bu ekranın altında etiketli bir seçenek var Geliştirme menüsünü göster menü çubuğunda bir onay kutusu ile birlikte. Kutuda gösterilen bir onay işareti yoksa, oraya yerleştirmek için bir kez tıklayın.

  4. Kapat Tercihler Arayüz aynı

  5. Şimdi tarayıcı menüsünde yeni bir seçenek fark etmelisiniz. Geliştirmek, arasında bulunan Yer İşaretleri ve Pencere. Bu menü öğesine tıklayın. Şimdi aşağıdaki seçenekleri içeren bir açılır menü görüntülenmelidir.

    • Sayfayı Birlikte Aç: Etkin web sayfasını şu anda Mac'inizde yüklü olan diğer tarayıcılardan birinde açmanıza olanak tanır.
    • User Agent: Chrome, Firefox ve Internet Explorer'ın çeşitli sürümleri dahil olmak üzere bir düzineden fazla önceden tanımlanmış kullanıcı aracısı değeri arasından seçim yapmanıza ve kendi özel dizenizi tanımlamanıza olanak tanır.
    • Duyarlı Tasarım Moduna Girin: Mevcut sayfayı çeşitli cihazlarda ve farklı ekran çözünürlüklerinde görüneceği şekilde işler.
    • Web Denetçisini Göster: Safari'nin geliştirme araçları için, genellikle tarayıcı ekranınızın altına yerleştirilen ve şu bölümleri içeren ana arayüzü başlatır: Öğeler, Ağ, Kaynaklar, Zaman Çizgileri, Hata Ayıklayıcı, Depolama, Konsol.
    • Hata Konsolunu Göster: Ayrıca geliştirici araçları arayüzünü de doğrudan Konsol sekmesi hataları, uyarıları ve diğer aranabilir günlük verilerini görüntüleyen.
    • Sayfa Kaynağını Göster: Açar Kaynaklar sekmesi, belgeye göre kategorilere ayrılmış etkin sayfanın kaynak kodunu görüntüler.
    • Sayfa Kaynaklarını Göster: Sayfa Kaynağını Göster seçeneğiyle aynı işlevi gerçekleştirir.
    • Snippet Düzenleyiciyi Göster: CSS ve HTML kodunu girip çıktısını anında önizleyebileceğiniz yeni bir pencere açar.
    • Extension Builder'ı Göster: Safari uzantılarını CSS, HTML ve JavaScript ile oluşturma veya düzenleme yeteneği sağlar.
    • Zaman Çizelgesi Kaydını Göster: Zaman Çizelgeleri sekmesini açar ve ağ isteklerini, düzen ve oluşturma bilgilerinin yanı sıra JavaScript çalıştırmayı gerçek zamanlı olarak görüntülemeye başlar.
    • Boş Önbellekler: Sabit sürücünüzde depolanan tüm önbelleği siler.
    • Önbellekleri Devre Dışı Bırak: Safari'nin önbelleğe alması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 devredışı bırak: Tüm sayfalarda JavaScript çalıştırmayı kısıtlar.
    • Uzantıları Devre Dışı Bırak: Yüklenen tüm uzantıların tarayıcı içinde çalışmasını yasaklar.
    • Siteye Özel Hack'leri Devre Dışı Bırakın: Safari, etkin web sayfasına özgü sorunları açıkça ele alacak şekilde değiştirildiyse, bu seçenek bu değişiklikleri engelleyerek sayfanın bu değişiklikler yapılmadan önceki gibi yüklenmesini sağlar.
    • Yerel Dosya Kısıtlamalarını Devre Dışı Bırakın: Tarayıcının yerel disklerinizdeki dosyalara erişmesine izin verir, bu, güvenlik nedenleriyle varsayılan olarak kısıtlanan bir eylemdir.
    • Çapraz Köken Kısıtlamalarını Devre Dışı Bırak: Bu kısıtlamalar, XSS'yi 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 izin ver: Etkinleştirildiğinde, doğrudan adres çubuğuna dahil edilmiş javascript: URL'leri girme yeteneği sağlar.
    • SHA-1 Sertifikalarını Güvensiz Olarak Değerlendirin: SHA-1 algoritmasını kullanan SSL sertifikalarının güncel olmadığı ve savunmasız olduğu kabul edilir.