Web tasarımcıları, geliştiricileri ve test kullanıcıları için entegre araçlar
Web'de gezinmek isteyen günlük kullanıcılara odaklanan tarayıcı tarayıcılarının çoğuna ek olarak, aynı zamanda güçlü araçların tarayıcılara entegre edilmesiyle kullanıcıların erişebileceği uygulamaları ve siteleri oluşturmaya yardımcı olan Web geliştiricileri, tasarımcıları ve kalite güvencesi uzmanlarına da hitap ediyorlar. kendilerini.
Bir tarayıcıda bulunan tek programlama ve test araçlarının bir sayfanın kaynak kodunu görmenize ve başka bir şey izlemenize izin vermediği günler geride kaldı. Bugünün tarayıcıları, JavaScript parçacıklarını yürütme ve hata ayıklama, DOM öğelerini inceleme ve düzenleme, uygulamanız veya sayfanızda gerçek zamanlı ağ trafiğini izleme, darboğazları tespit etme, CSS performansını analiz etme ve kodunuzun güvenliğini sağlama gibi şeyler yaparak çok daha derin bir dalış yapmanızı sağlar. Çok fazla bellek veya çok fazla CPU döngüsü ve daha fazlasını kullanmamak. Bir test bakış açısından, bir uygulama veya Web sayfasının farklı tarayıcılarda ve farklı cihazlarda ve platformlarda nasıl tepki veren tasarım ve yerleşik simülatörlerin büyüsüyle işleyebileceğini yeniden üretebilirsiniz. En iyi bölüm, tarayıcınızdan ayrılmadan tüm bunları yapabileceğinizdir!
Aşağıdaki eğiticiler, birkaç popüler Web tarayıcısı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ı, kodları düzenlemenize ve hata ayıklamanıza, performans sorunlarını açığa çıkarmak için bireysel bileşenleri denetlemenize, Android veya iOS çalıştıranlar dahil farklı cihaz ekranlarını simüle etmenize ve başka birçok kullanışlı işlev gerçekleştirmenize olanak tanır.
- Chrome'un ana menü düğmesine tıklayın, üç yatay çizgi ile işaretlenmiş ve tarayıcının sağ üst köşesinde yer alır.
- Açılır menü belirdiğinde, fare imlecinizi Diğer araçlar seçeneğinin üzerine getirin.
- Bir alt menü şimdi görünmelidir. Geliştirici araçları etiketli seçeneği belirtin. Bu menü öğesinin yerine aşağıdaki klavye kısayolunu da kullanabilirsiniz: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
- Bu 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 sunulandan biraz farklı olabilir. Genellikle ekranın alt veya sağ tarafında bulunan geliştirici araçlarının ana merkezi aşağıdaki sekmeleri içerir.
Elementler: CSS ve HTML kodlarını denetleme, ayrıca CSS'yi anında düzenleme ve değişikliklerin etkilerini gerçek zamanlı olarak görme olanağı sağlar.
Konsol: Chrome'un JavaScript konsolu, doğrudan komut girişinin yanı sıra teşhis hata ayıklamaya olanak tanır.
Kaynaklar: JavaScript kodunu güçlü bir grafik arayüzle ayıklamanızı sağlar.
Ağ: Etkin uygulama veya sayfada, ilgili istek ve yanıt başlıklarının yanı sıra gelişmiş zamanlama metrikleri dahil olmak üzere ilgili her bir işlemle ilgili ayrıntılı bilgileri sınıflandırır ve görüntüler.
Zaman Çizelgesi: Bir sayfa veya uygulama yükleme isteği başladığında tarayıcıda gerçekleşen her etkinliğin ayrıntılı analizini sağlar. - Bu bölümlere ek olarak, Zaman Çizelgesi sekmesinin sağında bulunan >> simgesiyle aşağıdaki araçlara da erişebilirsiniz.
Profil: CPU profiler ve Heap profiler bölümlerine ayrılarak, kapsamlı bellek kullanımı ve etkin uygulama veya sayfanın genel yürütme süresi sağlar.
Güvenlik: Etkin sayfa veya uygulama ile sertifika sorunları ve diğer güvenlikle ilgili sorunları vurgular.
Kaynaklar: Geçerli Web sayfası veya uygulama tarafından kullanılan çerezleri, yerel depolama alanını, uygulama önbelleğini ve diğer yerel veri kaynaklarını inceleyebileceğiniz yerdir.
Denetimler: Bir sayfanın veya uygulamanın yükleme süresini ve genel performansını optimize etmenin yollarını sunar. - Aygıt Modu , aktif sayfayı, iPad, iPhone ve Samsung Galaxy gibi tanınmış birçok Android ve iOS modeli de dahil olmak üzere, bir düzineden fazla aygıtın üzerinde göründüğü şekliyle neredeyse tam olarak gösteren bir simülatörde görmenizi sağlar. Ayrıca, size özel geliştirme veya test ihtiyaçlarınıza uyacak şekilde özel ekran çözünürlüklerini taklit etme olanağınız da verilir. Cihaz Modunu açıp kapatmak için, Elements sekmesinin hemen solunda bulunan cep telefonu simgesini seçin.
- Ayrıca, geliştirici araçlarınızın görünümünü ve hissini, önce dikey olarak yerleştirilmiş üç nokta tarafından temsil edilen ve yukarıda bahsedilen sekmelerin en sağ tarafında bulunan menü düğmesini tıklayarak özelleştirebilirsiniz. Bu açılır menüden, dokümanı yeniden konumlandırabilir, farklı araçları gösterebilir veya gizleyebilir, ayrıca cihaz denetçisi gibi daha gelişmiş öğeleri kullanıma sunabilirsiniz. Dev araçlar arabiriminin kendisi bu bölümde bulunan ayarlar aracılığıyla oldukça özelleştirilebilir olduğunu göreceksiniz.
Mozilla Firefox
Firefox'un Web Geliştirici bölümü, stil editörü ve piksel hedefleyen damlalık gibi tasarımcılar, geliştiriciler ve test ediciler için araçlar içerir.
Önerilen Kaynaklar: En İyi 25 Greasemonkey ve Tampermonkey Kullanıcı Komut Dosyası
- Üç yatay çizgi ile temsil edilen ve tarayıcı penceresinin sağ üst köşesinde bulunan Firefox'un ana menü düğmesine tıklayın.
- Açılır menü görüntülendiğinde, Geliştirici etiketli simgeyi seçin. Aşağıdaki seçenekleri içeren Web Developer menüsü görüntülenmelidir. Çoğu menü öğesinin bunlarla ilişkili klavye kısayollarına sahip olduğunu fark edeceksiniz.
Toggle Tools: Genellikle tarayıcı penceresinin en altında bulunan geliştirici araçları arayüzünü görüntüler veya gizler. Klavye kısayolu: Mac OS X ( ALT (OPTION) + KOMUT + I ), Windows ( CTRL + ÜSTKRKT + I )
Inspector: Etkin sayfada ve ayrıca uzak hata ayıklama yoluyla taşınabilir bir cihazda CSS ve HTML kodunu incelemenizi ve / veya düzenlemenizi sağlar. Klavye kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Web Konsolu: Etkin sayfa içinde JavaScript ifadelerini çalıştırmanıza ve güvenlik uyarıları, ağ istekleri, CSS iletileri ve daha fazlası dahil olmak üzere çeşitli günlük verilerini gözden geçirmenizi sağlar. Klavye kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Hata Ayıklayıcı: JavaScript Hata Ayıklayıcısı , kesme noktalarını belirleyerek, DOM düğümlerini, siyah kutunun dış kaynaklarını ve çok daha fazlasını denetleyerek hataları tespit etmenizi ve gidermenizi sağlar. Inspector'da olduğu gibi , bu özellik uzaktan hata ayıklamayı da destekler. Klavye kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Stil Düzenleyici: Yeni stil sayfaları oluşturmanızı ve bunları etkin Web sayfasıyla birleştirmenizi veya mevcut sayfaları düzenlemenizi ve değişikliklerin tek bir tıklamayla tarayıcıda nasıl işlendiğini test etmenizi sağlar. Klavye kısayolu: Mac OS X, Windows ( SHIFT + F7 )
Performans: Etkin sayfanın ağ performansının, kare hızı verilerinin, JavaScript yürütme süresinin ve durumunun, boyaların yanıp sönmesinin ve daha fazlasının ayrıntılı bir dökümünü sağlar. Klavye kısayolu: Mac OS X, Windows ( SHIFT + F5 )
Ağ: Tarayıcı tarafından başlatılan her bir ağ isteğini, karşılık gelen yöntem, başlangıç alanı, türü, boyutu ve geçen süre ile birlikte listeler. Klavye kısayolu: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Geliştirici Araç Çubuğu: Etkileşimli bir komut satırı yorumlayıcısı açar. Tüm mevcut komutların bir listesi ve uygun sözdizimi için yorumlayıcıya yardım girin. Klavye kısayolu: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: Firefox OS çalıştıran gerçek bir cihaz veya Firefox OS Simülatörü 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ına ( uzantılar ve tarayıcı düzeyi işlevleri dahil) yöneliktir. Klavye kısayolu: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + ÜST KRKT + J )
Duyarlı Tasarım Görünümü: Tablet ve akıllı telefonlar da dahil olmak üzere birden çok cihazı taklit etmek için farklı çözünürlüklerde, düzenlerde ve ekran boyutlarında bir Web sayfasını 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 onaltılık renk kodunu görüntüler.
Scratchpad : Bir pop-out Firefox penceresinden JavaScript kodunun snippet'lerini yazmanıza, düzenlemenize, entegre etmenize ve çalıştırmanıza izin verir. Klavye kısayolu: Mac OS X, Windows ( SHIFT + F4 )
Sayfa Kaynağı: Orijinal tarayıcı tabanlı geliştirici aracı, bu seçenek etkin sayfa için mevcut kaynak kodunu görüntüler. Klavye kısayolu: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Diğer Araçlara Ulaşın: Firebug ve Greasemonkey gibi yaklaşık bir düzine popüler uzantıya sahip olan Mozilla'nın resmi eklentileri sitesindeki Web Developer's Toolbox koleksiyonunu açar.
Microsoft Edge / Internet Explorer
Yaygın olarak F12 Geliştirici Araçları olarak adlandırılan, Internet Explorer'ın önceki sürümlerinden bu yana arayüzü başlatan klavye kısayoluna bir saygı, IE11 ve Microsoft Edge'deki dev araç seti çok kullanışlı bir grup sunarak kurulduğu günden bu yana uzun bir yol kat etti. monitörler, hata ayıklayıcılar, emülatörler ve on-the-fly derleyiciler.
- Üç nokta ile temsil edilen ve tarayıcı penceresinin sağ üst köşesinde bulunan Diğer işlemler menüsünü tıklayın. Açılır menü görüntülendiğinde, F12 Geliştirici Araçları etiketli seçeneği belirtin . Daha önce de belirttiğim gibi, F12 klavye kısayoluyla araçlara da erişebilirsiniz.
- Geliştirme arabirimi, genellikle tarayıcı penceresinin altında görüntülenmelidir. Her biri ilgili sekme başlığına tıklayarak veya ilgili klavye kısayolunu kullanarak erişilebilir olan aşağıdaki araçlar kullanılabilir.
DOM Gezgini: Etkin sayfada stil sayfalarını ve HTML'yi düzenlemenize ve değiştirdiğiniz sonuçları oluşturmanıza olanak tanır. Geçerli olduğunda otomatik tamamlama yapmak için IntelliSense işlevini kullanır. Klavye kısayolu: (CTRL + 1)
Konsol: Sayaçlar, zamanlayıcılar, izler ve özelleştirilmiş iletiler de dahil olmak üzere hata ayıklama bilgilerinin entegre bir API aracılığıyla gönderilmesini sağlar. Ayrıca, etkin bir Web sayfasına kod eklemenizi ve gerçek zamanlı olarak bireysel değişkenlere atanan değerleri değiştirmenizi sağlar. Klavye kısayolu: (CTRL + 2)
Hata Ayıklayıcı: Kesme noktalarını ayarlamanızı ve kodunuzu yürütürken hata ayıklamanızı sağlar, gerekirse satır satır. Klavye kısayolu: (CTRL + 3)
Ağ: 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 bir 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ı olacak kare hızları, CPU kullanımı ve diğer performansla alakalı metrikler. Klavye kısayolu: (CTRL + 5)
Bellek: Farklı zaman aralıklarından anlık görüntülerin yanı sıra bir bellek kullanım zaman çizelgesi görüntüleyerek mevcut Web sayfasındaki potansiyel 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 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ştirmenin yanı sıra, enlem ve boylamı girerek farklı coğrafi konumları simüle etme yeteneği de sağlar. Klavye kısayolu: (CTRL + 7) - Konsolu diğer araçlardan herhangi birinde kullanırken göstermek için, geliştirme araçlarının sağ üst köşesinde bulunan, içinde sağ köşeli bir köşeli kare düğmeye tıklayın.
- Ayırmak için, geliştirici araçları arabirimi ayrı bir pencere olur, iki basamaklı dikdörtgenler tarafından temsil edilen düğmeyi tıklatın veya aşağıdaki klavye kısayolunu kullanın: CTRL + P. Araçları ikinci kez CTRL + P tuşlarına basarak orijinal konumlarına geri yerleştirebilirsiniz.
Apple Safari (yalnızca OS X)
Safari'nin çeşitli dev araçları, tasarım ve programlama ihtiyaçları için bir Mac kullanan büyük geliştirici topluluğunu yansıtır. Güçlü bir konsola ve geleneksel günlüğe kaydetme ve hata ayıklama özelliklerine ek olarak, kullanımı kolay bir yanıt veren tasarım modu ve kendi tarayıcı uzantılarınızı oluşturmak için bir araç da sağlanmıştır.
- Ekranınızın üst kısmında bulunan tarayıcı menüsünde Safari'yi tıklayın. Açılır menü görüntülendiğinde Tercihler'i seçin. Bu menü öğesinin yerine şu klavye kısayolunu da kullanabilirsiniz: COMMAND + COMMA (,)
- Safari'nin Tercihler arayüzü artık tarayıcı pencerenizin üzerine yerleştirilmeli. Başlığın en sağ tarafında bulunan Gelişmiş simgesine tıklayın.
- Gelişmiş tercihler şimdi görünür olmalıdır. Bu ekranın alt kısmında, bir onay kutusuyla birlikte menü çubuğunda Show Develop menüsü yazan bir seçenek bulunur. Kutuda herhangi bir onay işareti yoksa, bir tane yerleştirmek için bir kez tıklayın.
- Sol üst köşede bulunan kırmızı 'x' üzerine tıklayarak Tercihler arayüzünü kapatın.
- Şimdi, Yer İmleri ve Pencere arasında bulunan Geliştir adlı tarayıcı menüsünde yeni bir seçenek görmelisiniz . Bu menü maddesine tıklayın. Aşağıdaki seçenekleri içeren bir açılır menü görüntülenmelidir.
Sayfayı Birlikte Aç: Etkin Web sayfasını Mac'inizde yüklü olan diğer tarayıcılardan birinde açmanıza izin verir.
Kullanıcı Aracısı: Chrome, Firefox ve Internet Explorer'ın çeşitli sürümlerini içeren bir düzineden önceden tanımlı kullanıcı aracı değeri arasından seçim yapmanızı ve kendi özel dizenizi tanımlamanızı sağlar.
Duyarlı Tasarım Moduna Girin: Geçerli sayfayı çeşitli cihazlarda ve farklı ekran çözünürlüklerinde göründüğü gibi oluşturur.
Web Denetçisi'ni Göster: Safari'nin genellikle tarayıcı ekranınızın alt kısmında yer alan ve aşağıdaki bölümleri içeren dev araçlar için ana arayüzü başlatır: Öğeler , Ağ , Kaynaklar , Zaman Çizelgeleri , Hata Ayıklayıcı , Depolama , Konsol .
Hata Konsolunu Göster: Ayrıca, dev araçları arabirimini, hatalar, uyarılar ve diğer aranabilir günlük verilerini görüntüleyen Konsol sekmesine doğrudan başlatır.
Sayfa Kaynağını Göster: Belgeye göre kategorize edilen etkin sayfanın kaynak kodunu görüntüleyen Kaynaklar sekmesini açar.
Sayfa Kaynaklarını Göster: Sayfa Kaynağı Göster seçeneğiyle aynı işlevi gerçekleştirir.
Snippet Düzenleyicisini Göster: CSS ve HTML kodunu girip çıktıyı çıktılarını önizleyebildiğiniz yeni bir pencere açar.
Uzantı Oluşturucuyu Göster: CSS, HTML ve JavaScript ile Safari uzantılarını oluşturma veya düzenleme olanağı sağlar.
Zaman Çizelgesi Kaydını Göster: Zaman Çizelgeleri sekmesini açar ve gerçek zamanlı olarak JavaScript'in yanı sıra ağ istekleri, düzen ve görüntü oluşturma bilgilerini de görüntülemeye başlar.
Boş Önbellekler: Sabit sürücünüzde kayıtlı olan tüm önbelleği siler.
Önbellekleri Devre Dışı Bırak: Safari'yi önbelleğe almayı 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: Tüm yüklü uzantıların tarayıcıda çalışmasını engeller.
Siteye Özel Hack'leri Devre Dışı Bırak: Safari, etkin Web sayfasına özgü sorunların / işlemlerin açıkça ele alınması için değiştirildiyse, bu seçenek, bu değişikliklerin, bu değişikliklerin yürürlüğe girmesinden önceki sayfa yüklenecek şekilde yüklenmesini engeller.
Yerel Dosya Kısıtlamalarını Devre Dışı Bırak: Tarayıcının yerel disklerinizdeki dosyalara erişmesine izin verir, güvenlik nedenleriyle varsayılan olarak kısıtlanan bir eylemdir.
Çapraz Menşe Kısıtlamalarını Devre Dışı Bırakma: Bu kısıtlamalar, XSS ve diğer olası tehlikeleri önlemek için varsayılan olarak yerine getirilir. Bununla birlikte, genellikle geliştirme amaçları için geçici olarak devre dışı bırakılmalıdır.
Akıllı Arama Alanından JavaScript'e İzin Ver: Etkinleştirildiğinde, javascript ile URL'leri girme olanağı sağlar : doğrudan adres çubuğuna dahil edilir.
SHA-1 Sertifikalarını Güvenli Olmayan olarak işleme: SHA-1 algoritmasını kullanan SSL sertifikalarının güncelliğini yitirmiş ve savunmasız olduğu düşünülmektedir.