Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
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.Google Chrome,Firefox,Internet Explorer, Safari,Microsoft Edge ve Opera gibi tarayıcılar, web geliştiricilerine yardımcı olacak yerleşik araçlara sahiptir 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, popüler web tarayıcıları, geliştiricilere yönelik daha fazla özellik içeriyor.
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). Web Konsolu, tek bir içerik sekmesi için geçerlidir; Tarayıcı Konsolu tüm tarayıcı için geçerlidir. Firebug dahil olmak üzere birçok eklenti de mevcuttur.
- Google Chrome – Chrome Geliştirici Araçları (DevTools)
- Internet Explorer ve Microsoft Edge –F12 Web Geliştirici Araçlarını açar (sürüm 8'den itibaren)
- Opera – Opera Dragonfly
- 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.
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.
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.
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.
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.
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.
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.
Bu özellikler, geliştiricilerin web sayfalarını veya web uygulamalarını optimize etmelerini sağlar.
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.
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. Ç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
- ^ . 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.
- ^ . Chrome Developers. 23 Mart 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . Firefox Source Docs. 6 Kasım 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . Apple Support (UK). 21 Mayıs 2023 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . Microsoft Learn. 26 Eylül 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . Opera help. 29 Kasım 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . MDN. Mozilla Corporation. 4 Aralık 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
Current browsers provide integrated developer tools...
- ^ . Bright Hub. 5 Şubat 2009. 15 Şubat 2009 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . think digit. 29 Haziran 2012. 2 Temmuz 2012 tarihinde kaynağından arşivlendi. Yazar
|ad1=eksik|soyadı1=() - ^ . Mozilla Hacks – the Web developer blog (İngilizce). 18 Eylül 2013 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . MDN Web Docs (İngilizce). 25 Ekim 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . Mozilla Developer Network. 13 Ağustos 2016. 27 Aralık 2016 tarihinde kaynağından arşivlendi. Erişim tarihi: 15 Mart 2017.
- ^ . Chrome Developers. 18 Temmuz 2014 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . msdn.microsoft.com (İngilizce). 30 Nisan 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. Yazar
|ad1=eksik|soyadı1=() - ^ erikadoyle. . docs.microsoft.com (İngilizce). 26 Mart 2017 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . www.opera.com (İngilizce). 28 Şubat 2008 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ piyushagg. . GeeksforGeeks. 7 Eylül 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 5 Temmuz 2023.
- ^ . msdn.microsoft.com (İngilizce). 17 Şubat 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018. Yazar
|ad1=eksik|soyadı1=() - ^ . Google Developers (İngilizce). 30 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ Jey (10 Ocak 2012). . Devlup. 9 Temmuz 2021 tarihinde kaynağından arşivlendi. Erişim tarihi: 1 Temmuz 2021.
- ^ . developer.mozilla.org. 24 Ağustos 2013 tarihinde kaynağından arşivlendi.
From Firefox 47 onwards, 3D view is no longer available.
- ^ . Chrome Developers. 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . The Mozilla Blog (İngilizce). 11 Ekim 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . Google Developers (İngilizce). 30 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . developers.google.com. 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . 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=() - ^ . 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=() - ^ . Mozilla Hacks – the Web developer blog (İngilizce). 1 Eylül 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . www.opera.com (İngilizce). 9 Mayıs 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . Google Developers (İngilizce). 31 Mayıs 2012 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
- ^ . Mozilla (İngilizce). 9 Ekim 2011 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Eylül 2018.
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
Web gelistirme araclari genellikle devtools veya inspect element olarak adlandirilir web gelistiricilerinin kaynak kodlarini test etmelerine ve hata ayiklamalarina olanak tanir Bir web sayfasinin dogrudan olusturulmasina yardimci olmamalari bunun yerine bir web sitesinin veya web uygulamasinin kullanici arayuzunu test etmek icin kullanilan araclar olmalari bakimindan web sitesi olusturuculardan ve entegre gelistirme ortamlarindan IDE ler farklidirlar Oge secici ve CSS ozellik duzenleyicili sayfa denetcisi Web gelistirme araclari modern web tarayicilarinda tarayici eklentileri veya yerlesik ozellikler olarak gelir Google Chrome Firefox Internet Explorer Safari Microsoft Edge ve Opera gibi tarayicilar web gelistiricilerine yardimci olacak yerlesik araclara sahiptir ve ilgili eklenti indirme merkezlerinde bircok ek eklenti bulunabilir Web gelistirme araclari gelistiricilerin HTML CSS DOM JavaScript ve web tarayicisi tarafindan yonetilen diger bilesenler dahil olmak uzere cesitli web teknolojileriyle calismasina olanak tanir Web tarayicilarindan daha fazlasini yapma talebinin artmasi nedeniyle populer web tarayicilari gelistiricilere yonelik daha fazla ozellik iceriyor Web gelistirici araclari destegiBirkac onemli web tarayicisi web tasarimcilarinin ve gelistiricilerin sayfalarinin yapisina bakmalarina olanak taniyan web gelistirici araclarini destekler Bunlarin tumu tarayicida yerlesik olan ve ek moduller veya yapilandirma gerektirmeyen araclardir Firefox F12 Web Konsolunu Tarayici Konsolunu acar Firefox 4 ten beri Web Konsolu tek bir icerik sekmesi icin gecerlidir Tarayici Konsolu tum tarayici icin gecerlidir Firebug dahil olmak uzere bircok eklenti de mevcuttur Google Chrome Chrome Gelistirici Araclari DevTools Internet Explorer ve Microsoft Edge F12 Web Gelistirici Araclarini acar surum 8 den itibaren Opera Opera Dragonfly Safari Safari Web Gelistirme Araclari surum 3 ten itibaren lt link gt En cok kullanilan ozelliklerTarayicidaki yerlesik web gelistirici araclarina genellikle bir web sayfasindaki bir ogenin uzerine gelinerek ve icerik menusunden Ogeyi Incele veya benzer bir secenek secilerek erisilir Alternatif olarak F12 tusu baska bir yaygin kisayol olma egilimindedir HTML ve DOM HTML ve DOM goruntuleyici ve duzenleyici genellikle yerlesik web gelistirme araclarina dahil edilir HTML ve DOM goruntuleyici ile web tarayicilarindaki kaynagi goruntule ozelligi arasindaki fark HTML ve DOM goruntuleyicinin HTML ve DOM da degisiklik yapmaniza ve degisiklik yapildiktan sonra sayfaya yansiyan degisikligi gormenize izin vermesinin yani sira DOM u islendigi gibi gormenize olanak saglamasidir Secme ve duzenlemeye ek olarak HTML ogeleri panelleri genellikle DOM nesnesinin goruntuleme boyutu ve Basamakli stil sayfasi ozellikleri gibi ozelliklerini de goruntuler 3B sayfa denetcisi Firefox surum 11 den 46 ya kadar olan bir ozellik idi Firefox un 11 ila 46 surumleri WebGL kullanan bir 3B sayfa denetcisi ile donatildi burada ogelerin ic ice yerlestirilmesi sayfa yuzeyinden cikinti yapan katmanlarla gorsellestirildi Web sayfasi ogeleri kaynaklari ve ag bilgileri Web sayfalari genellikle resimler komut dosyalari yazi tipi ve diger harici dosyalar biciminde ek icerik yukler ve gerektirir Web gelistirme araclari gelistiricilerin web sayfasinda yuklenen ve mevcut olan kaynaklari bir agac yapisi listesinde incelemesine de olanak tanir ve stil sayfalarinin gorunumu gercek zamanli olarak test edilebilir Web gelistirme araclari ayrica gelistiricilerin yukleme suresi ve bant genisligi kullaniminin ne oldugu ve hangi HTTP ustbilgilerinin gonderilip alindigi gibi ag kullanimi hakkindaki bilgileri goruntulemesine olanak tanir Profil olusturma ve denetim Profil olusturma gelistiricilerin bir web sayfasinin veya web uygulamasinin performansi hakkinda bilgi toplamasina olanak tanir Bu bilgilerle gelistiriciler komut dosyalarinin performansini artirabilir Denetim ozellikleri bir sayfayi analiz ettikten sonra gelistiricilere sayfa yukleme suresini azaltacak ve yanit hizini artiracak optimizasyonlar icin oneriler saglayabilir Web gelistirme araclari tipik olarak sayfanin islenmesi icin gecen surenin bellek kullaniminin ve meydana gelen olay turlerinin kaydini da saglar Bu ozellikler gelistiricilerin web sayfalarini veya web uygulamalarini optimize etmelerini saglar JavaScript hata ayiklama JavaScript genellikle web tarayicilarinda kullanilir Web gelistirme araclari genellikle gelistiricilerin JavaScript te hata ayiklarken izleme ifadeleri kesme noktalari eklemesine cagri yiginini goruntulemesine ve duraklatmasina uzerinde adim atmasina islevlere adim atmasina ve islevlerin disina adim atmasina izin vererek betiklerde hata ayiklamak icin bir panel icerir Genellikle bir JavaScript konsolu dahildir Konsollar gelistiricilerin JavaScript komutlari yazmasina ve islevleri cagirmasina veya bir komut dosyasinin yurutulmesi sirasinda karsilasilmis olabilecek hatalari goruntulemesine olanak tanir Uzantilar ve eklentilerModern web tarayicilari islevsellik eklemek veya artirmak icin eklentilerin veya uzantilarin kullanimini destekler Cok cesitli ek ozellikler saglayabilen bircok yaygin eklenti vardir Ayrica bakinizWeb Developer yazilim Web gelistirme yasam dongusuKaynakca MDN Mozilla Corporation 9 Subat 2023 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Every modern web browser includes a powerful suite of developer tools Chrome Developers 23 Mart 2021 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Firefox Source Docs 6 Kasim 2021 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Apple Support UK 21 Mayis 2023 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Microsoft Learn 26 Eylul 2022 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Opera help 29 Kasim 2021 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 MDN Mozilla Corporation 4 Aralik 2017 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 Current browsers provide integrated developer tools Bright Hub 5 Subat 2009 15 Subat 2009 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 think digit 29 Haziran 2012 2 Temmuz 2012 tarihinde kaynagindan arsivlendi Yazar ad1 eksik soyadi1 yardim Mozilla Hacks the Web developer blog Ingilizce 18 Eylul 2013 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 MDN Web Docs Ingilizce 25 Ekim 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Mozilla Developer Network 13 Agustos 2016 27 Aralik 2016 tarihinde kaynagindan arsivlendi Erisim tarihi 15 Mart 2017 Chrome Developers 18 Temmuz 2014 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 msdn microsoft com Ingilizce 30 Nisan 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Yazar ad1 eksik soyadi1 yardim erikadoyle docs microsoft com Ingilizce 26 Mart 2017 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 www opera com Ingilizce 28 Subat 2008 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 piyushagg GeeksforGeeks 7 Eylul 2022 tarihinde kaynagindan arsivlendi Erisim tarihi 5 Temmuz 2023 msdn microsoft com Ingilizce 17 Subat 2011 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Yazar ad1 eksik soyadi1 yardim Google Developers Ingilizce 30 Mayis 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Jey 10 Ocak 2012 Devlup 9 Temmuz 2021 tarihinde kaynagindan arsivlendi Erisim tarihi 1 Temmuz 2021 developer mozilla org 24 Agustos 2013 tarihinde kaynagindan arsivlendi From Firefox 47 onwards 3D view is no longer available Chrome Developers 31 Mayis 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 The Mozilla Blog Ingilizce 11 Ekim 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Google Developers Ingilizce 30 Mayis 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 developers google com 31 Mayis 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 msdn microsoft com Ingilizce 14 Mayis 2011 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Yazar ad1 eksik soyadi1 yardim msdn microsoft com Ingilizce 30 Mayis 2011 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Yazar ad1 eksik soyadi1 yardim Mozilla Hacks the Web developer blog Ingilizce 1 Eylul 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 www opera com Ingilizce 9 Mayis 2011 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Google Developers Ingilizce 31 Mayis 2012 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018 Mozilla Ingilizce 9 Ekim 2011 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Eylul 2018