Vikipedi

Web geliştirme araçları

Web geliştirme araçları (genellikle devtools veya inspect element olarak adlandırılır), web geliştiricilerinin kaynak kodlarını test etmelerine ve hata ayıklamalarına olanak tanır. Bir web sayfasının doğrudan oluşturulmasına yardımcı olmamaları, bunun yerine bir web sitesinin veya web uygulamasının kullanıcı arayüzünü test etmek için kullanılan araçlar olmaları bakımından web sitesi oluşturuculardan ve entegre geliştirme ortamlarından (IDE'ler) farklıdırlar.

Öğe seçici ve CSS özellik düzenleyicili sayfa denetçisi

Web geliştirme araçları, modern web tarayıcılarında tarayıcı eklentileri veya yerleşik özellikler olarak gelir.[1] Google Chrome,[2] Firefox,[3] Internet Explorer, Safari,[4] Microsoft Edge [5] ve Opera [6] gibi tarayıcılar, web geliştiricilerine yardımcı olacak yerleşik araçlara sahiptir [7] ve ilgili eklenti indirme merkezlerinde birçok ek eklenti bulunabilir.

Web geliştirme araçları, geliştiricilerin HTML, CSS, DOM, JavaScript ve web tarayıcısı tarafından yönetilen diğer bileşenler dahil olmak üzere çeşitli web teknolojileriyle çalışmasına olanak tanır. Web tarayıcılarından daha fazlasını yapma talebinin artması nedeniyle,[8] popüler web tarayıcıları, geliştiricilere yönelik daha fazla özellik içeriyor.[9]

Web geliştirici araçları desteği

değiştir

Birkaç önemli web tarayıcısı, web tasarımcılarının ve geliştiricilerin sayfalarının yapısına bakmalarına olanak tanıyan web geliştirici araçlarını destekler. Bunların tümü, tarayıcıda yerleşik olan ve ek modüller veya yapılandırma gerektirmeyen araçlardır.

  • Firefox –F12 Web Konsolunu / Tarayıcı Konsolunu açar (Firefox 4'ten beri).[10][11] Web Konsolu, tek bir içerik sekmesi için geçerlidir; Tarayıcı Konsolu tüm tarayıcı için geçerlidir.[12] Firebug dahil olmak üzere birçok eklenti de mevcuttur.
  • Google Chrome – Chrome Geliştirici Araçları (DevTools) [13]
  • Internet Explorer ve Microsoft Edge –F12 Web Geliştirici Araçlarını açar (sürüm 8'den itibaren) [14][15]
  • Opera – Opera Dragonfly [16]
  • Safari – Safari Web Geliştirme Araçları (sürüm 3'ten itibaren) </link>

En çok kullanılan özellikler

değiştir

Tarayıcıdaki yerleşik web geliştirici araçlarına genellikle bir web sayfasındaki bir öğenin üzerine gelinerek ve içerik menüsünden "Öğeyi İncele" veya benzer bir seçenek seçilerek erişilir. Alternatif olarak F12 tuşu başka bir yaygın kısayol olma eğilimindedir.[17]

HTML ve DOM

değiştir

HTML ve DOM görüntüleyici ve düzenleyici, genellikle yerleşik web geliştirme araçlarına dahil edilir. HTML ve DOM görüntüleyici ile web tarayıcılarındaki kaynağı görüntüle özelliği arasındaki fark, HTML ve DOM görüntüleyicinin, HTML ve DOM'da değişiklik yapmanıza ve değişiklik yapıldıktan sonra sayfaya yansıyan değişikliği görmenize izin vermesinin yanı sıra DOM'u işlendiği gibi görmenize olanak sağlamasıdır.[18]

Seçme ve düzenlemeye ek olarak, HTML öğeleri panelleri genellikle DOM nesnesinin görüntüleme boyutu ve Basamaklı stil sayfası özellikleri gibi özelliklerini de görüntüler.[19]

 
3B sayfa denetçisi, Firefox sürüm 11'den 46'ya kadar olan bir özellik idi

Firefox'un 11 ila 46 sürümleri, WebGL kullanan bir 3B sayfa denetçisi ile donatıldı; burada öğelerin iç içe yerleştirilmesi, sayfa yüzeyinden çıkıntı yapan katmanlarla görselleştirildi.[20][21]

Web sayfası ögeleri, kaynakları ve ağ bilgileri

değiştir

Web sayfaları genellikle resimler, komut dosyaları, yazı tipi ve diğer harici dosyalar biçiminde ek içerik yükler ve gerektirir. Web geliştirme araçları, geliştiricilerin web sayfasında yüklenen ve mevcut olan kaynakları bir ağaç yapısı listesinde incelemesine de olanak tanır ve stil sayfalarının görünümü gerçek zamanlı olarak test edilebilir.[22][23]

Web geliştirme araçları ayrıca geliştiricilerin, yükleme süresi ve bant genişliği kullanımının ne olduğu ve hangi HTTP üstbilgilerinin gönderilip alındığı gibi ağ kullanımı hakkındaki bilgileri görüntülemesine olanak tanır.[24]

Profil oluşturma ve denetim

değiştir

Profil oluşturma, geliştiricilerin bir web sayfasının veya web uygulamasının performansı hakkında bilgi toplamasına olanak tanır. Bu bilgilerle geliştiriciler, komut dosyalarının performansını artırabilir. Denetim özellikleri, bir sayfayı analiz ettikten sonra geliştiricilere, sayfa yükleme süresini azaltacak ve yanıt hızını artıracak optimizasyonlar için öneriler sağlayabilir. Web geliştirme araçları tipik olarak sayfanın işlenmesi için geçen sürenin, bellek kullanımının ve meydana gelen olay türlerinin kaydını da sağlar.[25][26]

Bu özellikler, geliştiricilerin web sayfalarını veya web uygulamalarını optimize etmelerini sağlar.[27]

JavaScript hata ayıklama

değiştir

JavaScript genellikle web tarayıcılarında kullanılır. Web geliştirme araçları genellikle, geliştiricilerin JavaScript'te hata ayıklarken izleme ifadeleri, kesme noktaları eklemesine, çağrı yığınını görüntülemesine ve duraklatmasına, üzerinde adım atmasına, işlevlere adım atmasına ve işlevlerin dışına adım atmasına izin vererek betiklerde hata ayıklamak için bir panel içerir.

Genellikle bir JavaScript konsolu dahildir. Konsollar, geliştiricilerin JavaScript komutları yazmasına ve işlevleri çağırmasına veya bir komut dosyasının yürütülmesi sırasında karşılaşılmış olabilecek hataları görüntülemesine olanak tanır.[28][29][30]

Uzantılar ve eklentiler

değiştir

Modern web tarayıcıları, işlevsellik eklemek veya artırmak için eklentilerin veya uzantıların kullanımını destekler.[31] Çok çeşitli ek özellikler sağlayabilen birçok yaygın eklenti vardır.

Ayrıca bakınız

değiştir
  • Web Developer (yazılım)
  • Web geliştirme yaşam döngüsü

Kaynakça

değiştir
  1. ^ "What are browser developer tools?". MDN. Mozilla Corporation. 9 Şubat 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. Every modern web browser includes a powerful suite of developer tools. 
  2. ^ "Chrome DevTools". Chrome Developers. 23 Mart 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  3. ^ "Firefox DevTools User Docs". Firefox Source Docs. 6 Kasım 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  4. ^ "Safari Developer Tools overview". Apple Support (UK). 21 Mayıs 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  5. ^ "Microsoft Edge DevTools documentation". Microsoft Learn. 26 Eylül 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  6. ^ "Explore advanced features: Streamline development with developer tools". Opera help. 29 Kasım 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  7. ^ "Developer Tools". MDN. Mozilla Corporation. 4 Aralık 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. Current browsers provide integrated developer tools... 
  8. ^ "Growing Demand for Web Developers". Bright Hub. 5 Şubat 2009. 15 Şubat 2009 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  9. ^ "Browsers are the new IDE for Web Development". think digit. 29 Haziran 2012. 2 Temmuz 2012 tarihinde kaynağından arşivlendi.  Yazar |ad1= eksik |soyadı1= (yardım)
  10. ^ "The Browser Console". Mozilla Hacks – the Web developer blog (İngilizce). 18 Eylül 2013 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  11. ^ "Web Console". MDN Web Docs (İngilizce). 25 Ekim 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  12. ^ "Browser Console". Mozilla Developer Network. 13 Ağustos 2016. 27 Aralık 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 15 Mart 2017. 
  13. ^ "Chrome DevTools Overview - Google Chrome". Chrome Developers. 18 Temmuz 2014 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  14. ^ "F12 Developer Tools (Windows)". msdn.microsoft.com (İngilizce). 30 Nisan 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.  Yazar |ad1= eksik |soyadı1= (yardım)
  15. ^ erikadoyle. "Microsoft Edge Developer Tools - Microsoft Edge Development". docs.microsoft.com (İngilizce). 26 Mart 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  16. ^ "Opera Browser | Faster, Safer, Smarter Web Browser". www.opera.com (İngilizce). 28 Şubat 2008 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  17. ^ piyushagg. "Browser Developer Tools". GeeksforGeeks. 7 Eylül 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023. 
  18. ^ "Introduction to F12 Developer Tools (Windows)". msdn.microsoft.com (İngilizce). 17 Şubat 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.  Yazar |ad1= eksik |soyadı1= (yardım)
  19. ^ "Inspect and Edit Pages and Styles | Tools for Web Developers". Google Developers (İngilizce). 30 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  20. ^ Jey (10 Ocak 2012). "Firefox gets 3D page inspector tool". Devlup. 9 Temmuz 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 1 Temmuz 2021. 
  21. ^ "3D view - Firefox Developer Tools | MDN". developer.mozilla.org. 24 Ağustos 2013 tarihinde kaynağından arşivlendi. From Firefox 47 onwards, 3D view is no longer available. 
  22. ^ "Resources Panel - Google Chrome". Chrome Developers. 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  23. ^ "Firefox Debuts New Developer Toolbar". The Mozilla Blog (İngilizce). 11 Ekim 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  24. ^ "Measure Resource Loading Times | Tools for Web Developers". Google Developers (İngilizce). 30 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  25. ^ "Profiles Panel - Google Chrome". developers.google.com. 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  26. ^ "F12 developer tools console error messages (Windows)". msdn.microsoft.com (İngilizce). 14 Mayıs 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.  Yazar |ad1= eksik |soyadı1= (yardım)
  27. ^ "Using the Profiler Tool to analyze the performance of your code (Windows)". msdn.microsoft.com (İngilizce). 30 Mayıs 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.  Yazar |ad1= eksik |soyadı1= (yardım)
  28. ^ "New Firefox Command Line helps you develop faster". Mozilla Hacks – the Web developer blog (İngilizce). 1 Eylül 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  29. ^ "Opera Browser | Faster, Safer, Smarter Web Browser". www.opera.com (İngilizce). 9 Mayıs 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  30. ^ "Using the Console  |  Tools for Web Developers". Google Developers (İngilizce). 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
  31. ^ "More browser features, fewer plugin updates | Firefox". Mozilla (İngilizce). 9 Ekim 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. 
"https://tr.wikipedia.org/w/index.php?title=Web_geliştirme_araçları&oldid=33251868" sayfasından alınmıştır