JavaScript Hatalar\u0131ndan Dersler: Kod K\u0131rma, Beceri Geli\u015ftirme<\/p>\n
Her geli\u015ftiricinin yolu, ka\u00e7\u0131n\u0131lmaz olarak JavaScript hatalar\u0131yla kesi\u015fir. Bu makalede, erken d\u00f6nem JavaScript deneyimlerimden yola \u00e7\u0131karak hatalar\u0131n korkulacak de\u011fil, aksine \u00f6\u011frenme s\u00fcrecimizin en de\u011ferli par\u00e7alar\u0131 oldu\u011funu ke\u015ffedece\u011fiz. Hata ay\u0131klama tekniklerinden modern yakla\u015f\u0131mlara kadar, kod k\u0131rma ser\u00fcveninizde edinece\u011finiz becerileri ad\u0131m ad\u0131m inceleyelim.<\/p>\n
Yaz\u0131l\u0131m geli\u015ftirme d\u00fcnyas\u0131nda, hata yapmak insan do\u011fas\u0131n\u0131n bir par\u00e7as\u0131d\u0131r. \u00d6zellikle esnek ve dinamik yap\u0131s\u0131yla \u00f6ne \u00e7\u0131kan JavaScript gibi bir dilde, kod yazarken hatalarla kar\u015f\u0131la\u015fmak neredeyse ka\u00e7\u0131n\u0131lmazd\u0131r. \u0130lk sat\u0131r kodumuzu yazd\u0131\u011f\u0131m\u0131z andan itibaren, beklenmedik \u00e7\u0131kt\u0131lar, \u00e7al\u0131\u015fmayan fonksiyonlar veya taray\u0131c\u0131 konsolunda k\u0131rm\u0131z\u0131 renkte beliren o \u00fcrk\u00fct\u00fcc\u00fc hata mesajlar\u0131yla y\u00fczle\u015firiz. Peki, bu hatalar ger\u00e7ekten birer engel midir, yoksa geli\u015fimimizin ve \u00f6\u011frenme s\u00fcrecimizin gizli kahramanlar\u0131 m\u0131?<\/p>\n
JavaScript, ba\u015flang\u0131\u00e7ta web sayfalar\u0131na dinamizm katmak amac\u0131yla geli\u015ftirilmi\u015f olsa da, g\u00fcn\u00fcm\u00fczde frontend\u2019den backend\u2019e (Node.js), mobil uygulamalardan (React Native) masa\u00fcst\u00fc yaz\u0131l\u0131mlara (Electron) kadar geni\u015f bir yelpazede kullan\u0131lmaktad\u0131r. Bu denli geni\u015f bir ekosistem ve s\u00fcrekli evrilen standartlar (ES6+), beraberinde karma\u015f\u0131kl\u0131k ve farkl\u0131 hata senaryolar\u0131 getirir. \u00d6rne\u011fin, taray\u0131c\u0131lar aras\u0131 uyumluluk sorunlar\u0131, asenkron i\u015flemlerin y\u00f6netimi veya \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin entegrasyonu gibi konular, tecr\u00fcbeli geli\u015ftiricilerin bile zaman zaman tak\u0131ld\u0131\u011f\u0131 noktalar olabilir. \u00d6zellikle yeni ba\u015flayanlar i\u00e7in bu durum, zaman zaman hayal k\u0131r\u0131kl\u0131\u011f\u0131 yaratabilir ve hatta motivasyon k\u0131r\u0131c\u0131 olabilir. Ancak, bu hatalar\u0131 sadece birer “sorun” olarak g\u00f6rmek yerine, “\u00f6\u011frenme f\u0131rsatlar\u0131” olarak ele almak, geli\u015fim yolculu\u011fumuzda b\u00fcy\u00fck bir fark yarat\u0131r.<\/p>\n
Deneyimlerimden biliyorum ki, en kal\u0131c\u0131 dersler genellikle en zorlu hatalar\u0131 ay\u0131klarken \u00f6\u011frenilir. Bir hatay\u0131 d\u00fczeltmek i\u00e7in harcad\u0131\u011f\u0131n\u0131z her dakika, dilin inceliklerini, \u00e7al\u0131\u015fma prensiplerini ve olas\u0131 tuzaklar\u0131n\u0131 daha derinlemesine anlaman\u0131za yard\u0131mc\u0131 olur. Hata ay\u0131klama s\u00fcreci, bir dedektifin ipu\u00e7lar\u0131n\u0131 takip etmesine benzer: kodun hangi b\u00f6l\u00fcm\u00fcn\u00fcn yanl\u0131\u015f \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, verinin hangi a\u015famada bozuldu\u011funu veya beklenen sonucun neden elde edilemedi\u011fini anlamaya \u00e7al\u0131\u015f\u0131rs\u0131n\u0131z. Bu s\u00fcre\u00e7te taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 (DevTools) kullanmay\u0131, Ayr\u0131ca, hatalar bizi daha iyi bir kod yazmaya te\u015fvik eder. Hata ay\u0131klama deneyimleri, kod kalitesinin, okunabilirli\u011fin ve s\u00fcrd\u00fcr\u00fclebilirli\u011fin \u00f6nemini vurgular. Karma\u015f\u0131k ve da\u011f\u0131n\u0131k kodda hata bulmak, d\u00fczenli ve mod\u00fcler bir yap\u0131ya sahip kodda hata bulmaktan \u00e7ok daha zordur. Bu nedenle, hata ay\u0131klama s\u00fcreci, ayn\u0131 zamanda clean code prensiplerini benimsememiz i\u00e7in de g\u00fc\u00e7l\u00fc bir motivasyon kayna\u011f\u0131d\u0131r. \u00d6zetle, JavaScript hatalar\u0131yla y\u00fczle\u015fmek, bir geli\u015ftiricinin olgunla\u015fma s\u00fcrecinin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Her bir hata, yeni bir bilgi kap\u0131s\u0131 aralar ve bizi daha yetkin, daha dikkatli ve daha stratejik bir kod yaz\u0131c\u0131s\u0131 haline getirir. Bu y\u00fczden, korkmay\u0131n hatalardan, aksine onlara birer rehber gibi yakla\u015f\u0131n.<\/p>\n JavaScript geli\u015ftirme yolculu\u011funuzda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z hatalar\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 belirli kategorilere ayr\u0131labilir. Bu kategorileri anlamak, hatay\u0131 daha h\u0131zl\u0131 te\u015fhis etmenize ve etkili \u00e7\u00f6z\u00fcmler \u00fcretmenize olanak tan\u0131r. Genellikle \u00fc\u00e7 ana hata t\u00fcr\u00fcyle kar\u015f\u0131la\u015f\u0131r\u0131z: S\u00f6zdizimi (Syntax) Hatalar\u0131, Referans (Reference) Hatalar\u0131 ve T\u00fcr (Type) Hatalar\u0131. Bu b\u00f6l\u00fcmde, bu yayg\u0131n hata t\u00fcrlerini, nedenlerini ve ad\u0131m ad\u0131m nas\u0131l ay\u0131klayaca\u011f\u0131n\u0131z\u0131 \u00f6rneklerle inceleyece\u011fiz. Her bir hata t\u00fcr\u00fc, dilin farkl\u0131 bir y\u00f6n\u00fcn\u00fc anlamam\u0131z\u0131 gerektirir ve bize \u00f6nemli dersler sunar. Unutmay\u0131n, konsoldaki k\u0131rm\u0131z\u0131 mesajlar birer d\u00fc\u015fman de\u011fil, kodunuzun size ne s\u00f6ylemeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6steren i\u015faretlerdir.<\/p>\n S\u00f6zdizimi hatalar\u0131, JavaScript motorunun kodunuzu anlamas\u0131n\u0131 engelleyen, dilin kurallar\u0131na uymayan hatalard\u0131r. Bunlar genellikle yanl\u0131\u015f yaz\u0131lm\u0131\u015f anahtar kelimeler, eksik parantezler, t\u0131rnaklar veya noktal\u0131 virg\u00fcller gibi basit yaz\u0131m hatalar\u0131ndan kaynaklan\u0131r. Taray\u0131c\u0131 konsolunda genellikle “Uncaught SyntaxError” \u015feklinde kar\u015f\u0131m\u0131za \u00e7\u0131kar ve genellikle kodun yorumlanmas\u0131n\u0131 durdurur. Bu t\u00fcr hatalar, genellikle JavaScript kodunuz hen\u00fcz \u00e7al\u0131\u015fmaya ba\u015flamadan, yani derleme veya yorumlama a\u015famas\u0131nda tespit edilir.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, <\/code><\/p>\n Hata mesaj\u0131, JavaScript motorunun '{' token'\u0131n\u0131 beklemedi\u011fini, \u00e7\u00fcnk\u00fc \u00f6ncesinde bir kapan\u0131\u015f parantezi olmas\u0131 gerekti\u011fini bize s\u00f6yler. Bu hatay\u0131 d\u00fczeltmek i\u00e7in fonksiyon tan\u0131m\u0131n\u0131 do\u011fru \u015fekilde yazmal\u0131y\u0131z:<\/p>\n <\/code><\/p>\n Bu t\u00fcr hatalar\u0131 tespit etmenin en kolay yolu, kod edit\u00f6rlerinin (VS Code gibi) sundu\u011fu s\u00f6zdizimi vurgulama ve hata denetimi \u00f6zelliklerini kullanmakt\u0131r. Genellikle yanl\u0131\u015f veya eksik yaz\u0131lan yerler k\u0131rm\u0131z\u0131 alt \u00e7izgiyle belirtilir. Ayr\u0131ca, taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki konsol da hatan\u0131n sat\u0131r numaras\u0131n\u0131 ve t\u00fcr\u00fcn\u00fc g\u00f6stererek size do\u011frudan i\u015faret eder. Bu, hata ay\u0131klama s\u00fcrecini h\u0131zland\u0131ran temel bir ad\u0131md\u0131r.<\/p>\n Projemin ilk ba\u015flar\u0131nda, karma\u015f\u0131k bir form validasyonu yazarken s\u00fcrekli \"Uncaught SyntaxError: Unexpected token '}'\" hatas\u0131 al\u0131yordum. Kodum yakla\u015f\u0131k 200 sat\u0131rdan olu\u015fuyordu ve i\u00e7 i\u00e7e bir\u00e7ok if-else yap\u0131s\u0131, d\u00f6ng\u00fc ve fonksiyon \u00e7a\u011fr\u0131s\u0131 bar\u0131nd\u0131r\u0131yordu. Hata mesaj\u0131, hatan\u0131n sonlara do\u011fru bir yerde oldu\u011funu belirtse de, g\u00f6zle taramakla bulmak \u00e7ok zordu. Saatlerimi harcam\u0131\u015ft\u0131m. Sonunda, kod edit\u00f6r\u00fcm\u00fcn (o zamanlar Sublime Text kullan\u0131yordum) parantez e\u015fle\u015ftirme \u00f6zelli\u011fini fark ettim. \u0130mleci bir parantezin \u00fczerine getirdi\u011fimde, e\u015fle\u015fen di\u011fer parantezin vurguland\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fcm. Bu y\u00f6ntemle, bir saat i\u00e7inde, birka\u00e7 if blo\u011funda kapan\u0131\u015f parantezlerinden birini fazladan yazd\u0131\u011f\u0131m\u0131 ve bu y\u00fczden yap\u0131sal bir bozulma oldu\u011funu tespit ettim. Bu deneyim, bana sadece hatay\u0131 d\u00fczeltmeyi de\u011fil, ayn\u0131 zamanda kod edit\u00f6r\u00fc \u00f6zelliklerini etkin kullanman\u0131n ve k\u00fc\u00e7\u00fck, y\u00f6netilebilir fonksiyonlar yazman\u0131n \u00f6nemini \u00f6\u011fretti.<\/p>\n Referans hatalar\u0131, JavaScript'in belirli bir de\u011fi\u015fkene veya fonksiyona eri\u015fmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131nda onu bulamad\u0131\u011f\u0131nda ortaya \u00e7\u0131kar. Konsolda \"Uncaught ReferenceError\" mesaj\u0131yla kar\u015f\u0131la\u015f\u0131r\u0131z. Bu genellikle bir de\u011fi\u015fkeni tan\u0131mlamadan \u00f6nce kullanmaya \u00e7al\u0131\u015fmaktan, yanl\u0131\u015f isimle \u00e7a\u011f\u0131rmaktan veya de\u011fi\u015fkenin tan\u0131mland\u0131\u011f\u0131 kapsam\u0131n (scope) d\u0131\u015f\u0131ndan eri\u015fmeye \u00e7al\u0131\u015fmaktan kaynaklan\u0131r.<\/p>\n <\/code><\/p>\n Bu kod blo\u011fu, <\/code><\/p>\n Bu hatay\u0131 d\u00fczeltmek i\u00e7in de\u011fi\u015fken tan\u0131m\u0131n\u0131n, kullan\u0131m\u0131ndan \u00f6nce gelmesi gerekti\u011fini sa\u011flamal\u0131y\u0131z:<\/p>\n <\/code><\/p>\n Referans hatalar\u0131, \u00f6zellikle <\/code><\/p>\n Bu \u00f6rnekte Bir e-ticaret sitesi \u00fczerinde \u00e7al\u0131\u015f\u0131rken, \u00fcr\u00fcn detay sayfas\u0131ndaki \"Sepete Ekle\" butonunun hi\u00e7bir tepki vermedi\u011fini fark ettim. Konsolu a\u00e7t\u0131\u011f\u0131mda yine bir \"ReferenceError: productId is not defined\" hatas\u0131 beni kar\u015f\u0131lad\u0131. Fonksiyonun i\u00e7inde T\u00fcr hatalar\u0131, bir de\u011ferin beklenmeyen bir t\u00fcrde olmas\u0131 ve bu nedenle \u00fczerinde belirli bir i\u015flemin ger\u00e7ekle\u015ftirilememesi durumunda ortaya \u00e7\u0131kar. Konsolda \"Uncaught TypeError\" olarak g\u00f6r\u00fcn\u00fcr. \u00d6rne\u011fin, say\u0131sal bir de\u011fer \u00fczerinde string metodunu \u00e7a\u011f\u0131rmaya \u00e7al\u0131\u015fmak veya null ya da undefined bir de\u011fi\u015fken \u00fczerinde bir \u00f6zellik veya metot eri\u015fmeye \u00e7al\u0131\u015fmak bu t\u00fcr hatalara yol a\u00e7ar. JavaScript'in dinamik tipli bir dil olmas\u0131, bu t\u00fcr hatalar\u0131n \u00e7al\u0131\u015fma zaman\u0131nda ortaya \u00e7\u0131kma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, <\/code><\/p>\n Bu hatay\u0131 \u00f6nlemek i\u00e7in, bir de\u011fi\u015fken \u00fczerinde i\u015flem yapmadan \u00f6nce tipini kontrol etmek iyi bir pratiktir. \u00d6rne\u011fin:<\/p>\n <\/code><\/p>\n Bir di\u011fer yayg\u0131n <\/code><\/p>\n Bu senaryoda, <\/code><\/p>\n Bu, \u00f6zellikle API'lerden gelen verilerle \u00e7al\u0131\u015f\u0131rken veya bir objenin belirli \u00f6zelliklerinin varl\u0131\u011f\u0131ndan emin olmad\u0131\u011f\u0131n\u0131z durumlarda \u00e7ok \u00f6nemlidir. Kodunuzu daha sa\u011flam hale getirir ve beklenmedik \u00e7\u00f6kmelerin \u00f6n\u00fcne ge\u00e7er.<\/p>\n Bir hesaplama uygulamas\u0131nda, kullan\u0131c\u0131dan ald\u0131\u011f\u0131 iki say\u0131y\u0131 toplay\u0131p sonucu g\u00f6steren bir fonksiyonum vard\u0131. Her \u015fey yolunda g\u00f6r\u00fcn\u00fcyordu, ancak kullan\u0131c\u0131 \"5\" ve \"3\" girdi\u011finde sonu\u00e7 \"53\" olarak \u00e7\u0131k\u0131yordu, \"8\" de\u011fil. Konsolu kontrol etti\u011fimde, hata mesaj\u0131 olmamas\u0131na ra\u011fmen beklenen sonucu alam\u0131yordum. Sorunun kayna\u011f\u0131, HTML formundan al\u0131nan input de\u011ferlerinin varsay\u0131lan olarak string tipinde gelmesiydi. Fonksiyonum, bu stringleri do\u011frudan toplad\u0131\u011f\u0131 i\u00e7in matematiksel toplama yerine string birle\u015ftirme yap\u0131yordu. \u00c7\u00f6z\u00fcm, input de\u011ferlerini Mant\u0131k hatalar\u0131, JavaScript geli\u015ftiricilerinin kar\u015f\u0131la\u015fabilece\u011fi en sinsi ve zorlu hatalard\u0131r. \u00c7\u00fcnk\u00fc bu t\u00fcr hatalarda kodunuz s\u00f6zdizimsel olarak do\u011frudur, referanslar yerindedir, veri tipleri uyumludur ve taray\u0131c\u0131 konsolunda k\u0131rm\u0131z\u0131 bir hata mesaj\u0131 g\u00f6rmezsiniz. Kodunuz sorunsuz bir \u015fekilde \u00e7al\u0131\u015f\u0131r, ancak bekledi\u011finiz \u00e7\u0131kt\u0131y\u0131 veya davran\u0131\u015f\u0131 \u00fcretmez. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepeti uygulamas\u0131nda toplam fiyat\u0131n yanl\u0131\u015f hesaplanmas\u0131, bir filtreleme fonksiyonunun beklenen \u00f6\u011feleri filtrelememesi veya bir animasyonun olmas\u0131 gerekenden farkl\u0131 \u00e7al\u0131\u015fmas\u0131 gibi durumlar mant\u0131k hatalar\u0131na \u00f6rnek te\u015fkil eder. Bu hatalar\u0131 tespit etmek, sadece kodu okumaktan daha fazlas\u0131n\u0131 gerektirir; kodun i\u015f ak\u0131\u015f\u0131n\u0131, veri ak\u0131\u015f\u0131n\u0131 ve algoritmik mant\u0131\u011f\u0131n\u0131 derinlemesine anlamay\u0131 gerektirir.<\/p>\n Mant\u0131k hatalar\u0131n\u0131 ay\u0131klaman\u0131n en temel ve yayg\u0131n yollar\u0131ndan biri, <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, <\/code><\/p>\n Bu detayl\u0131 Bir web uygulamas\u0131 i\u00e7in karma\u015f\u0131k bir filtreleme mod\u00fcl\u00fc geli\u015ftiriyordum. Kullan\u0131c\u0131lar birden fazla kritere g\u00f6re (kategori, fiyat aral\u0131\u011f\u0131, stok durumu vb.) \u00fcr\u00fcnleri listeleyebiliyordu. Kodum \u00e7al\u0131\u015f\u0131yor, hi\u00e7bir hata vermiyordu ama baz\u0131 kombinasyonlarda beklenen \u00fcr\u00fcnleri g\u00f6stermiyordu. \u00d6rne\u011fin, \"Elektronik\" kategorisindeki \u00fcr\u00fcnleri \"500-1000 TL\" fiyat aral\u0131\u011f\u0131nda arad\u0131\u011f\u0131mda, bazen 1200 TL'lik \u00fcr\u00fcnler de listeleniyordu. Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini kesintiye u\u011fratmamak i\u00e7in s\u0131kl\u0131kla asenkron i\u015flemlerden yararlan\u0131r. API \u00e7a\u011fr\u0131lar\u0131, dosya y\u00fcklemeleri, veritaban\u0131 sorgular\u0131 gibi uzun s\u00fcreli i\u015flemler, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmeden arka planda \u00e7al\u0131\u015f\u0131r. JavaScript'te bu t\u00fcr asenkron i\u015flemleri y\u00f6netmek i\u00e7in Callback'ler, Promise'ler ve Async\/Await gibi mekanizmalar kullan\u0131l\u0131r. Ancak, asenkron do\u011fa, hata y\u00f6netimini de daha karma\u015f\u0131k hale getirir. Normalde bir fonksiyon i\u00e7inde olu\u015fan hata hemen f\u0131rlat\u0131l\u0131p yakalanabilirken, asenkron bir i\u015flemde olu\u015fan hata, ana kod ak\u0131\u015f\u0131ndan farkl\u0131 bir zamanda ortaya \u00e7\u0131kt\u0131\u011f\u0131 i\u00e7in daha farkl\u0131 y\u00f6ntemlerle ele al\u0131nmal\u0131d\u0131r.<\/p>\n Callback'ler ile hata y\u00f6netimi, genellikle callback fonksiyonunun ilk arg\u00fcman\u0131n\u0131n bir <\/code><\/p>\n Promise'ler, callback hell sorununa bir \u00e7\u00f6z\u00fcm getirerek asenkron i\u015flemleri daha y\u00f6netilebilir hale getirmi\u015ftir. Promise tabanl\u0131 i\u015flemlerde hata y\u00f6netimi, <\/code><\/p>\n En modern ve okunabilir yakla\u015f\u0131m ise <\/code><\/p>\n Bu yakla\u015f\u0131m, asenkron hatalar\u0131 \u00e7ok daha sezgisel ve y\u00f6netilebilir hale getirir. T\u00fcm asenkron operasyonlar\u0131n\u0131z\u0131 bir Frontend uygulamamda, kullan\u0131c\u0131n\u0131n profil bilgilerini birden fazla API \u00e7a\u011fr\u0131s\u0131 ile al\u0131p g\u00f6steriyordum. \u00d6nce kullan\u0131c\u0131 ID'sini, sonra o ID ile kullan\u0131c\u0131 detaylar\u0131n\u0131, ard\u0131ndan kullan\u0131c\u0131n\u0131n sipari\u015f ge\u00e7mi\u015fini \u00e7ekiyordum. Bazen, uygulaman\u0131n aniden \u00e7\u00f6kmesiyle kar\u015f\u0131la\u015f\u0131yordum, ancak konsolda net bir hata mesaj\u0131 g\u00f6remiyordum. Hata, genellikle \u00fc\u00e7\u00fcnc\u00fc API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z oldu\u011funda veya sunucudan beklenen veri format\u0131ndan farkl\u0131 bir yan\u0131t geldi\u011finde ortaya \u00e7\u0131k\u0131yordu. Sorunun, Promise zincirinde, \u00f6zellikle son Sadece hatalar\u0131 tespit edip d\u00fczeltmekle kalmay\u0131p, ayn\u0131 zamanda onlar\u0131 ba\u015ftan \u00f6nlemek ve daha verimli bir hata ay\u0131klama s\u00fcreci olu\u015fturmak i\u00e7in ileri seviye tekniklere ve profesyonel yakla\u015f\u0131mlara ihtiyac\u0131m\u0131z vard\u0131r. Bu b\u00f6l\u00fcmde, geli\u015ftirme s\u00fcrecimizi h\u0131zland\u0131racak ve kod kalitemizi art\u0131racak baz\u0131 \u00f6nemli ara\u00e7lar\u0131 ve metodolojileri inceleyece\u011fiz. Daha \u00f6nce bahsetti\u011fimiz temel debugging tekniklerini bir ad\u0131m \u00f6teye ta\u015f\u0131yarak, daha sa\u011flam ve s\u00fcrd\u00fcr\u00fclebilir uygulamalar geli\u015ftirmeyi hedefliyoruz.<\/p>\n Taray\u0131c\u0131 Geli\u015ftirici Ara\u00e7lar\u0131 (Chrome DevTools, Firefox Developer Tools):<\/strong> Daha \u00f6nce k\u0131saca bahsetti\u011fimiz bu ara\u00e7lar, sadece Source Maps:<\/strong> \u00d6zellikle \u00fcretim ortam\u0131nda (production environment) kodunuzu s\u0131k\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda (minification) veya Babel gibi ara\u00e7larla derledi\u011finizde, hata mesajlar\u0131 genellikle orijinal kodunuzdaki sat\u0131r numaralar\u0131na kar\u015f\u0131l\u0131k gelmez. Source map'ler, bu s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f veya derlenmi\u015f kodu orijinal kaynak kodunuza geri e\u015fle\u015ftirerek, \u00fcretim ortam\u0131ndaki hatalar\u0131 bile kendi kodunuzda do\u011fru sat\u0131rda g\u00f6rmenizi sa\u011flar. Bu, hata ay\u0131klama s\u00fcrecini inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131r ve gereksiz zaman kayb\u0131n\u0131 \u00f6nler. \u00c7o\u011fu modern build arac\u0131 (Webpack, Rollup, Vite) source map \u00fcretimini otomatik olarak destekler.<\/p>\nconsole.log<\/code> ile de\u011ferleri izlemeyi, ad\u0131m ad\u0131m kod y\u00fcr\u00fctmeyi (breakpoints) \u00f6\u011frenirsiniz. Bu beceriler, sadece mevcut hatay\u0131 d\u00fczeltmenizi sa\u011flamaz, ayn\u0131 zamanda gelecekte benzer hatalar\u0131 daha h\u0131zl\u0131 tespit etmenizi ve hatta ba\u015ftan \u00f6nlemenizi sa\u011flar.<\/p>\nEn S\u0131k Kar\u015f\u0131la\u015f\u0131lan JavaScript Hatalar\u0131 Nelerdir ve Nas\u0131l Ay\u0131klan\u0131r?<\/H2><\/p>\n
S\u00f6zdizimi Hatalar\u0131n\u0131 (Syntax Errors) Anlamak ve D\u00fczeltmek Nas\u0131l Yap\u0131l\u0131r?<\/H3><\/p>\n
\nfunction selamVer(isim { \/\/ Eksik parantez\n console.log(\"Merhaba, \" + isim + \"!\");\n}\nselamVer(\"Ahmet\");\n<\/pre>\nfunction selamVer(isim {<\/code> sat\u0131r\u0131nda a\u00e7\u0131l\u0131\u015f parantezi olmas\u0131na ra\u011fmen kapan\u0131\u015f parantezi eksiktir. Bu durumda taray\u0131c\u0131 konsolunda muhtemelen \u015f\u00f6yle bir hata g\u00f6r\u00fcr\u00fcz:<\/p>\n\nUncaught SyntaxError: Unexpected token '{'\n<\/pre>\n\nfunction selamVer(isim) { \/\/ Do\u011fru parantez kullan\u0131m\u0131\n console.log(\"Merhaba, \" + isim + \"!\");\n}\nselamVer(\"Ahmet\"); \/\/ \u00c7\u0131kt\u0131: Merhaba, Ahmet!\n<\/pre>\nVaka Analizi: Yanl\u0131\u015f Kapat\u0131lan Parantez Maceras\u0131<\/H4><\/p>\n
Referans Hatalar\u0131 (Reference Errors) ve De\u011fi\u015fken Tan\u0131mlama Pratikleri Nelerdir?<\/H3><\/p>\n
\nconsole.log(benimDegiskenim); \/\/ Tan\u0131mlanmam\u0131\u015f de\u011fi\u015fken\nconst benimDegiskenim = \"Merhaba D\u00fcnya\";\n<\/pre>\nbenimDegiskenim<\/code> de\u011fi\u015fkenini tan\u0131mlanmadan \u00f6nce kullanmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in bir referans hatas\u0131na neden olacakt\u0131r. Konsol \u00e7\u0131kt\u0131s\u0131 muhtemelen \u015f\u00f6yle olur:<\/p>\n\nUncaught ReferenceError: benimDegiskenim is not defined\n<\/pre>\n\nconst benimDegiskenim = \"Merhaba D\u00fcnya\";\nconsole.log(benimDegiskenim); \/\/ \u00c7\u0131kt\u0131: Merhaba D\u00fcnya\n<\/pre>\nvar<\/code>, let<\/code> ve const<\/code> aras\u0131ndaki farklar\u0131 tam olarak anlamad\u0131\u011f\u0131n\u0131zda s\u0131k\u00e7a kar\u015f\u0131n\u0131za \u00e7\u0131kabilir. var<\/code> fonksiyon kapsam\u0131nda (function scope) hoisting yaparken, let<\/code> ve const<\/code> blok kapsam\u0131nda (block scope) tan\u0131mlan\u0131r ve temporal dead zone (ge\u00e7ici \u00f6l\u00fc b\u00f6lge) nedeniyle tan\u0131mlanmadan \u00f6nce eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hata verirler.<\/p>\n\nfunction ornekScope() {\n if (true) {\n let mesaj = \"Merhaba!\";\n }\n \/\/ console.log(mesaj); \/\/ Buras\u0131 ReferenceError verir \u00e7\u00fcnk\u00fc 'mesaj' if blo\u011funun d\u0131\u015f\u0131nda tan\u0131ml\u0131 de\u011fil\n}\nornekScope();\n<\/pre>\nmesaj<\/code> de\u011fi\u015fkeni if<\/code> blo\u011fu i\u00e7inde let<\/code> ile tan\u0131mland\u0131\u011f\u0131 i\u00e7in, blo\u011fun d\u0131\u015f\u0131ndan eri\u015filmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda ReferenceError<\/code> f\u0131rlat\u0131l\u0131r. Bu t\u00fcr hatalar\u0131 \u00f6nlemek i\u00e7in de\u011fi\u015fkenlerinizi her zaman kullanaca\u011f\u0131n\u0131z en dar kapsamda tan\u0131mlamaya \u00f6zen g\u00f6stermelisiniz.<\/p>\nVaka Analizi: Tan\u0131mlanmam\u0131\u015f De\u011fi\u015fkenin Yol A\u00e7t\u0131\u011f\u0131 Kaos<\/H4><\/p>\n
const productId = getProductIdFromDOM();<\/code> \u015feklinde bir sat\u0131r vard\u0131 ve fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 yerde bu de\u011fi\u015fkenin tan\u0131ml\u0131 olmas\u0131 gerekiyordu. Ancak, sayfay\u0131 yeniledi\u011fimde veya ba\u015fka bir \u00fcr\u00fcne ge\u00e7ti\u011fimde bazen \u00e7al\u0131\u015f\u0131yor, bazen \u00e7al\u0131\u015fm\u0131yordu. Sorun, getProductIdFromDOM()<\/code> fonksiyonunun, bazen DOM eleman\u0131 hen\u00fcz y\u00fcklenmeden \u00f6nce \u00e7a\u011fr\u0131labilmesiydi, bu da productId<\/code>'nin undefined<\/code> olmas\u0131na yol a\u00e7\u0131yordu. Fonksiyonun do\u011fru zamanda \u00e7al\u0131\u015fmas\u0131n\u0131 garanti etmek i\u00e7in, DOMContentLoaded olay\u0131n\u0131 dinleyen bir listener ekledim ve productId<\/code>'nin ancak sayfa tamamen y\u00fcklendikten sonra al\u0131nmas\u0131n\u0131 sa\u011flad\u0131m. Bu, asenkron i\u015flemlerin ve DOM manip\u00fclasyonunun zamanlamas\u0131n\u0131n ne kadar kritik oldu\u011funu g\u00f6steren iyi bir \u00f6rnekti.<\/p>\nT\u00fcr Hatalar\u0131 (Type Errors) ile Veri Tiplerine Hakim Olmak Neden \u00d6nemlidir?<\/H3><\/p>\n
\nlet sayi = 123;\n\/\/ sayi.toUpperCase(); \/\/ Bu sat\u0131r TypeError f\u0131rlat\u0131r\n<\/pre>\nsayi<\/code> de\u011fi\u015fkeni bir say\u0131 oldu\u011fu i\u00e7in \u00fczerinde bir string metodu olan toUpperCase()<\/code> \u00e7a\u011fr\u0131lamaz. Konsol \u00e7\u0131kt\u0131s\u0131 \u015f\u00f6yle olacakt\u0131r:<\/p>\n\nUncaught TypeError: sayi.toUpperCase is not a function\n<\/pre>\n\nlet metin = \"merhaba d\u00fcnya\";\nif (typeof metin === 'string') {\n console.log(metin.toUpperCase()); \/\/ \u00c7\u0131kt\u0131: MERHABA D\u00dcNYA\n} else {\n console.log(\"De\u011fi\u015fken bir string de\u011fil!\");\n}\n<\/pre>\nTypeError<\/code> durumu, null<\/code> veya undefined<\/code> de\u011ferler \u00fczerinde \u00f6zelliklere eri\u015fmeye \u00e7al\u0131\u015fmakt\u0131r:<\/p>\n\nlet kullanici = null;\n\/\/ console.log(kullanici.ad); \/\/ Bu sat\u0131r TypeError f\u0131rlat\u0131r\n<\/pre>\nkullanici<\/code> de\u011fi\u015fkeni null<\/code> oldu\u011fu i\u00e7in ad<\/code> \u00f6zelli\u011fine eri\u015fmeye \u00e7al\u0131\u015fmak bir TypeError<\/code>'a neden olur. Modern JavaScript'te bu t\u00fcr durumlar\u0131 ele almak i\u00e7in opsiyonel zincirleme (Optional Chaining) operat\u00f6r\u00fc ?.<\/code> olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r:<\/p>\n\nlet kullanici = null;\nconsole.log(kullanici?.ad); \/\/ \u00c7\u0131kt\u0131: undefined (hata vermez)\n\nlet urun = { isim: \"Laptop\", fiyat: 2500 };\nconsole.log(urun?.detaylar?.renk); \/\/ \u00c7\u0131kt\u0131: undefined (hata vermez)\n<\/pre>\nVaka Analizi: Say\u0131 Yerine String Alan Fonksiyon<\/H4><\/p>\n
parseInt()<\/code> veya parseFloat()<\/code> fonksiyonlar\u0131 ile say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmekti. Bu k\u00fc\u00e7\u00fck ama kritik ayr\u0131nt\u0131, veri tiplerinin ve \u00f6rt\u00fck tip d\u00f6n\u00fc\u015f\u00fcmlerinin JavaScript'teki davran\u0131\u015f\u0131n\u0131 bana uygulamal\u0131 olarak \u00f6\u011fretti ve her zaman input verilerini do\u011frulamam gerekti\u011fi dersini verdi.<\/p>\nMant\u0131k Hatalar\u0131 (Logic Errors) Nas\u0131l Tespit Edilir ve \u00d6nlenir?<\/H2><\/p>\n
console.log()<\/code> metodunu stratejik noktalara yerle\u015ftirerek de\u011fi\u015fkenlerin de\u011ferlerini, fonksiyonlar\u0131n \u00e7a\u011fr\u0131lma s\u0131ras\u0131n\u0131 veya d\u00f6ng\u00fclerin her iterasyondaki durumunu izlemektir. \u00d6rne\u011fin, bir d\u00f6ng\u00fc i\u00e7inde yanl\u0131\u015f bir ko\u015ful nedeniyle sonsuz d\u00f6ng\u00fcye giren veya hi\u00e7 \u00e7al\u0131\u015fmayan bir blok tespit etmek i\u00e7in her iterasyonda bir saya\u00e7 veya anahtar de\u011fi\u015fkenin de\u011ferini yazd\u0131rmak \u00e7ok faydal\u0131d\u0131r.<\/p>\n\nfunction kdvHesapla(fiyat, kdvOrani) {\n \/\/ Ama\u00e7: Fiyata KDV eklemek. Hata: KDV oran\u0131n\u0131 direkt ekliyor, y\u00fczde olarak de\u011fil.\n let toplam = fiyat + kdvOrani; \n return toplam;\n}\n\nlet urunFiyati = 100;\nlet mevcutKdvOrani = 0.18; \/\/ %18 KDV\nlet sonFiyat = kdvHesapla(urunFiyati, mevcutKdvOrani);\nconsole.log(\"Son Fiyat:\", sonFiyat); \/\/ \u00c7\u0131kt\u0131: 100.18 (yanl\u0131\u015f, 118 olmal\u0131yd\u0131)\n<\/pre>\nkdvHesapla<\/code> fonksiyonu mant\u0131k hatas\u0131 i\u00e7eriyor. KDV oran\u0131n\u0131 y\u00fczde olarak uygulamak yerine do\u011frudan fiyata ekliyor. Bu hatay\u0131 tespit etmek i\u00e7in, hesaplama yap\u0131lan yerlere console.log<\/code> ekleyebiliriz:<\/p>\n\nfunction kdvHesapla(fiyat, kdvOrani) {\n console.log(\"Ba\u015flang\u0131\u00e7 Fiyat\u0131:\", fiyat);\n console.log(\"KDV Oran\u0131:\", kdvOrani);\n let kdvMiktari = fiyat * kdvOrani; \/\/ Do\u011fru hesaplama\n console.log(\"Hesaplanan KDV Miktar\u0131:\", kdvMiktari);\n let toplam = fiyat + kdvMiktari; \n console.log(\"Toplam Fiyat:\", toplam);\n return toplam;\n}\n\nlet urunFiyati = 100;\nlet mevcutKdvOrani = 0.18; \nlet sonFiyat = kdvHesapla(urunFiyati, mevcutKdvOrani);\nconsole.log(\"Nihai Sonu\u00e7:\", sonFiyat); \/\/ \u00c7\u0131kt\u0131: Nihai Sonu\u00e7: 118\n<\/pre>\nconsole.log<\/code> kullan\u0131m\u0131yla, hesaplama ad\u0131mlar\u0131n\u0131 g\u00f6rselle\u015ftirerek hatan\u0131n nerede oldu\u011funu kolayca g\u00f6rebilir ve d\u00fczeltebiliriz. Ancak, console.log<\/code>'un da bir s\u0131n\u0131r\u0131 vard\u0131r. \u00d6zellikle karma\u015f\u0131k senaryolarda, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131n (Chrome DevTools, Firefox Developer Tools) sundu\u011fu breakpoints (kesme noktalar\u0131) \u00e7ok daha g\u00fc\u00e7l\u00fc bir y\u00f6ntemdir. Bir kesme noktas\u0131 belirledi\u011finizde, kod y\u00fcr\u00fctmesi o noktada durur ve o anki t\u00fcm de\u011fi\u015fkenlerin de\u011ferlerini, \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131n\u0131 (call stack) ve kapsam\u0131 (scope) inceleyebilirsiniz. Kodunuzu ad\u0131m ad\u0131m ilerleterek (step over, step into, step out) her bir ifadenin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve de\u011ferlerin nas\u0131l de\u011fi\u015fti\u011fini g\u00f6zlemleyebilirsiniz. Bu, mant\u0131k hatalar\u0131n\u0131 k\u00f6k\u00fcnden anlamak ve \u00e7\u00f6zmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r.<\/p>\nconsole.log<\/code>'larla takip edin. Bu \"divide and conquer\" (b\u00f6l ve y\u00f6net) yakla\u015f\u0131m\u0131, sorunu daraltman\u0131za ve \u00e7\u00f6z\u00fcm bulman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/div>\nVaka Analizi: Yanl\u0131\u015f Filtreleme Algoritmas\u0131<\/H4><\/p>\n
console.log<\/code> ile veri ak\u0131\u015f\u0131n\u0131 takip ettim ama yeterince detayl\u0131 bilgi alamad\u0131m. Sonra, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131nda fonksiyonun ba\u015flang\u0131c\u0131na bir breakpoint koydum ve filtreleme i\u015flemi ad\u0131mlar\u0131nda nas\u0131l ilerledi\u011fini g\u00f6zlemledim. Fark ettim ki, filtreleme ko\u015fullar\u0131n\u0131 birle\u015ftiren mant\u0131k operasyonunda (&&<\/code> yerine ||<\/code> kullanm\u0131\u015f\u0131m veya parantezlerle grupland\u0131rmam yanl\u0131\u015fm\u0131\u015f), baz\u0131 ko\u015fullar\u0131n di\u011ferlerini ezmesine neden oluyordum. \u00d6rne\u011fin, \"kategori OR fiyat aral\u0131\u011f\u0131\" yerine \"kategori AND fiyat aral\u0131\u011f\u0131\" olmas\u0131 gerekiyordu. Bu k\u00fc\u00e7\u00fck mant\u0131k hatas\u0131, t\u00fcm filtreleme i\u015flemini bozmu\u015ftu. Breakpointler sayesinde, kodun her ad\u0131m\u0131nda de\u011fi\u015fken de\u011ferlerini ve ko\u015ful ifadelerinin sonu\u00e7lar\u0131n\u0131 g\u00f6rerek hatay\u0131 net bir \u015fekilde tespit edebildim ve d\u00fczelttim.<\/p>\nAsenkron JavaScript Hatalar\u0131n\u0131 Y\u00f6netme ve Modern Yakla\u015f\u0131mlar Nelerdir?<\/H2><\/p>\n
Error<\/code> objesi olmas\u0131 \u015feklindedir (Node.js stilinde). E\u011fer hata yoksa bu arg\u00fcman null<\/code> veya undefined<\/code> olur. Ancak, i\u00e7 i\u00e7e ge\u00e7mi\u015f callback'lerde (\"callback hell\") hata y\u00f6netimi zorla\u015fabilir ve kodun okunabilirli\u011fini d\u00fc\u015f\u00fcrebilir.<\/p>\n\n\/\/ Callback tabanl\u0131 asenkron fonksiyon\nfunction veriGetir(url, callback) {\n setTimeout(() => {\n if (url === \"hata-url\") {\n callback(new Error(\"Veri getirilemedi: Hatal\u0131 URL!\"));\n } else {\n callback(null, { id: 1, ad: \"\u00d6rnek Veri\" });\n }\n }, 1000);\n}\n\nveriGetir(\"hata-url\", (hata, veri) => {\n if (hata) {\n console.error(\"Callback hatas\u0131:\", hata.message); \/\/ Hata yakaland\u0131\n return;\n }\n console.log(\"Veri geldi:\", veri);\n});\n\nveriGetir(\"basarili-url\", (hata, veri) => {\n if (hata) {\n console.error(\"Callback hatas\u0131:\", hata.message);\n return;\n }\n console.log(\"Veri geldi:\", veri); \/\/ \u00c7\u0131kt\u0131: Veri geldi: { id: 1, ad: '\u00d6rnek Veri' }\n});\n<\/pre>\n.catch()<\/code> metodu ile yap\u0131l\u0131r. Bir Promise zincirinde herhangi bir ad\u0131mda bir hata olu\u015ftu\u011funda, bu hata zincirdeki ilk .catch()<\/code> blo\u011fu taraf\u0131ndan yakalan\u0131r.<\/p>\n\n\/\/ Promise tabanl\u0131 asenkron fonksiyon\nfunction veriGetirPromise(url) {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n if (url === \"hata-url\") {\n reject(new Error(\"Promise hatas\u0131: Hatal\u0131 URL!\"));\n } else {\n resolve({ id: 2, ad: \"Promise Veri\" });\n }\n }, 1000);\n });\n}\n\nveriGetirPromise(\"hata-url\")\n .then(veri => console.log(\"Veri geldi:\", veri))\n .catch(hata => console.error(\"Promise yakalama:\", hata.message)); \/\/ Hata yakaland\u0131\n\nveriGetirPromise(\"basarili-url\")\n .then(veri => console.log(\"Veri geldi:\", veri)) \/\/ \u00c7\u0131kt\u0131: Veri geldi: { id: 2, ad: 'Promise Veri' }\n .catch(hata => console.error(\"Promise yakalama:\", hata.message));\n<\/pre>\nasync\/await<\/code> s\u00f6zdizimidir. Bu, Promise'ler \u00fczerine in\u015fa edilmi\u015f sentaktik bir \u015fekerdir ve asenkron kodu senkron kod gibi yazman\u0131za olanak tan\u0131r. Hata y\u00f6netimi i\u00e7in ise senkron kodda oldu\u011fu gibi try...catch<\/code> bloklar\u0131 kullan\u0131labilir.<\/p>\n\n\/\/ Async\/Await ile asenkron fonksiyon\nasync function veriIsle() {\n try {\n const veri1 = await veriGetirPromise(\"basarili-url\");\n console.log(\"\u0130lk veri:\", veri1);\n\n const veri2 = await veriGetirPromise(\"hata-url\"); \/\/ Burada hata f\u0131rlat\u0131lacak\n console.log(\"\u0130kinci veri:\", veri2); \/\/ Bu sat\u0131r \u00e7al\u0131\u015fmayacak\n\n } catch (hata) {\n console.error(\"Async\/Await yakalama:\", hata.message); \/\/ Hata burada yakaland\u0131\n }\n}\n\nveriIsle(); \/\/ \u00c7\u0131kt\u0131: \u0130lk veri: { id: 2, ad: 'Promise Veri' }, Async\/Await yakalama: Promise hatas\u0131: Hatal\u0131 URL!\n<\/pre>\ntry...catch<\/code> blo\u011fu i\u00e7ine alarak, olu\u015fan herhangi bir Promise red (reject) durumunu veya di\u011fer \u00e7al\u0131\u015fma zaman\u0131 hatalar\u0131n\u0131 kolayca yakalayabilirsiniz. Bu, \u00f6zellikle karma\u015f\u0131k veri ak\u0131\u015flar\u0131nda ve bir\u00e7ok API \u00e7a\u011fr\u0131s\u0131 i\u00e7eren uygulamalarda kodun sa\u011flaml\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\nasync<\/code> fonksiyonlar\u0131n\u0131z\u0131n sonunda bir .catch()<\/code> veya try...catch<\/code> blo\u011fu bulundurdu\u011funuzdan emin olun. Yakalanmayan Promise red'leri, uygulaman\u0131z\u0131n beklenmedik \u015fekillerde \u00e7\u00f6kmesine veya hatalar\u0131n sessizce yok olmas\u0131na neden olabilir, bu da hata ay\u0131klamay\u0131 daha zor hale getirir.<\/div>\nVaka Analizi: API \u00c7a\u011fr\u0131s\u0131ndaki Gecikmeli Hata<\/H4><\/p>\n
.then()<\/code> blo\u011funda yeterli hata kontrol\u00fc olmamas\u0131ndan kaynakland\u0131\u011f\u0131n\u0131 anlad\u0131m. Hata zincirde daha erken bir a\u015famada meydana gelse bile, son .then()<\/code> blo\u011fu yakalamak yerine uygulaman\u0131n \u00e7\u00f6kmesine neden oluyordu. \u00c7\u00f6z\u00fcm olarak, her bir await<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 kendi try...catch<\/code> blo\u011funa ald\u0131m veya t\u00fcm zinciri kapsayan b\u00fcy\u00fck bir try...catch<\/code> blo\u011fu kulland\u0131m. Bu sayede, herhangi bir API \u00e7a\u011fr\u0131s\u0131n\u0131n ba\u015far\u0131s\u0131z olmas\u0131 durumunda kullan\u0131c\u0131ya anlaml\u0131 bir hata mesaj\u0131 g\u00f6sterebildim ve uygulaman\u0131n \u00e7\u00f6kmesini engelledim. Bu deneyim, asenkron i\u015flemlerin her ad\u0131m\u0131nda hata y\u00f6netiminin ne kadar kritik oldu\u011funu ve \"fail fast\" (h\u0131zl\u0131 hata ver) prensibinin \u00f6nemini bir kez daha hat\u0131rlatt\u0131.<\/p>\n\u0130leri Seviye Hata Ay\u0131klama Teknikleri ve Profesyonel Yakla\u015f\u0131mlar<\/H2><\/p>\n
console.log<\/code> ve breakpoints'tan ibaret de\u011fildir. \"Sources\" panelinde sadece kodunuzu ad\u0131m ad\u0131m incelemekle kalmaz, ayn\u0131 zamanda call stack'i, farkl\u0131 scopelardaki de\u011fi\u015fken de\u011ferlerini, DOM elemanlar\u0131n\u0131n \u00f6zelliklerini ve hatta a\u011f isteklerini (Network tab) detayl\u0131 bir \u015fekilde g\u00f6zlemleyebilirsiniz. Ayr\u0131ca, \"Memory\" ve \"Performance\" panelleri ile uygulaman\u0131z\u0131n bellek kullan\u0131m\u0131n\u0131 ve performans darbo\u011fazlar\u0131n\u0131 tespit edebilirsiniz. \u00d6zellikle zorlu bellek s\u0131z\u0131nt\u0131lar\u0131 veya performans sorunlar\u0131, bu geli\u015fmi\u015f ara\u00e7larla \u00e7ok daha kolay bir \u015fekilde ay\u0131klanabilir. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n yava\u015f y\u00fcklenmesinin nedeninin b\u00fcy\u00fck bir JavaScript dosyas\u0131 m\u0131, yoksa optimize edilmemi\u015f bir DOM manip\u00fclasyonu mu oldu\u011funu \"Network\" ve \"Performance\" sekmelerinden rahatl\u0131kla anlayabiliriz.<\/p>\n\n\n\n\n \n \n