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[değiştir | kaynağı 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 | kaynağı 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 | kaynağı 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]

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 | kaynağı 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 | kaynağı 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 | kaynağı 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 | kaynağı 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 | kaynağı değiştir]

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

Kaynakça[değiştir | kaynağı değiştir]