İçeriğe atla

Web geliştirme araçları

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

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.

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

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

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

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

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

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

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

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

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

Kaynakça

  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. 

İlgili Araştırma Makaleleri

<span class="mw-page-title-main">Web tarayıcısı</span> World Wide Webdeki bilgi kaynaklarını almak, sunmak ve dolaşmak için yazılım uygulaması

Web tarayıcısı veya ağ tarayıcısı, kullanıcıların World Wide Web (WWW) üzerinde bulunan bilgi kaynaklarını edinmeye ve görüntülemeye yarayan yazılımların genel adıdır. WWW üzerindeki bilgi kaynakları web sayfası, resim, video veya başka içerik türü olabilir. Bu kaynaklarda yer alan hiperlinkler aracılığıyla kullanıcılar, web tarayıcılarını kullanarak ilgili kaynaklar arasında dolaşabilir.

<span class="mw-page-title-main">Mozilla Firefox</span> yazılım

Mozilla Firefox, Mozilla Vakfı ve onun alt kuruluşu Mozilla Corporation tarafından geliştirilen, özgür ve açık kaynak kodlu bir web tarayıcısıdır. Firefox; Windows, macOS, Linux, Android ve iOS işletim sistemlerinde kullanabilir. Yazılımın Windows, macOS, Linux, Android sürümlerinde web sayfalarının oluşturulması için Gecko motoru kullanılır. Mozilla tarafından geliştirilen Gecko, mevcut ve planlanmış web standartlarıyla uyumludur. 2015'te çıkan iOS için Firefox uygulamasında ise Apple'ın getirdiği kısıtlamalar nedeniyle iOS'in bütünleşik WebKit motoru kullanılır.

<span class="mw-page-title-main">Tarayıcı savaşları</span>

Tarayıcı Savaşları, elektronik cihazların İnternete bağlanırken kullandıkları yazılımlar olan ağ tarayıcısı üreticisi şirketler arasında yaşanan ve pazar payını elinde tutmak ya da artırmak için girişilen yarış dönemlerine verilen addır.

<span class="mw-page-title-main">JavaScript</span> programlama dili

JavaScript, HTML ve CSS ile birlikte World Wide Web'in temel teknolojilerinden biri olan programlama dilidir. Web sitelerinin %97'sinden fazlası, web sayfası hareketleri için istemci tarafında JavaScript kullanırlar ve kullanılan kodlar genellikle üçüncü taraf kitaplıkları içerir. Tüm büyük web tarayıcılarında, kaynak kodunu kullanıcıların cihazlarında yürütebilmek için özel bir JavaScript motoru bulunur.

<span class="mw-page-title-main">Web sayfası</span> World Wide Web ve web tarayıcıları aracılığıyla doğrudan görüntülenebilen tek belge

Web sayfası, World Wide Web için hazırlanan ve web tarayıcısı kullanılarak görüntülenebilen dokümanlardır. Web sayfaları çoğunlukla HTML formatında kodlanır, CSS, betik, görsel ve diğer yardımcı kaynaklardan yararlanılarak son görünümüne sahip olur ve işlevsellik kazanır. Birden fazla web sayfasının bir araya gelmesi ile ortaya çıkan web sitesi ile karıştırılmamalıdır. Günlük konuşma dilinde internet sayfası terimi de çoğunlukla web sitesi anlamında kullanılmaktadır.

Netscape Communications Corporation Mountain View, Kaliforniya ve daha sonra Dulles, Virginia merkezli Amerikan bağımsız bir bilgisayar hizmetleri şirketidir. Netscape web tarayıcısı bir zamanlar baskındı 1990'ların ortalarında pazar payı yüzde 90'ın üstündeyken 2006'da yüzde 1'in altına indi. Rakipleri Microsoft Internet Explorer ve diğer tarayıcılara yenik düştü. Aynı zamanda Netscape, en yaygın programlama dili JavaScript'i oluşturan şirkettir.

Bu liste bilinen bazı Firefox eklentilerinin listesidir. Birçok Mozilla Firefox eklentisi SeaMonkey tarayıcısında da çalışır. Daha geniş bir liste için resmi eklenti deposuna bakabilirsiniz. 30 Nisan 2007 tarihiyle bu depoda 2286 eklenti bulunmaktadır. Eklentiler geliştiriciler tarafından yaratılmaktadır. Eklentilerin tamamı kamuya açıklanmadan önce editör bir grup tarafından gözden geçirilir.

<span class="mw-page-title-main">Google Chrome</span> Google tarafından geliştirilen bir web tarayıcısı

Google Chrome, Google tarafından geliştirilen ücretsiz bir web tarayıcısıdır. Eylül 2008'de Microsoft Windows sürümü yayımlanmış; daha sonra Linux, macOS, iOS ve Android sürümleri de geliştirilmiştir.

<span class="mw-page-title-main">Mozilla Firefox'un pazar payı</span>

Mozilla Firefox'un pazar payı 2004'te yayınlandığından, en büyük rakibi Google Chrome'un liderliği ele geçirmesine kadar hızla arttı. Şu anda Dünya'da en çok kullanılan 4. Web tarayıcısı konumundadır.

<span class="mw-page-title-main">Internet Explorer 8</span>

