Web geli\u015ftiriciler olarak, kodumuzu yazmak sadece ba\u015flang\u0131\u00e7t\u0131r. As\u0131l macera, yazd\u0131\u011f\u0131m\u0131z kodun taray\u0131c\u0131da nas\u0131l davrand\u0131\u011f\u0131n\u0131 anlamak, hatalar\u0131 ay\u0131klamak, performans\u0131 optimize etmek ve kullan\u0131c\u0131 deneyimini m\u00fckemmelle\u015ftirmektir. Peki, bu karma\u015f\u0131k s\u00fcre\u00e7te bize yol g\u00f6steren, adeta bir dedektif gibi ipu\u00e7lar\u0131 sunan gizli kahramanlar\u0131m\u0131z kimler? \u0130\u015fte tam da bu noktada, geli\u015ftirici ara\u00e7lar\u0131 ya da yayg\u0131n ad\u0131yla DevTools devreye giriyor. Taray\u0131c\u0131lar\u0131m\u0131z\u0131n i\u00e7ine entegre edilmi\u015f bu g\u00fc\u00e7l\u00fc ara\u00e7 setleri, web sayfalar\u0131m\u0131z\u0131n perde arkas\u0131na bakmam\u0131z\u0131, canl\u0131 olarak m\u00fcdahale etmemizi ve potansiyel sorunlar\u0131 daha ortaya \u00e7\u0131kmadan \u00e7\u00f6zmemizi sa\u011flar. Bu makalede, DevTools’un ne oldu\u011funu, neden bu kadar kritik oldu\u011funu ve modern web geli\u015ftirme s\u00fcre\u00e7lerindeki kullan\u0131m alanlar\u0131n\u0131 derinlemesine inceleyece\u011fiz. \u0130ster yeni ba\u015flayan bir geli\u015ftirici olun, ister deneyimli bir profesyonel, DevTools’un sundu\u011fu imkanlar sizi \u015fa\u015f\u0131rtacak ve i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 k\u00f6kten de\u011fi\u015ftirecektir.<\/p>\n
Geli\u015ftirici ara\u00e7lar\u0131 (DevTools), modern web taray\u0131c\u0131lar\u0131n\u0131n (Chrome, Firefox, Edge, Safari gibi) i\u00e7ine yerle\u015fik olarak gelen, web sayfalar\u0131n\u0131 incelemek, hatalar\u0131n\u0131 ay\u0131klamak, performans\u0131n\u0131 \u00f6l\u00e7mek ve genel kullan\u0131c\u0131 deneyimini geli\u015ftirmek i\u00e7in tasarlanm\u0131\u015f bir dizi yaz\u0131l\u0131m arac\u0131d\u0131r. Temel olarak, bir web sayfas\u0131n\u0131n HTML, CSS ve JavaScript kodunu ger\u00e7ek zamanl\u0131 olarak g\u00f6rmenizi, d\u00fczenlemenizi ve bu de\u011fi\u015fikliklerin sayfa \u00fczerindeki etkilerini an\u0131nda g\u00f6zlemlemenizi sa\u011flarlar. Bu ara\u00e7lar, sadece front-end (\u00f6n y\u00fcz) geli\u015ftiricileri i\u00e7in de\u011fil, back-end (arka y\u00fcz) geli\u015ftiricileri, tasar\u0131mc\u0131lar, QA m\u00fchendisleri (kalite g\u00fcvence m\u00fchendisleri) ve hatta SEO uzmanlar\u0131 i\u00e7in de paha bi\u00e7ilmez bir kaynakt\u0131r. Bir web sayfas\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak, sorunlar\u0131 tespit etmek ve \u00e7\u00f6zmek i\u00e7in adeta bir mikroskop g\u00f6revi g\u00f6r\u00fcrler.<\/p>\n
DevTools’un hayati \u00f6nemini birka\u00e7 ana ba\u015fl\u0131k alt\u0131nda toplayabiliriz. \u0130lk olarak, hata ay\u0131klama (debugging)<\/strong> yetenekleri sayesinde, JavaScript kodundaki mant\u0131ksal hatalar\u0131, \u00e7al\u0131\u015fma zaman\u0131 sorunlar\u0131n\u0131 ve beklenmedik davran\u0131\u015flar\u0131 kolayca bulup d\u00fczeltebiliriz. Konsol (Console) panelini kullanarak hata mesajlar\u0131n\u0131 g\u00f6rmek, de\u011fi\u015fkenlerin de\u011ferlerini kontrol etmek ve kodun belirli noktalar\u0131nda duraklayarak (breakpoint) ad\u0131m ad\u0131m ilerlemek, karma\u015f\u0131k sorunlar\u0131n \u00e7\u00f6z\u00fcm\u00fcn\u00fc basitle\u015ftirir. \u0130kinci olarak, performans optimizasyonu<\/strong> DevTools’un en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biridir. Bir web sayfas\u0131n\u0131n y\u00fcklenme s\u00fcresini, a\u011f isteklerini, bellek kullan\u0131m\u0131n\u0131 ve CPU t\u00fcketimini analiz ederek, yava\u015flamalara neden olan darbo\u011fazlar\u0131 tespit edebiliriz. Bu sayede, kullan\u0131c\u0131lar\u0131n daha h\u0131zl\u0131 ve ak\u0131c\u0131 bir deneyim ya\u015famas\u0131n\u0131 sa\u011flayacak iyile\u015ftirmeler yapabiliriz. \u00dc\u00e7\u00fcnc\u00fc olarak, UI (Kullan\u0131c\u0131 Aray\u00fcz\u00fc) ve UX (Kullan\u0131c\u0131 Deneyimi) geli\u015ftirme<\/strong> s\u00fcre\u00e7lerinde DevTools vazge\u00e7ilmezdir. Elements paneli ile HTML yap\u0131s\u0131n\u0131 ve CSS stillerini canl\u0131 olarak d\u00fczenleyerek, farkl\u0131 tasar\u0131m denemelerini an\u0131nda g\u00f6rebiliriz. Ayr\u0131ca, farkl\u0131 ekran boyutlar\u0131nda ve cihazlarda sayfan\u0131n nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc sim\u00fcle ederek responsive (duyarl\u0131) tasar\u0131m sorunlar\u0131n\u0131 kolayca giderebiliriz.<\/p>\n Tarihsel olarak bakt\u0131\u011f\u0131m\u0131zda, web geli\u015ftirmenin ilk y\u0131llar\u0131nda bu t\u00fcr entegre ara\u00e7lar yoktu. Geli\u015ftiriciler, hatalar\u0131 tespit etmek i\u00e7in sayfa kayna\u011f\u0131n\u0131 manuel olarak incelemek, DevTools’u ilk kez a\u00e7t\u0131\u011f\u0131n\u0131zda kar\u015f\u0131n\u0131za \u00e7\u0131kan panel \u00e7e\u015fitlili\u011fi biraz g\u00f6z korkutucu olabilir. Ancak endi\u015felenmeyin, \u00e7o\u011fu geli\u015ftirici g\u00fcnl\u00fck i\u015flerinde belirli panelleri daha s\u0131k kullan\u0131r. \u0130\u015fte ba\u015flang\u0131\u00e7 i\u00e7in bilmeniz gereken en temel ve s\u0131k kullan\u0131lan DevTools panelleri ve sunduklar\u0131 imkanlar:<\/p>\n Elements paneli, bir web sayfas\u0131n\u0131n DOM (Document Object Model) yap\u0131s\u0131n\u0131, yani HTML iskeletini ve bu elementlere uygulanan CSS stillerini g\u00f6rmenizi ve an\u0131nda d\u00fczenlemenizi sa\u011flar. Bu panel, \u00f6zellikle tasar\u0131m ve d\u00fczenleme hatalar\u0131n\u0131 gidermek, farkl\u0131 stilleri denemek veya bir elementin neden bekledi\u011finiz gibi g\u00f6r\u00fcnmedi\u011fini anlamak i\u00e7in paha bi\u00e7ilmezdir. Bir elementin \u00fczerine t\u0131klad\u0131\u011f\u0131n\u0131zda veya “Inspect (\u0130ncele)” se\u00e7ene\u011fini kulland\u0131\u011f\u0131n\u0131zda, panelin sol taraf\u0131nda HTML yap\u0131s\u0131n\u0131, sa\u011f taraf\u0131nda ise o elemente uygulanan t\u00fcm CSS kurallar\u0131n\u0131 g\u00f6r\u00fcrs\u00fcn\u00fcz. Burada stilleri kapat\u0131p a\u00e7abilir, yeni kurallar ekleyebilir veya mevcut de\u011ferleri de\u011fi\u015ftirebilirsiniz. Yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikler an\u0131nda taray\u0131c\u0131da yans\u0131r, ancak sayfay\u0131 yeniledi\u011finizde kaybolur, \u00e7\u00fcnk\u00fc bu de\u011fi\u015fiklikler sadece taray\u0131c\u0131n\u0131z\u0131n yerel kopyas\u0131nda yap\u0131l\u0131r, sunucudaki orijinal dosyalar\u0131 etkilemez. Bu \u00f6zellik, h\u0131zl\u0131 prototipleme ve sorun giderme i\u00e7in m\u00fckemmeldir. Ayr\u0131ca, kutu modeli (box model) g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kullanarak bir elementin marj (margin), kenarl\u0131k (border), dolgu (padding) ve i\u00e7erik (content) boyutlar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyebilirsiniz.<\/p>\n Yukar\u0131daki \u00f6rnekte, Elements panelinde Console paneli, JavaScript kodunuzdaki hatalar\u0131, uyar\u0131lar\u0131 ve bilgilendirme mesajlar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in ana merkezinizdir. Ayr\u0131ca, taray\u0131c\u0131 ortam\u0131nda do\u011frudan JavaScript kodu \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Geli\u015ftiriciler genellikle kodlar\u0131na Bu kod blo\u011fu, Sources paneli, web sayfan\u0131z\u0131n t\u00fcm kaynak dosyalar\u0131n\u0131 (HTML, CSS, JavaScript, resimler vb.) g\u00f6r\u00fcnt\u00fclemenizi ve en \u00f6nemlisi JavaScript kodunuzda detayl\u0131 hata ay\u0131klama yapman\u0131z\u0131 sa\u011flar. Bu panelde, kodunuzun belirli sat\u0131rlar\u0131na kesme noktalar\u0131 (breakpoints) ekleyebilir ve kodun bu noktalarda duraklamas\u0131n\u0131 sa\u011flayabilirsiniz. Kod duraklad\u0131\u011f\u0131nda, de\u011fi\u015fkenlerin mevcut de\u011ferlerini inceleyebilir, kod ak\u0131\u015f\u0131n\u0131 ad\u0131m ad\u0131m (step-over, step-into, step-out) takip edebilir ve \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131n\u0131 (call stack) g\u00f6zlemleyebilirsiniz. Bu yetenekler, karma\u015f\u0131k JavaScript uygulamalar\u0131ndaki mant\u0131ksal hatalar\u0131 bulmak i\u00e7in son derece g\u00fc\u00e7l\u00fcd\u00fcr. Ayr\u0131ca, minified (k\u00fc\u00e7\u00fclt\u00fclm\u00fc\u015f) veya transpiled (ba\u015fka bir dile d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f) kodlarla \u00e7al\u0131\u015f\u0131rken, kaynak haritalar\u0131 (source maps) sayesinde orijinal, okunabilir kodunuzu Sources panelinde g\u00f6rebilirsiniz, bu da hata ay\u0131klamay\u0131 \u00e7ok daha kolayla\u015ft\u0131r\u0131r.<\/p>\n Network paneli, bir web sayfas\u0131n\u0131n y\u00fcklenirken yapt\u0131\u011f\u0131 t\u00fcm a\u011f isteklerini (resimler, CSS dosyalar\u0131, JavaScript dosyalar\u0131, API \u00e7a\u011fr\u0131lar\u0131 vb.) izlemenizi sa\u011flar. Bu panel, bir sayfan\u0131n neden yava\u015f y\u00fcklendi\u011fini anlamak i\u00e7in kritik \u00f6neme sahiptir. Her iste\u011fin durum kodunu (HTTP status code), boyutunu, y\u00fcklenme s\u00fcresini ve hangi kaynaktan geldi\u011fini g\u00f6rebilirsiniz. Ayr\u0131ca, istek ba\u015fl\u0131klar\u0131n\u0131 (request headers), yan\u0131t ba\u015fl\u0131klar\u0131n\u0131 (response headers) ve yan\u0131t g\u00f6vdesini (response body) inceleyerek sunucu-istemci ileti\u015fimi hakk\u0131nda detayl\u0131 bilgi edinebilirsiniz. \u00d6zellikle yava\u015f y\u00fcklenen bir sayfan\u0131n optimizasyonunda, Network paneli ile hangi kaynaklar\u0131n \u00e7ok b\u00fcy\u00fck oldu\u011funu, hangi isteklerin gereksiz yere uzun s\u00fcrd\u00fc\u011f\u00fcn\u00fc veya hangi API \u00e7a\u011fr\u0131lar\u0131n\u0131n yan\u0131t vermekte gecikti\u011fini tespit edebilirsiniz. Bu sayede, performans darbo\u011fazlar\u0131n\u0131 belirleyip \u00e7\u00f6z\u00fcmler \u00fcretebilirsiniz.<\/p>\n \u00d6rne\u011fin, bir e-ticaret sitesinde \u00fcr\u00fcn g\u00f6rsellerinin \u00e7ok yava\u015f y\u00fcklendi\u011fini fark ederseniz, Network panelinde bu g\u00f6rsellerin dosya boyutlar\u0131n\u0131 ve y\u00fcklenme s\u00fcrelerini kontrol edebilirsiniz. E\u011fer g\u00f6rseller \u00e7ok b\u00fcy\u00fckse, optimize edilmi\u015f versiyonlar\u0131n\u0131 kullanmak veya tembel y\u00fckleme (lazy loading) uygulamak gibi \u00e7\u00f6z\u00fcmler d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n Modern web uygulamalar\u0131nda performans ve kullan\u0131c\u0131 deneyimi (UX) sadece birer tercih de\u011fil, ayn\u0131 zamanda SEO (Arama Motoru Optimizasyonu) ve kullan\u0131c\u0131 elde tutma a\u00e7\u0131s\u0131ndan da kritik fakt\u00f6rlerdir. DevTools, bu alanlarda size detayl\u0131 analizler sunarak web sitenizi daha h\u0131zl\u0131, daha eri\u015filebilir ve daha keyifli hale getirmenize yard\u0131mc\u0131 olur.<\/p>\n Performance paneli, bir web sayfas\u0131n\u0131n y\u00fcklenme ve \u00e7al\u0131\u015fma zaman\u0131 performans\u0131n\u0131 derinlemesine analiz etmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu panel, sayfan\u0131z\u0131n DOM y\u00fcklemesi, stil hesaplamalar\u0131, d\u00fczen (layout) i\u015flemleri, boyama (painting) ve JavaScript y\u00fcr\u00fctmesi gibi t\u00fcm olaylar\u0131 zaman \u00e7izelgesinde g\u00f6rselle\u015ftirir. Bir kayd\u0131 ba\u015flatt\u0131\u011f\u0131n\u0131zda, taray\u0131c\u0131 belirli bir s\u00fcre boyunca t\u00fcm bu etkinlikleri kaydeder ve ard\u0131ndan size detayl\u0131 bir rapor sunar. Bu rapor sayesinde, hangi i\u015flemlerin CPU’yu en \u00e7ok me\u015fgul etti\u011fini, hangi fonksiyonlar\u0131n uzun s\u00fcrd\u00fc\u011f\u00fcn\u00fc veya hangi g\u00f6rsel g\u00fcncellemelerin tak\u0131lmaya (jank) neden oldu\u011funu g\u00f6rebilirsiniz. \u00d6zellikle animasyonlar\u0131n veya kullan\u0131c\u0131 etkile\u015fimlerinin ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 art\u0131rmak istedi\u011finizde, Performance paneli size darbo\u011fazlar\u0131 bulma konusunda net bilgiler sa\u011flar. \u00d6rne\u011fin, uzun s\u00fcren bir JavaScript g\u00f6revi, sayfan\u0131n yan\u0131t vermemesine neden olabilir; bu panel size tam olarak hangi fonksiyonun bu sorunu yaratt\u0131\u011f\u0131n\u0131 g\u00f6sterebilir.<\/p>\n Bu panelde, ayr\u0131ca bellek (memory) kullan\u0131m\u0131n\u0131 da inceleyebilirsiniz. Bellek s\u0131z\u0131nt\u0131lar\u0131 (memory leaks), \u00f6zellikle uzun s\u00fcre a\u00e7\u0131k kalan uygulamalarda performans\u0131 ciddi \u015fekilde etkileyebilir. Performance paneli, zaman i\u00e7indeki bellek kullan\u0131m\u0131n\u0131 izleyerek ve anl\u0131k bellek g\u00f6r\u00fcnt\u00fcleri (heap snapshots) alarak bu t\u00fcr sorunlar\u0131 tespit etmenize yard\u0131mc\u0131 olur. \u00d6rne\u011fin, bir SPA (Single Page Application – Tek Sayfal\u0131 Uygulama) geli\u015ftiriyorsan\u0131z ve sayfalar aras\u0131 ge\u00e7i\u015flerde bellek kullan\u0131m\u0131n\u0131n s\u00fcrekli artt\u0131\u011f\u0131n\u0131 fark ederseniz, bu bir bellek s\u0131z\u0131nt\u0131s\u0131n\u0131n i\u015fareti olabilir ve Performance paneli size sorunun kayna\u011f\u0131n\u0131 bulmada yol g\u00f6sterecektir.<\/p>\n Lighthouse, Google taraf\u0131ndan geli\u015ftirilen a\u00e7\u0131k kaynakl\u0131 bir ara\u00e7t\u0131r ve DevTools i\u00e7inde entegre olarak bulunur. Bir web sayfas\u0131n\u0131n performans, eri\u015filebilirlik (accessibility), en iyi uygulamalar (best practices), SEO (arama motoru optimizasyonu) ve PWA (Progressive Web App – A\u015famal\u0131 Web Uygulamas\u0131) kriterlerine g\u00f6re otomatik denetimler yapar. Tek bir t\u0131klama ile sayfan\u0131z\u0131n bu alanlardaki puanlar\u0131n\u0131 ve iyile\u015ftirme \u00f6nerilerini al\u0131rs\u0131n\u0131z. Lighthouse, web sitenizin kullan\u0131c\u0131lar ve arama motorlar\u0131 i\u00e7in ne kadar iyi optimize edildi\u011fine dair kapsaml\u0131 bir genel bak\u0131\u015f sunar. \u00d6rne\u011fin, performans denetiminde, sayfan\u0131z\u0131n ilk anlaml\u0131 boyama (First Contentful Paint) s\u00fcresi, etkile\u015fim s\u00fcresi (Time to Interactive) gibi metrikleri de\u011ferlendirir ve bunlar\u0131 iyile\u015ftirmek i\u00e7in resim optimizasyonu, kritik CSS’i sat\u0131r i\u00e7i yapma veya gereksiz JavaScript’i erteleme gibi somut \u00f6nerilerde bulunur.<\/p>\n Eri\u015filebilirlik denetimi, g\u00f6rme engelliler veya di\u011fer \u00f6zel ihtiya\u00e7lar\u0131 olan kullan\u0131c\u0131lar i\u00e7in web sitenizin ne kadar kullan\u0131labilir oldu\u011funu kontrol eder. \u00d6rne\u011fin, yeterli kontrast oran\u0131na sahip olmayan metinler veya alt metni (alt text) eksik g\u00f6rseller gibi sorunlar\u0131 tespit eder. SEO denetimi, arama motorlar\u0131n\u0131n sayfan\u0131z\u0131 daha iyi indekslemesine yard\u0131mc\u0131 olacak temel fakt\u00f6rleri kontrol ederken, en iyi uygulamalar b\u00f6l\u00fcm\u00fc modern web standartlar\u0131na uyumu de\u011ferlendirir. PWA denetimi ise uygulaman\u0131z\u0131n \u00e7evrimd\u0131\u015f\u0131 \u00e7al\u0131\u015fma, ana ekrana eklenebilme gibi PWA \u00f6zelliklerine ne kadar uydu\u011funu inceler. Lighthouse, web sitenizi daha geni\u015f bir kitleye ula\u015ft\u0131rmak ve genel kalitesini art\u0131rmak i\u00e7in yol g\u00f6sterici bir pusula gibidir.<\/p>\n Application paneli, bir web uygulamas\u0131n\u0131n istemci taraf\u0131ndaki (client-side) depolama mekanizmalar\u0131n\u0131 ve servis \u00e7al\u0131\u015fanlar\u0131n\u0131 (Service Workers) y\u00f6netmenizi ve incelemenizi sa\u011flar. Bu panelde, yerel depolama (Local Storage), oturum depolamas\u0131 (Session Storage), IndexedDB, Web SQL ve \u00e7erezler (Cookies) gibi farkl\u0131 depolama t\u00fcrlerinde saklanan verileri g\u00f6r\u00fcnt\u00fcleyebilir, d\u00fczenleyebilir veya silebilirsiniz. Bu, \u00f6zellikle kullan\u0131c\u0131 oturum bilgilerini, ki\u015fiselle\u015ftirilmi\u015f ayarlar\u0131 veya \u00e7evrimd\u0131\u015f\u0131 verileri y\u00f6neten uygulamalar i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sepetine ekledi\u011fi \u00fcr\u00fcnleri yerel depolamada sakl\u0131yorsan\u0131z, Application paneli \u00fczerinden bu verileri kontrol edebilir ve hata ay\u0131klayabilirsiniz.<\/p>\n Servis \u00e7al\u0131\u015fanlar\u0131, modern web uygulamalar\u0131n\u0131n \u00e7evrimd\u0131\u015f\u0131 yeteneklerini ve push bildirimlerini sa\u011flayan g\u00fc\u00e7l\u00fc JavaScript dosyalar\u0131d\u0131r. Application paneli, kay\u0131tl\u0131 servis \u00e7al\u0131\u015fanlar\u0131n\u0131, bunlar\u0131n durumlar\u0131n\u0131 (\u00e7al\u0131\u015f\u0131yor, durduruldu, bekliyor), \u00f6nbelleklerini (Cache Storage) ve bu \u00f6nbelleklerde saklanan kaynaklar\u0131 incelemenizi sa\u011flar. Bu, PWA geli\u015ftirirken veya \u00e7evrimd\u0131\u015f\u0131 \u00f6nbellekleme stratejilerini test ederken vazge\u00e7ilmezdir. \u00d6rne\u011fin, bir servis \u00e7al\u0131\u015fan\u0131n\u0131n do\u011fru \u015fekilde \u00f6nbellekleme yap\u0131p yapmad\u0131\u011f\u0131n\u0131 veya g\u00fcncellenmesi gereken bir kayna\u011f\u0131 hala eski s\u00fcr\u00fcmden mi sundu\u011funu bu panelden kontrol edebilirsiniz. Ayr\u0131ca, web manifest dosyas\u0131 (web app manifest) gibi PWA ile ilgili di\u011fer bile\u015fenleri de Application panelinde inceleyebilirsiniz. Bu panel, web uygulaman\u0131z\u0131n “uygulama” hissini veren t\u00fcm arka plan s\u00fcre\u00e7lerini ve depolama mekanizmalar\u0131n\u0131 y\u00f6netmek i\u00e7in kapsaml\u0131 bir g\u00f6r\u00fcn\u00fcm sunar.<\/p>\n DevTools sadece temel panellerden ibaret de\u011fildir; geli\u015ftirme s\u00fcre\u00e7lerinizi daha da h\u0131zland\u0131racak ve daha derinlemesine analizler yapman\u0131z\u0131 sa\u011flayacak bir\u00e7ok ileri d\u00fczey \u00f6zellik ve ipucu bar\u0131nd\u0131r\u0131r. Bu \u00f6zellikler, deneyimli geli\u015ftiricilerin karma\u015f\u0131k sorunlar\u0131 \u00e7\u00f6zmesine ve i\u015f ak\u0131\u015flar\u0131n\u0131 optimize etmesine yard\u0131mc\u0131 olur.<\/p>\n Security paneli, bir web sayfas\u0131n\u0131n g\u00fcvenlik durumunu, \u00f6zellikle HTTPS ba\u011flant\u0131s\u0131n\u0131n detaylar\u0131n\u0131 incelemenizi sa\u011flar. Bu panel, sayfan\u0131n g\u00fcvenli bir ba\u011flant\u0131 \u00fczerinden y\u00fcklenip y\u00fcklenmedi\u011fini, kullan\u0131lan sertifikan\u0131n ge\u00e7erlili\u011fini ve ba\u011flant\u0131 protokollerini g\u00f6sterir. \u00d6zellikle bir web sitesinde “karma i\u00e7erik (mixed content)” uyar\u0131lar\u0131 al\u0131yorsan\u0131z (yani HTTPS \u00fczerinden y\u00fcklenen bir sayfada HTTP \u00fczerinden y\u00fcklenen kaynaklar varsa), Security paneli bu kaynaklar\u0131 tespit etmenize yard\u0131mc\u0131 olur. Bu, sitenizin kullan\u0131c\u0131lar i\u00e7in g\u00fcvenli oldu\u011funu do\u011frulamak ve arama motorlar\u0131 taraf\u0131ndan daha iyi derecelendirilmek i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n Memory paneli, web uygulaman\u0131z\u0131n bellek kullan\u0131m\u0131n\u0131 analiz etmek ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 tespit etmek i\u00e7in kullan\u0131l\u0131r. \u00d6zellikle uzun s\u00fcre \u00e7al\u0131\u015fan veya s\u00fcrekli veri i\u015fleyen uygulamalarda, gereksiz objelerin bellekte kalmas\u0131 performans\u0131 d\u00fc\u015f\u00fcrebilir. Bu panelde, “Heap snapshot” alarak belirli bir anda bellekteki t\u00fcm JavaScript objelerinin bir anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc \u00e7ekebilir ve objelerin boyutlar\u0131n\u0131, referanslar\u0131n\u0131 inceleyebilirsiniz. Zaman i\u00e7inde birden fazla snapshot alarak, hangi objelerin bellekten temizlenmedi\u011fini ve potansiyel s\u0131z\u0131nt\u0131lara neden oldu\u011funu kar\u015f\u0131la\u015ft\u0131rabilirsiniz. Bu, \u00f6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n ve tek sayfal\u0131k uygulamalar\u0131n (SPA) uzun s\u00fcreli stabilitesini sa\u011flamak i\u00e7in olduk\u00e7a \u00f6nemlidir.<\/p>\n DevTools’un en kullan\u0131\u015fl\u0131 \u00f6zelliklerinden biri olan Responsive Tasar\u0131m Modu (genellikle “Device Toolbar” olarak adland\u0131r\u0131l\u0131r), web sayfan\u0131z\u0131 farkl\u0131 ekran boyutlar\u0131nda ve cihazlarda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc sim\u00fcle etmenizi sa\u011flar. Bu modda, \u00f6nceden tan\u0131mlanm\u0131\u015f cihaz profillerini se\u00e7ebilir (\u00f6rne\u011fin iPhone X, iPad Pro) veya \u00f6zel boyutlar belirleyebilirsiniz. Ayr\u0131ca, cihaz\u0131n y\u00f6n\u00fcn\u00fc (yatay\/dikey) de\u011fi\u015ftirebilir, piksel yo\u011funlu\u011funu (device pixel ratio) sim\u00fcle edebilir ve hatta a\u011f ba\u011flant\u0131s\u0131 h\u0131z\u0131n\u0131 k\u0131s\u0131tlayarak mobil cihazlardaki y\u00fcklenme deneyimini taklit edebilirsiniz. Bu \u00f6zellik, web sitenizin mobil uyumlulu\u011funu (mobile-friendliness) test etmek ve responsive tasar\u0131m hatalar\u0131n\u0131 gidermek i\u00e7in vazge\u00e7ilmezdir.<\/p>\n Workspaces \u00f6zelli\u011fi, DevTools i\u00e7inde yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklikleri do\u011frudan yerel dosya sisteminize kaydetmenize olanak tan\u0131r. Normalde Elements panelinde yapt\u0131\u011f\u0131n\u0131z CSS de\u011fi\u015fiklikleri sayfay\u0131 yeniledi\u011finizde kaybolurken, Workspaces ile yerel dosyan\u0131z\u0131 DevTools’a ba\u011flayarak bu de\u011fi\u015fiklikleri kal\u0131c\u0131 hale getirebilirsiniz. Bu, \u00f6zellikle k\u00fc\u00e7\u00fck d\u00fczeltmeler veya stil denemeleri yaparken, taray\u0131c\u0131 ile kod d\u00fczenleyici aras\u0131nda s\u00fcrekli ge\u00e7i\u015f yapma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r. Sources panelinde de JavaScript dosyalar\u0131n\u0131z\u0131 d\u00fczenleyip kaydedebilirsiniz.<\/p>\n DevTools’un Command Menu (Komut Men\u00fcs\u00fc) \u00f6zelli\u011fi, t\u00fcm panellere, ayarlara ve hatta baz\u0131 gizli \u00f6zelliklere klavye k\u0131sayollar\u0131 ile h\u0131zl\u0131ca eri\u015fmenizi sa\u011flar. Genellikle Bu ileri d\u00fczey \u00f6zellikler, DevTools’un sadece bir hata ay\u0131klama arac\u0131 olman\u0131n \u00f6tesinde, tam te\u015fekk\u00fcll\u00fc bir geli\u015ftirme ortam\u0131 haline geldi\u011fini g\u00f6stermektedir. Bu \u00f6zelliklerin her birini ustaca kullanmak, web geli\u015ftiricilerinin daha sa\u011flam, daha h\u0131zl\u0131 ve daha g\u00fcvenli uygulamalar olu\u015fturmas\u0131na olanak tan\u0131r.<\/p>\n Teorik bilgilerin \u00f6tesine ge\u00e7erek, DevTools’un ger\u00e7ek d\u00fcnya problemlerini \u00e7\u00f6zmede nas\u0131l kullan\u0131ld\u0131\u011f\u0131na dair birka\u00e7 vaka analizi inceleyelim. Bu senaryolar, DevTools’un farkl\u0131 panellerinin bir araya gelerek karma\u015f\u0131k sorunlara nas\u0131l pratik \u00e7\u00f6z\u00fcmler sundu\u011funu g\u00f6sterecektir.<\/p>\n Bir e-ticaret sitesi sahibi, kullan\u0131c\u0131lar\u0131n sepet sayfas\u0131na ula\u015ft\u0131klar\u0131nda sayfan\u0131n \u00e7ok yava\u015f y\u00fcklendi\u011finden \u015fikayet\u00e7i. Bu durum, potansiyel m\u00fc\u015fterilerin siteyi terk etmesine ve sat\u0131\u015f kayb\u0131na neden oluyor. Geli\u015ftirici, bu sorunu \u00e7\u00f6zmek i\u00e7in DevTools’u kullanmaya karar veriyor.<\/p>\n Bir web uygulamas\u0131, kullan\u0131c\u0131lar\u0131n bir formu g\u00f6nderdi\u011finde bazen beklenmedik bir hatayla kar\u015f\u0131la\u015ft\u0131klar\u0131n\u0131 ve formun g\u00f6nderilmedi\u011fini rapor ediyor. Ancak bu hata her zaman tekrarlanm\u0131yor ve geli\u015ftiricinin kendi testlerinde nadiren ortaya \u00e7\u0131k\u0131yor.<\/p>\n Bir blog sitesi, mobil cihazlarda men\u00fcn\u00fcn d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fclenmedi\u011fi ve baz\u0131 yaz\u0131lar\u0131n ekran d\u0131\u015f\u0131na ta\u015ft\u0131\u011f\u0131 \u015fikayetlerini al\u0131yor.<\/p>\n Bu vaka analizleri, DevTools’un sadece bir hata ay\u0131klay\u0131c\u0131 olmaktan \u00f6te, web geli\u015ftirme s\u00fcrecinin her a\u015famas\u0131nda kritik bir rol oynayan \u00e7ok y\u00f6nl\u00fc bir ara\u00e7 oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Do\u011fru paneli do\u011fru zamanda kullanmak, geli\u015ftiricilerin sorunlar\u0131 daha h\u0131zl\u0131 ve daha etkili bir \u015fekilde \u00e7\u00f6zmesine olanak tan\u0131r.<\/p>\n Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evrim ge\u00e7iren bir alan ve bu dinamik ortamda ba\u015far\u0131l\u0131 olmak i\u00e7in do\u011fru ara\u00e7lara sahip olmak hayati \u00f6nem ta\u015f\u0131r. Geli\u015ftirici ara\u00e7lar\u0131 (DevTools), modern web geli\u015ftiricilerinin en g\u00fc\u00e7l\u00fc m\u00fcttefiklerinden biridir. Bu makale boyunca g\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, DevTools sadece kodunuzdaki hatalar\u0131 ay\u0131klamakla kalmaz, ayn\u0131 zamanda web sitenizin performans\u0131n\u0131 optimize etmenize, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc incelemenize, a\u011f isteklerini analiz etmenize ve genel kullan\u0131c\u0131 deneyimini iyile\u015ftirmenize olanak tan\u0131r. Elements panelinden Console’a, Network’ten Performance ve Lighthouse’a kadar her bir panel, web uygulamalar\u0131n\u0131z\u0131n perde arkas\u0131n\u0131 ayd\u0131nlatan benzersiz yetenekler sunar. \u0130ster yeni ba\u015flayan bir geli\u015ftirici olun, ister deneyimli bir profesyonel, DevTools’u etkin bir \u015fekilde kullanmak, i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 h\u0131zland\u0131racak, sorunlar\u0131 daha verimli \u00e7\u00f6zecek ve sonu\u00e7 olarak daha kaliteli web \u00fcr\u00fcnleri ortaya \u00e7\u0131karman\u0131z\u0131 sa\u011flayacakt\u0131r. Unutmay\u0131n, iyi bir geli\u015ftirici sadece kod yazmakla kalmaz, ayn\u0131 zamanda yazd\u0131\u011f\u0131 kodun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlar ve gerekti\u011finde ona m\u00fcdahale edebilir. DevTools, bu anlay\u0131\u015f\u0131 ve m\u00fcdahale yetene\u011fini size sunan anahtard\u0131r. Bu g\u00fc\u00e7l\u00fc ara\u00e7 setini ke\u015ffetmeye devam edin ve web geli\u015ftirme yolculu\u011funuzda yeni ufuklar a\u00e7\u0131n.<\/p>\n #DevTool #WebGeli\u015ftirme #PerformansOptimizasyonu #HataAy\u0131klama #Frontend<\/p>\nalert()<\/code> fonksiyonlar\u0131 ile de\u011fi\u015fken de\u011ferlerini kontrol etmek veya taray\u0131c\u0131 konsoluna elle mesajlar yazd\u0131rmak zorundayd\u0131. Bu s\u00fcre\u00e7ler olduk\u00e7a zaman al\u0131c\u0131 ve verimsizdi. Ancak, taray\u0131c\u0131 teknolojilerinin geli\u015fmesiyle birlikte, \u00f6zellikle 2000’li y\u0131llar\u0131n sonlar\u0131nda Firefox’taki Firebug eklentisi ve ard\u0131ndan Chrome’un kendi entegre DevTools’u gibi \u00e7\u00f6z\u00fcmler, web geli\u015ftirme d\u00fcnyas\u0131nda devrim yaratt\u0131. G\u00fcn\u00fcm\u00fczde her b\u00fcy\u00fck taray\u0131c\u0131, kendine \u00f6zg\u00fc DevTools setiyle birlikte gelir ve bu ara\u00e7lar s\u00fcrekli olarak geli\u015ftirilerek yeni \u00f6zellikler ve iyile\u015ftirmelerle donat\u0131lmaktad\u0131r. Bu sayede, geli\u015ftiriciler daha karma\u015f\u0131k web uygulamalar\u0131n\u0131 bile daha h\u0131zl\u0131 ve verimli bir \u015fekilde in\u015fa edebilir, test edebilir ve bak\u0131m\u0131n\u0131 yapabilirler.<\/p>\nTemel DevTools Panellerine Derin Bir Bak\u0131\u015f: Nereden Ba\u015flamal\u0131?<\/h3>\n
Elements Paneli: HTML ve CSS’i Canl\u0131 \u0130nceleyin ve D\u00fczenleyin<\/h4>\n
\/* Elements panelinde bir div elementinin stilini de\u011fi\u015ftirmek *\/\n.my-button {\n background-color: #007bff; \/* Mavi *\/\n color: white;\n padding: 10px 20px;\n border-radius: 5px;\n}\n\/* Canl\u0131 olarak rengi k\u0131rm\u0131z\u0131ya \u00e7evirmek i\u00e7in: *\/\n.my-button {\n background-color: #dc3545; \/* K\u0131rm\u0131z\u0131 *\/\n}<\/code><\/pre>\n<\/p><\/div>\n.my-button<\/code> s\u0131n\u0131f\u0131na sahip bir butonu se\u00e7ip background-color<\/code> \u00f6zelli\u011fini de\u011fi\u015ftirdi\u011finizde, bu de\u011fi\u015fikli\u011fin sayfa \u00fczerinde an\u0131nda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc g\u00f6zlemleyebilirsiniz. Bu, \u00f6zellikle bir tasar\u0131m\u0131n farkl\u0131 renk veya boyut varyasyonlar\u0131n\u0131 h\u0131zl\u0131ca test etmek istedi\u011finizde olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nConsole Paneli: Hata Ay\u0131klama ve JavaScript Etkile\u015fimi<\/h4>\n
console.log()<\/code> ifadeleri ekleyerek de\u011fi\u015fkenlerin de\u011ferlerini veya kodun belirli bir noktas\u0131na ula\u015f\u0131p ula\u015fmad\u0131\u011f\u0131n\u0131 kontrol ederler. Bir hata olu\u015ftu\u011funda, konsol size hatan\u0131n t\u00fcr\u00fcn\u00fc, nerede meydana geldi\u011fini (dosya ad\u0131 ve sat\u0131r numaras\u0131) ve genellikle hatay\u0131 tetikleyen \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131n\u0131 (call stack) g\u00f6sterir. Bu bilgiler, hatan\u0131n kayna\u011f\u0131n\u0131 bulmak i\u00e7in kritik \u00f6neme sahiptir. Konsol ayr\u0131ca, bir web sayfas\u0131n\u0131n arka plan\u0131nda \u00e7al\u0131\u015fan t\u00fcm JavaScript koduna eri\u015fmenizi ve hatta DOM elementlerini se\u00e7ip onlarla etkile\u015fim kurman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, document.querySelector('h1').textContent<\/code> yazarak sayfadaki ilk h1<\/code> etiketinin metin i\u00e7eri\u011fini alabilirsiniz.<\/p>\n\/\/ JavaScript kodunuzda bir de\u011fi\u015fkeni konsola yazd\u0131rma\nlet userName = \"Ali Veli\";\nconsole.log(\"Kullan\u0131c\u0131 ad\u0131:\", userName);\n\n\/\/ Bir hatay\u0131 sim\u00fcle etme\ntry {\n let result = undefinedVariable * 2; \/\/ undefinedVariable tan\u0131ml\u0131 de\u011fil\n} catch (error) {\n console.error(\"Bir hata olu\u015ftu:\", error.message);\n}<\/code><\/pre>\n<\/p><\/div>\nconsole.log<\/code> ile bilgi mesaj\u0131 ve console.error<\/code> ile bir hata mesaj\u0131n\u0131n konsolda nas\u0131l g\u00f6r\u00fcnece\u011fini g\u00f6stermektedir. Hata ay\u0131klama s\u00fcrecinde, bu t\u00fcr mesajlar kodunuzun ak\u0131\u015f\u0131n\u0131 ve de\u011fi\u015fkenlerin durumunu takip etmek i\u00e7in vazge\u00e7ilmezdir.<\/p>\nSources Paneli: Derinlemesine JavaScript Hata Ay\u0131klama<\/h4>\n
Network Paneli: A\u011f \u0130steklerini \u0130zleme ve Performans Analizi<\/h4>\n
Performans Optimizasyonu ve Kullan\u0131c\u0131 Deneyimi \u0130\u00e7in DevTools Kullan\u0131m\u0131<\/h3>\n
Performance Paneli: Sayfa Y\u00fckleme ve \u00c7al\u0131\u015fma Zaman\u0131 Analizi<\/h4>\n
Lighthouse Paneli: Otomatik Denetimler ve En \u0130yi Uygulamalar<\/h4>\n
Application Paneli: Depolama ve Servis \u00c7al\u0131\u015fanlar\u0131 Y\u00f6netimi<\/h4>\n
\u0130leri D\u00fczey DevTools \u00d6zellikleri ve Verimlilik \u0130pu\u00e7lar\u0131<\/h3>\n
Security Paneli: Web G\u00fcvenli\u011fini \u0130nceleme<\/h4>\n
Memory Paneli: Bellek S\u0131z\u0131nt\u0131lar\u0131n\u0131 Tespit Etme<\/h4>\n
Responsive Tasar\u0131m Modu: Farkl\u0131 Cihazlarda Test Etme<\/h4>\n
Workspaces: Taray\u0131c\u0131 \u00dczerinden Dosya D\u00fczenleme ve Kaydetme<\/h4>\n
Command Menu: H\u0131zl\u0131 Eri\u015fim ve Verimlilik<\/h4>\n
Ctrl+Shift+P<\/code> (Windows\/Linux) veya Cmd+Shift+P<\/code> (macOS) ile a\u00e7\u0131lan bu men\u00fcye “screenshot” yazarak ekran g\u00f6r\u00fcnt\u00fcs\u00fc alabilir, “dock” yazarak DevTools’un konumunu de\u011fi\u015ftirebilir veya “show coverage” yazarak kod kapsam\u0131 (code coverage) panelini a\u00e7abilirsiniz. Bu, fare kullan\u0131m\u0131n\u0131 azaltarak ve ihtiyac\u0131n\u0131z olan araca an\u0131nda ula\u015farak verimlili\u011finizi art\u0131r\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131nda DevTools: Vaka Analizleri<\/h3>\n
Vaka 1: Yava\u015f Y\u00fcklenen Bir E-ticaret Sitesinin Optimizasyonu<\/h4>\n
\n
\n
defer<\/code> veya async<\/code> nitelikleri kullan\u0131l\u0131r veya kritik olmayan betikler sayfan\u0131n alt k\u0131sm\u0131na ta\u015f\u0131n\u0131r.<\/li>\nVaka 2: JavaScript Hatalar\u0131n\u0131n Ay\u0131klanmas\u0131 ve Kullan\u0131c\u0131 Etkile\u015fim Sorunlar\u0131<\/h4>\n
\n
TypeError: Cannot read properties of undefined<\/code> mesaj\u0131 belirir. Hata mesaj\u0131, belirli bir JavaScript dosyas\u0131n\u0131n belirli bir sat\u0131r\u0131nda bir objenin tan\u0131mlanmam\u0131\u015f bir \u00f6zelli\u011fine eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir.<\/li>\nundefined<\/code> oldu\u011funu g\u00f6r\u00fcr. Hatan\u0131n nedeninin, form g\u00f6nderildi\u011finde bazen bir API yan\u0131t\u0131n\u0131n gecikmesi veya hatal\u0131 gelmesi nedeniyle beklenen verinin gelmemesi oldu\u011funu fark eder.<\/li>\nundefined<\/code> ise, kullan\u0131c\u0131ya dost\u00e7a bir hata mesaj\u0131 g\u00f6sterir veya i\u015flemi tekrar denemesi i\u00e7in bir se\u00e7enek sunar.<\/li>\nVaka 3: Mobil Uyumluluk Sorunlar\u0131n\u0131n Giderilmesi<\/h4>\n
\n
display: none;<\/code> olarak ayarland\u0131\u011f\u0131n\u0131 ve mobil g\u00f6r\u00fcn\u00fcmde bir “hamburger men\u00fc” ikonunun tetiklenmesiyle g\u00f6r\u00fcn\u00fcr hale gelmesi gereken JavaScript kodunun d\u00fczg\u00fcn \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 veya CSS’in \u00e7ak\u0131\u015ft\u0131\u011f\u0131n\u0131 fark eder. Yaz\u0131lar\u0131n ekran d\u0131\u015f\u0131na ta\u015fmas\u0131 sorununda ise, baz\u0131 img<\/code> etiketlerinin veya pre<\/code> bloklar\u0131n\u0131n max-width: 100%;<\/code> veya word-wrap: break-word;<\/code> gibi responsive stillere sahip olmad\u0131\u011f\u0131n\u0131 tespit eder.<\/li>\n\n
max-width: 100%; height: auto;<\/code> ve overflow-wrap: break-word;<\/code> gibi responsive stilleri ekler.<\/li>\n<\/ul>\n<\/li>\nSonu\u00e7<\/h3>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n