Internet Explorer 8 (IE8). Microsoft tarafından geliştirilen Internet Explorer Web tarayıcısının 8. sürümüdür. 19 Mart 2009 yılında sunuldu. 2006 yılında tanıtılmış olan Internet Explorer 7'nin yerini aldı. 2011 yılında ise yerini Internet Explorer 9 aldı. Windows 7 ve Windows Server 2008 R2 işletim sistemleri için varsayılan tarayıcıdır. Internet Explorer 8, IE'nin Acid2 testini geçen ilk sürümüdür. Daha sonraki Acid3 testinde yalnızca 24/100 puan aldı. Microsoft'a göre, güvenlik, kullanım kolaylığı, RSS, CSS, Ajax, Web sayfası bildirimcisi olan Web Slice desteğindeki iyileştirmeler IE8 için öncelikleriydi. Internet Explorer 8, Internet Explorer'ın Windows XP ve Windows Server 2003'te desteklenen son sürümüdür.

<span class="mw-page-title-main">WebGL</span>

WebGL, kâr amacı gütmeyen teknoloji şirketler birliği Khronos Group tarafından yönetilen, web ortamında 3 boyutlu grafik çizimi sağlanmasını amaçlayan bir web standardıdır. OpenGL ES 2.0 üzerine temellendirilmiştir, otomatik hafıza yönetimli JavaScript gibi dillere uyum sağlaması için küçük değişikliklere uğramış olsa da WebGL OpenGL ES'ten çok da farklı değildir. Uyumlu web tarayıcısında herhangi bir eklenti kurulmasını gerektirmeden, HTML5'in Canvas elementi üzerinde 3 boyutlu grafik çizimi yapılmasını mümkün kılmaktadır.

<span class="mw-page-title-main">WebSocket</span> bilgisayar iletişim protokolü

WebSocket, tek bir TCP bağlantısı üzerinden tam çift yönlü iletişim kanalı sağlayan bir bilgisayar iletişim protokolüdür. WebSocket protokolü IETF tarafından 2011 yılında RFC 6455 ile standart hale getirilmiş ve WebIDL içerisindeki WebSocket API W3C tarafından standart hale getirilmektedir.

<span class="mw-page-title-main">Favicon</span> Belli bir ağ sayfasının küçük simgesi

Favicon, kısayol simgesi, website ikonu, sekme ikonu, URL ikonu veya yer imi ikonu olarak da bilinir, bir veya daha fazla küçük simge içeren bir dosyadır, belirli bir web sitesi veya web sayfası ile ilişkili. Bir web grafik tasarımcısı böyle bir simge yaratabilir ve onu bir web sitesine çeşitli yollarla yükleyebilir ve ardından grafiksel web tarayıcısı bundan yararlanabilir. Favicon desteği sağlayan tarayıcılar tipik olarak bir tarayıcının faviconunu adres çubuğu ve yer imleri listesinde sayfanın adının yanında gösterir. Sekmeli tarayıcı özelliğini destekleyen tarayıcılar tipik olarak sekmedeki sayfanın başlığının yanında bir sayfanın favicon'unu gösterir ve siteye özgü tarayıcı favicon'u masaüstü simgesi olarak kullanır.

WebRTC, web tarayıcılarına ve mobil uygulamalara basit uygulama geliştirme arayüzü (API'ler) aracılığıyla gerçek zamanlı iletişim (RTC) sağlayan ücretsiz, açık kaynaklı bir projedir. Direkt olarak eşler arası iletişime izin vermesi ile, eklenti yükleme veya uygulama indirme ihtiyacını ortadan kaldırarak, ses ve video iletişiminin web sayfalarında kolaylıkla kullanılmasını sağlar. Apple, Google, Microsoft, Mozilla ve Opera tarafından desteklenen WebRTC, World Wide Web Konsorsiyumu (W3C) ve İnternet Mühendisliği Görev Gücü (IETF) aracılığıyla standartlaştırılmaktadır.

Opera Dragonfly, Opera Software tarafından sunulan Web geliştirme aracı'dır.

MDN Web Docs, Mozilla tarafından sunulan çok dilli bir web geliştirici kılavuzudur.

JavaScript motoru, JavaScript kodunu yürüten bir yazılım bileşenidir. İlk JavaScript motorları yalnızca yorumlayıcılardı, ancak ilgili tüm modern motorlar ise gelişmiş performans için tam zamanında derlemeyi kullanır.

Chakra, Microsoft tarafından geliştirilen özel mülk bir JScript motorudur. Internet Explorer web tarayıcısında kullanılır.

Tarayıcı güvenliği, ağ bağlantılı verileri ve bilgisayar sistemlerini gizlilik ihlallerinden veya kötü amaçlı yazılımlardan korumak için İnternet güvenliğinin web tarayıcılarına uygulanmasıdır. Tarayıcıların güvenlik açıkları genellikle JavaScript ile bazen Adobe Flash kullanan ikincil bir yüke sahip siteler arası komut dosyası (XSS) kullanır. Güvenlik açıkları ayrıca tüm tarayıcılarda yaygın olarak kullanılan güvenlik açıklarından yararlanabilir.).

Web'de kullanıcı aracısı, kullanıcı adına hareket eden ve "Web içeriğini alan, işleyen ve son kullanıcı etkileşimini kolaylaştıran" herhangi bir yazılımdır. Bu nedenle kullanıcı aracısı özel bir yazılım aracısı türüdür.


Bu sayfa, bu Vikipedi makalesine dayanmaktadır.
Metin, CC BY-SA 4.0 lisansı altında mevcuttur; ek koşullar uygulanabilir.
Görseller, videolar ve sesler kendi lisansları altında mevcuttur.