Web geli\u015ftirme d\u00fcnyas\u0131nda, yazd\u0131\u011f\u0131m\u0131z kodun taray\u0131c\u0131da nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak, hatalar\u0131 ay\u0131klamak ve performans\u0131 optimize etmek kritik \u00f6neme sahiptir. \u0130\u015fte tam bu noktada, modern web taray\u0131c\u0131lar\u0131n\u0131n sundu\u011fu en g\u00fc\u00e7l\u00fc ara\u00e7lardan biri olan JavaScript Geli\u015ftirici Konsolu devreye girer. Geli\u015ftirici Konsolu, bir web sayfas\u0131n\u0131n arka plan\u0131nda neler olup bitti\u011fini g\u00f6rmemizi sa\u011flayan, etkile\u015fimli bir komut sat\u0131r\u0131 aray\u00fcz\u00fcd\u00fcr. Sadece JavaScript kodunu \u00e7al\u0131\u015ft\u0131rmakla kalmaz, ayn\u0131 zamanda a\u011f isteklerini izlemek, DOM yap\u0131s\u0131n\u0131 incelemek, CSS stillerini de\u011fi\u015ftirmek ve performans metriklerini analiz etmek gibi bir\u00e7ok farkl\u0131 g\u00f6revi de yerine getirir.<\/p>\n
Bir geli\u015ftirici konsolu, temelde bir web sayfas\u0131n\u0131n \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131na a\u00e7\u0131lan bir penceredir. Bu pencere arac\u0131l\u0131\u011f\u0131yla, sayfan\u0131n JavaScript kodunu an\u0131nda \u00e7al\u0131\u015ft\u0131rabilir, de\u011fi\u015fkenlerin de\u011ferlerini kontrol edebilir, fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131 izleyebilir ve olas\u0131 hatalar\u0131 tespit edebiliriz. Bu, \u00f6zellikle karma\u015f\u0131k web uygulamalar\u0131 geli\u015ftirirken veya mevcut bir uygulaman\u0131n sorunlar\u0131n\u0131 giderirken paha bi\u00e7ilmez bir kaynakt\u0131r. Konsol sayesinde, kodumuzu her k\u00fc\u00e7\u00fck de\u011fi\u015fiklik i\u00e7in yeniden y\u00fcklemek zorunda kalmadan, canl\u0131 olarak test edebilir ve d\u00fczeltebiliriz. Bu, geli\u015ftirme s\u00fcrecini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r ve verimlili\u011fi art\u0131r\u0131r.<\/p>\n
Geli\u015ftirici Konsoluna eri\u015fim, kulland\u0131\u011f\u0131n\u0131z taray\u0131c\u0131ya ba\u011fl\u0131 olarak k\u00fc\u00e7\u00fck farkl\u0131l\u0131klar g\u00f6sterse de, temel y\u00f6ntemler olduk\u00e7a benzerdir. \u0130\u015fte en yayg\u0131n taray\u0131c\u0131larda konsolu a\u00e7ma yollar\u0131:<\/p>\n
* Google Chrome, Mozilla Firefox, Microsoft Edge:<\/strong> Hemen hemen t\u00fcm taray\u0131c\u0131larda, sayfa \u00fczerinde sa\u011f t\u0131klay\u0131p “\u0130ncele” (Inspect) veya “\u00d6\u011feyi \u0130ncele” (Inspect Element) se\u00e7ene\u011fini se\u00e7erek Geli\u015ftirici Ara\u00e7lar\u0131’n\u0131 a\u00e7abilirsiniz. Bu genellikle do\u011frudan “Elements” paneline odaklansa da, “Console” sekmesine ge\u00e7i\u015f yapmak kolayd\u0131r.<\/p>\n Geli\u015ftirici Konsolu, genellikle taray\u0131c\u0131 penceresinin alt veya yan taraf\u0131nda a\u00e7\u0131lan ayr\u0131 bir paneldir. Aray\u00fcz\u00fc, komut sat\u0131r\u0131, \u00e7\u0131kt\u0131 alan\u0131, filtreleme se\u00e7enekleri ve ayarlar gibi temel bile\u015fenlerden olu\u015fur.<\/p>\n * Komut Sat\u0131r\u0131:<\/strong> Konsolun alt k\u0131sm\u0131nda yer alan bu b\u00f6l\u00fcm, JavaScript kodunu do\u011frudan yaz\u0131p \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Enter tu\u015funa bast\u0131\u011f\u0131n\u0131zda kodunuz y\u00fcr\u00fct\u00fcl\u00fcr ve sonu\u00e7 \u00e7\u0131kt\u0131 alan\u0131nda g\u00f6sterilir. Geli\u015ftirici Konsolu, Geli\u015ftirici Ara\u00e7lar\u0131’n\u0131n sadece bir par\u00e7as\u0131d\u0131r. Di\u011fer \u00f6nemli paneller \u015funlard\u0131r: Konsol paneli, bu di\u011fer panellerle s\u0131k\u0131 bir entegrasyon i\u00e7indedir. \u00d6rne\u011fin, “Elements” panelinde se\u00e7ti\u011finiz bir DOM \u00f6\u011fesine konsoldan Geli\u015ftirici Konsolu, \u00e7e\u015fitli Bu, konsolun en s\u0131k kullan\u0131lan ve en temel metodudur. JavaScript’teki herhangi bir de\u011feri (string, number, boolean, object, array, function vb.) konsola yazd\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n Belirli bir durumun potansiyel bir sorun olabilece\u011fini ancak kodun \u00e7al\u0131\u015fmas\u0131n\u0131 engellemedi\u011fini belirtmek i\u00e7in kullan\u0131l\u0131r. Taray\u0131c\u0131ya ba\u011fl\u0131 olarak genellikle sar\u0131 bir arka plan veya uyar\u0131 simgesiyle g\u00f6sterilir.<\/p>\n Kritik bir hata olu\u015ftu\u011funu ve kodun beklenen \u015fekilde \u00e7al\u0131\u015fmad\u0131\u011f\u0131n\u0131 belirtmek i\u00e7in kullan\u0131l\u0131r. Genellikle k\u0131rm\u0131z\u0131 bir arka plan veya hata simgesiyle g\u00f6sterilir ve hata y\u0131\u011f\u0131n izini (stack trace) de i\u00e7erir.<\/p>\n Genel bilgilendirme ama\u00e7l\u0131 mesajlar i\u00e7in kullan\u0131l\u0131r. Baz\u0131 taray\u0131c\u0131larda Daha d\u00fc\u015f\u00fck seviyeli hata ay\u0131klama mesajlar\u0131 i\u00e7in kullan\u0131l\u0131r. Varsay\u0131lan olarak genellikle g\u00f6r\u00fcnmezdir ve konsolun filtre ayarlar\u0131ndan “Verbose” (Ayr\u0131nt\u0131l\u0131) se\u00e7ene\u011fi etkinle\u015ftirildi\u011finde g\u00f6r\u00fcn\u00fcr hale gelir.<\/p>\n Dizileri (\u00f6zellikle nesne dizilerini) veya nesneleri daha okunabilir bir tablo format\u0131nda g\u00f6stermek i\u00e7in harikad\u0131r.<\/p>\n Bir JavaScript nesnesinin t\u00fcm \u00f6zelliklerini ve alt \u00f6zelliklerini hiyerar\u015fik bir a\u011fa\u00e7 yap\u0131s\u0131nda g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle DOM \u00f6\u011feleri gibi karma\u015f\u0131k nesneleri incelerken Konsol \u00e7\u0131kt\u0131s\u0131n\u0131 temizlemek i\u00e7in kullan\u0131l\u0131r. Yeni bir oturuma ba\u015flarken veya gereksiz \u00e7\u0131kt\u0131lar\u0131 kald\u0131rmak istedi\u011finizde faydal\u0131d\u0131r.<\/p>\n Belirli bir etiketin ka\u00e7 kez \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 saymak i\u00e7in \u0130lgili log mesajlar\u0131n\u0131 gruplar halinde d\u00fczenlemek i\u00e7in kullan\u0131l\u0131r. Bu, \u00f6zellikle karma\u015f\u0131k bir i\u015f ak\u0131\u015f\u0131ndaki \u00e7\u0131kt\u0131lar\u0131 daha okunabilir hale getirir. Bir kod blo\u011funun \u00e7al\u0131\u015fma s\u00fcresini \u00f6l\u00e7mek i\u00e7in kullan\u0131l\u0131r. Belirtilen ko\u015ful Bir fonksiyonun veya kod blo\u011funun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6steren \u00e7a\u011fr\u0131 y\u0131\u011f\u0131n\u0131n\u0131 (call stack) yazd\u0131r\u0131r. Bir hatan\u0131n nereden kaynakland\u0131\u011f\u0131n\u0131 veya bir fonksiyonun hangi s\u0131ra ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 anlamak i\u00e7in \u00e7ok faydal\u0131d\u0131r.<\/p>\n Geli\u015ftirici Konsolu, sadece \u00e7\u0131kt\u0131 almak i\u00e7in de\u011fil, ayn\u0131 zamanda JavaScript kodunuzdaki hatalar\u0131 bulmak ve d\u00fczeltmek i\u00e7in de g\u00fc\u00e7l\u00fc bir hata ay\u0131klama arac\u0131d\u0131r.<\/p>\n Bir hata (error) mesaj\u0131 ald\u0131\u011f\u0131n\u0131zda, genellikle k\u0131rm\u0131z\u0131 renkte g\u00f6sterilir ve i\u00e7inde \"Uncaught ReferenceError\", \"TypeError\", \"SyntaxError\" gibi bir hata t\u00fcr\u00fc ve hatan\u0131n meydana geldi\u011fi dosya ad\u0131 ile sat\u0131r numaras\u0131 bulunur. En \u00f6nemlisi, genellikle hataya yol a\u00e7an fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131n s\u0131ras\u0131n\u0131 (stack trace) da g\u00f6sterir. Bu y\u0131\u011f\u0131n izini dikkatlice okumak, hatan\u0131n kayna\u011f\u0131n\u0131 bulman\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n Kodunuzun belirli bir noktas\u0131nda y\u00fcr\u00fctmeyi durdurmak i\u00e7in Bir kesme noktas\u0131na ula\u015ft\u0131\u011f\u0131n\u0131zda veya Kod duraklat\u0131ld\u0131\u011f\u0131nda, \"Sources\" panelinin sa\u011f taraf\u0131nda \"Scope\" (Kapsam) ve \"Watch\" (\u0130zle) gibi b\u00f6l\u00fcmler bulunur. \"Sources\" panelindeki \"Call Stack\" b\u00f6l\u00fcm\u00fc, kodun duraklat\u0131ld\u0131\u011f\u0131 noktaya kadar hangi fonksiyonlar\u0131n hangi s\u0131ra ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir. Bu, bir hatan\u0131n veya beklenmedik bir davran\u0131\u015f\u0131n nedenini anlamak i\u00e7in kritik \u00f6neme sahiptir. Y\u0131\u011f\u0131n izindeki her bir \u00f6\u011feye t\u0131klayarak, o fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 kod sat\u0131r\u0131na atlayabilirsiniz.<\/p>\n Geli\u015ftirici Konsolu, sadece kodunuzdan \u00e7\u0131kt\u0131 almakla kalmaz, ayn\u0131 zamanda canl\u0131 olarak JavaScript kodu \u00e7al\u0131\u015ft\u0131rman\u0131za ve web sayfas\u0131n\u0131 manip\u00fcle etmenize de olanak tan\u0131r.<\/p>\n Konsolun komut sat\u0131r\u0131na herhangi bir JavaScript kodu yaz\u0131p Enter tu\u015funa basarak an\u0131nda \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\n Bu etkile\u015fimli yetenek, bir fikri h\u0131zl\u0131ca denemek, bir API'yi test etmek veya bir web sayfas\u0131n\u0131n davran\u0131\u015f\u0131n\u0131 an\u0131nda de\u011fi\u015ftirmek i\u00e7in paha bi\u00e7ilmezdir.<\/p>\n Konsolda, DOM \u00f6\u011felerini se\u00e7mek i\u00e7in kullan\u0131\u015fl\u0131 k\u0131sayollar bulunur: * Bu k\u0131sayollar, \u00f6zellikle \"Elements\" panelinde bir \u00f6\u011fe se\u00e7ip konsola ge\u00e7tikten sonra h\u0131zl\u0131ca o \u00f6\u011fe \u00fczerinde i\u015flem yapmak i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n * * Konsolda herhangi bir de\u011feri (string, object, array) panoya kopyalamak i\u00e7in Belirli bir fonksiyonun her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda konsola bir mesaj yazd\u0131rmas\u0131n\u0131 sa\u011flamak i\u00e7in Geli\u015ftirici Konsolu, DOM (Document Object Model) ve CSS ile etkile\u015fim kurmak i\u00e7in de harika bir ara\u00e7t\u0131r.<\/p>\n \"Elements\" paneli, sayfan\u0131n HTML yap\u0131s\u0131n\u0131 ve uygulanan CSS stillerini g\u00f6rsel olarak incelemenizi sa\u011flar. Konsoldan, Bu etkile\u015fimli manip\u00fclasyonlar, sayfan\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini veya davranaca\u011f\u0131n\u0131 h\u0131zl\u0131ca test etmek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n Konsol, do\u011frudan a\u011f isteklerini y\u00f6netmek i\u00e7in birincil ara\u00e7 olmasa da, \"Network\" paneli ile birlikte \u00e7al\u0131\u015farak a\u011fla ilgili sorunlar\u0131 ay\u0131klaman\u0131za yard\u0131mc\u0131 olabilir.<\/p>\n \"Network\" panelinde yap\u0131lan t\u00fcm HTTP isteklerini g\u00f6rebilirsiniz. Ancak, konsol, bu isteklerin JavaScript taraf\u0131ndaki hatalar\u0131n\u0131 yakalamak i\u00e7in daha etkilidir. \u00d6rne\u011fin, bir Bir API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z oldu\u011funda veya bir kaynak y\u00fcklenemedi\u011finde, ilgili hata mesajlar\u0131 genellikle konsolda g\u00f6r\u00fcn\u00fcr. Bu mesajlar, a\u011f hatas\u0131n\u0131n t\u00fcr\u00fcn\u00fc (\u00f6rne\u011fin, 404 Not Found, 500 Internal Server Error, Network Error) ve bazen de hatan\u0131n nedenini belirtir. Konsol, bu hatalar\u0131 yakalamak ve i\u015flemek i\u00e7in Geli\u015ftirici Konsolu, web uygulaman\u0131z\u0131n performans\u0131n\u0131 basit\u00e7e \u00f6l\u00e7mek i\u00e7in de kullan\u0131labilir.<\/p>\n Yukar\u0131da bahsedildi\u011fi gibi, bu metotlar belirli kod bloklar\u0131n\u0131n ne kadar s\u00fcrd\u00fc\u011f\u00fcn\u00fc \u00f6l\u00e7mek i\u00e7in harikad\u0131r. Bu, \u00f6zellikle performans darbo\u011fazlar\u0131n\u0131 h\u0131zl\u0131ca tespit etmek i\u00e7in ilk ad\u0131md\u0131r.<\/p>\n Baz\u0131 taray\u0131c\u0131larda (\u00f6zellikle eski s\u00fcr\u00fcmlerde veya belirli geli\u015ftirici ara\u00e7lar\u0131nda), Geli\u015ftirici Konsolu, ihtiya\u00e7lar\u0131n\u0131za g\u00f6re \u00f6zelle\u015ftirebilece\u011finiz \u00e7e\u015fitli ayarlara sahiptir.<\/p>\n Konsol panelinin \u00fcst k\u0131sm\u0131nda bulunan filtreleme se\u00e7enekleri, \u00e7\u0131kt\u0131y\u0131 y\u00f6netmek i\u00e7in \u00e7ok \u00f6nemlidir: Konsolun sa\u011f \u00fcst k\u00f6\u015fesindeki di\u015fli \u00e7ark simgesine t\u0131klayarak \u00e7e\u015fitli ayarlara eri\u015febilirsiniz: Geli\u015ftirici Konsolunu daha verimli kullanmak i\u00e7in baz\u0131 en iyi uygulamalar ve ipu\u00e7lar\u0131 \u015funlard\u0131r:<\/p>\n Geli\u015ftirme s\u0131ras\u0131nda Karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131nda veya performans sorunlar\u0131n\u0131 giderirken \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, konsol \u00e7\u0131kt\u0131s\u0131 h\u0131zla kalabal\u0131kla\u015fabilir. \u0130htiyac\u0131n\u0131z olan bilgilere odaklanmak i\u00e7in filtreleri (hata t\u00fcr\u00fcne g\u00f6re veya metin aramas\u0131yla) aktif olarak kullan\u0131n.<\/p>\n Konsol, JavaScript'i \u00f6\u011frenmek, yeni API'leri denemek veya mevcut bir web sayfas\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in harika bir \"oyun alan\u0131\"d\u0131r. Do\u011frudan taray\u0131c\u0131da kod yazarak ve sonu\u00e7lar\u0131n\u0131 an\u0131nda g\u00f6rerek pratik yap\u0131n.<\/p>\n JavaScript Geli\u015ftirici Konsolu, modern web geli\u015ftiricisinin ara\u00e7 setinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Hatalar\u0131 ay\u0131klamaktan performans\u0131 optimize etmeye, DOM'u manip\u00fcle etmekten a\u011f isteklerini izlemeye kadar geni\u015f bir yelpazede g\u00f6revleri yerine getirme yetene\u011fi sunar. Konsolu ustaca kullanmak, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131r\u0131r, kod kalitenizi art\u0131r\u0131r ve web uygulamalar\u0131n\u0131z\u0131 daha derinlemesine anlaman\u0131z\u0131 sa\u011flar.<\/p>\n Bu makalede ele al\u0131nan temel komutlar, hata ay\u0131klama teknikleri ve etkile\u015fimli kullan\u0131m y\u00f6ntemleri, konsolun sundu\u011fu imkanlar\u0131n sadece bir ba\u015flang\u0131c\u0131d\u0131r. Her taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131 s\u00fcrekli olarak geli\u015fmekte ve yeni \u00f6zellikler eklenmektedir. Bu nedenle, konsolu d\u00fczenli olarak kullanarak, yeni \u00f6zelliklerini ke\u015ffederek ve farkl\u0131 senaryolarda deneyler yaparak yeteneklerinizi geli\u015ftirmeye devam etmeniz \u00f6nemlidir. JavaScript Geli\u015ftirici Konsolu, web d\u00fcnyas\u0131nda ba\u015far\u0131l\u0131 olmak isteyen her geli\u015ftirici i\u00e7in s\u00fcrekli bir \u00f6\u011frenme ve ke\u015fif arac\u0131d\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript Geli\u015ftirici Konsolunu Kullanma Rehberi\nGiri\u015f: Geli\u015ftirici Konsolu Nedir ve Neden \u00d6nemlidir?\nWeb geli\u015ftirme d\u00fcnyas\u0131nda, yazd\u0131\u011f\u0131m","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-37359","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n * Windows\/Linux: F12<\/code> veya Ctrl + Shift + I<\/code>
\n * macOS: Cmd + Option + I<\/code>
\n* Safari:<\/strong>
\n * \u00d6ncelikle Safari men\u00fcs\u00fcnden “Tercihler” (Preferences) se\u00e7ene\u011fine gidin.
\n * “Geli\u015fmi\u015f” (Advanced) sekmesine t\u0131klay\u0131n.
\n * “Men\u00fc \u00e7ubu\u011funda Geli\u015ftir men\u00fcs\u00fcn\u00fc g\u00f6ster” (Show Develop menu in menu bar) se\u00e7ene\u011fini i\u015faretleyin.
\n * Bu ad\u0131m\u0131 tamamlad\u0131ktan sonra, Cmd + Option + C<\/code> k\u0131sayolunu kullanarak veya men\u00fc \u00e7ubu\u011fundaki “Geli\u015ftir” (Develop) men\u00fcs\u00fcnden “Web Denet\u00e7isi” (Show Web Inspector) se\u00e7ene\u011fini se\u00e7erek konsolu a\u00e7abilirsiniz.<\/p>\nMen\u00fcden Eri\u015fim<\/h4>\n
Konsol Paneline Genel Bak\u0131\u015f<\/h3>\n
Aray\u00fcz Bile\u015fenleri<\/h4>\n
\n* \u00c7\u0131kt\u0131 Alan\u0131:<\/strong> Konsolun ana b\u00f6l\u00fcm\u00fc olup, sayfan\u0131n JavaScript kodu taraf\u0131ndan \u00fcretilen t\u00fcm mesajlar\u0131 (loglar, uyar\u0131lar, hatalar), sizin yazd\u0131\u011f\u0131n\u0131z komutlar\u0131n sonu\u00e7lar\u0131n\u0131 ve taray\u0131c\u0131 taraf\u0131ndan olu\u015fturulan di\u011fer bilgileri g\u00f6sterir.
\n* Filtreler:<\/strong> \u00c7\u0131kt\u0131 alan\u0131n\u0131n \u00fcst k\u0131sm\u0131nda genellikle farkl\u0131 mesaj t\u00fcrlerini (Errors, Warnings, Info, Debug, Verbose) filtrelemek i\u00e7in d\u00fc\u011fmeler veya bir a\u00e7\u0131l\u0131r men\u00fc bulunur. Bu, \u00f6zellikle \u00e7ok fazla \u00e7\u0131kt\u0131 oldu\u011funda \u00f6nemli mesajlar\u0131 bulmay\u0131 kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, belirli bir metni i\u00e7eren mesajlar\u0131 aramak i\u00e7in de bir arama \u00e7ubu\u011fu mevcuttur.
\n* Ayarlar:<\/strong> Konsolun sa\u011f \u00fcst k\u00f6\u015fesinde genellikle bir di\u015fli \u00e7ark simgesiyle temsil edilen ayarlar men\u00fcs\u00fc bulunur. Buradan, konsolun davran\u0131\u015f\u0131n\u0131 (\u00f6rne\u011fin, g\u00fcnl\u00fckleri koruma, zaman damgalar\u0131n\u0131 g\u00f6sterme, otomatik tamamlama) ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc (koyu\/a\u00e7\u0131k tema) \u00f6zelle\u015ftirebilirsiniz.<\/p>\nDi\u011fer Panellerle \u0130li\u015fkisi<\/h4>\n
\n* Elements (\u00d6\u011feler):<\/strong> HTML ve CSS’i incelemek ve d\u00fczenlemek i\u00e7in kullan\u0131l\u0131r.
\n* Sources (Kaynaklar):<\/strong> JavaScript kaynak kodunu g\u00f6rmek, kesme noktalar\u0131 ayarlamak ve hata ay\u0131klamak i\u00e7in kullan\u0131l\u0131r.
\n* Network (A\u011f):<\/strong> Sayfan\u0131n yapt\u0131\u011f\u0131 t\u00fcm a\u011f isteklerini (HTTP\/HTTPS) izlemek i\u00e7in kullan\u0131l\u0131r.
\n* Performance (Performans):<\/strong> Sayfan\u0131n y\u00fcklenme ve \u00e7al\u0131\u015fma zaman\u0131 performans\u0131n\u0131 analiz etmek i\u00e7in kullan\u0131l\u0131r.
\n* Application (Uygulama):<\/strong> Yerel depolama, oturum depolama, \u00e7erezler, IndexedDB ve Service Worker’lar gibi uygulama verilerini incelemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n$0<\/code> de\u011fi\u015fkeniyle eri\u015febilir veya “Sources” panelinde bir kesme noktas\u0131na ula\u015ft\u0131\u011f\u0131n\u0131zda konsoldan de\u011fi\u015fken de\u011ferlerini inceleyebilirsiniz.<\/p>\nTemel Konsol Komutlar\u0131 ve Kullan\u0131mlar\u0131<\/h3>\n
console<\/code> nesnesi metotlar\u0131 arac\u0131l\u0131\u011f\u0131yla \u00e7\u0131kt\u0131 \u00fcretme ve hata ay\u0131klama yetenekleri sunar. Bu metotlar, kodunuzun farkl\u0131 a\u015famalar\u0131nda bilgi almak, uyar\u0131lar vermek veya hatalar\u0131 bildirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\nconsole.log()<\/code>: En Temel \u00c7\u0131kt\u0131<\/h4>\nconsole.log(\"Merhaba, D\u00fcnya!\"); \/\/ String\nconsole.log(42); \/\/ Say\u0131\nconsole.log(true); \/\/ Boolean\nconsole.log({ ad: \"Ali\", yas: 30 }); \/\/ Nesne\nconsole.log([1, 2, 3]); \/\/ Dizi\nlet x = 10;\nconsole.log(\"x'in de\u011feri:\", x); \/\/ Birden fazla arg\u00fcman birle\u015ftirilebilir<\/code><\/pre>\nconsole.log()<\/code> birden fazla arg\u00fcman\u0131 virg\u00fclle ay\u0131rarak alabilir ve bunlar\u0131 bir bo\u015flukla birle\u015ftirerek \u00e7\u0131kt\u0131 verir. Nesneler ve diziler genellikle etkile\u015fimli olarak incelenebilecek \u015fekilde g\u00f6sterilir.<\/p>\nconsole.warn()<\/code>: Uyar\u0131 Mesajlar\u0131<\/h4>\nconsole.warn(\"Bu bir uyar\u0131 mesaj\u0131d\u0131r. L\u00fctfen dikkat edin.\");<\/code><\/pre>\nconsole.error()<\/code>: Hata Mesajlar\u0131<\/h4>\ntry {\n throw new Error(\"Beklenmedik bir hata olu\u015ftu!\");\n} catch (e) {\n console.error(e);\n}<\/code><\/pre>\nconsole.info()<\/code>: Bilgilendirme Mesajlar\u0131<\/h4>\nconsole.log()<\/code> ile ayn\u0131 \u015fekilde g\u00f6r\u00fcn\u00fcr, baz\u0131lar\u0131nda ise \u00f6zel bir bilgi simgesiyle g\u00f6sterilir.<\/p>\nconsole.info(\"Uygulama ba\u015far\u0131yla ba\u015flat\u0131ld\u0131.\");<\/code><\/pre>\nconsole.debug()<\/code>: Hata Ay\u0131klama Mesajlar\u0131<\/h4>\nconsole.debug(\"Fonksiyon A \u00e7a\u011fr\u0131ld\u0131, parametreler:\", params);<\/code><\/pre>\nconsole.table()<\/code>: Tablo Format\u0131nda Veri G\u00f6sterme<\/h4>\nconst users = [\n { id: 1, name: \"Ay\u015fe\", email: \"ayse@example.com\" },\n { id: 2, name: \"Mehmet\", email: \"mehmet@example.com\" }\n];\nconsole.table(users);\n\nconst myObject = { a: 1, b: \"hello\", c: true };\nconsole.table(myObject);<\/code><\/pre>\nconsole.dir()<\/code>: Nesne \u00d6zelliklerini Detayl\u0131 \u0130nceleme<\/h4>\nconsole.log()<\/code>‘dan daha fazla bilgi sa\u011flar.<\/p>\nconst myElement = document.querySelector('body');\nconsole.dir(myElement);<\/code><\/pre>\nconsole.clear()<\/code>: Konsolu Temizleme<\/h4>\nconsole.clear();<\/code><\/pre>\nconsole.count()<\/code> ve console.countReset()<\/code>: \u00c7a\u011fr\u0131 Say\u0131s\u0131n\u0131 \u0130zleme<\/h4>\nconsole.count()<\/code> kullan\u0131l\u0131r. console.countReset()<\/code> ise belirli bir etiketin sayac\u0131n\u0131 s\u0131f\u0131rlar.<\/p>\nfunction greet(name) {\n console.count(\"greetFunctionCalls\");\n console.log(\"Merhaba, \" + name);\n}\n\ngreet(\"Ali\"); \/\/ greetFunctionCalls: 1\ngreet(\"Veli\"); \/\/ greetFunctionCalls: 2\ngreet(\"Ay\u015fe\"); \/\/ greetFunctionCalls: 3\n\nconsole.countReset(\"greetFunctionCalls\");\ngreet(\"Can\"); \/\/ greetFunctionCalls: 1<\/code><\/pre>\nconsole.group()<\/code> ve console.groupEnd()<\/code>: \u00c7\u0131kt\u0131lar\u0131 Grupland\u0131rma<\/h4>\nconsole.groupCollapsed()<\/code> ile gruplar\u0131 varsay\u0131lan olarak kapal\u0131 ba\u015flatabilirsiniz.<\/p>\nconsole.group(\"Kullan\u0131c\u0131 Bilgileri\");\nconsole.log(\"Ad: Cem\");\nconsole.log(\"Soyad: Y\u0131lmaz\");\nconsole.groupEnd();\n\nconsole.groupCollapsed(\"\u00dcr\u00fcn Detaylar\u0131\");\nconsole.log(\"\u00dcr\u00fcn Ad\u0131: Ak\u0131ll\u0131 Telefon\");\nconsole.log(\"Fiyat: 1000 TL\");\nconsole.groupEnd();<\/code><\/pre>\nconsole.time()<\/code> ve console.timeEnd()<\/code>: Kod Performans\u0131n\u0131 \u00d6l\u00e7me<\/h4>\nconsole.time()<\/code> bir zamanlay\u0131c\u0131 ba\u015flat\u0131r ve console.timeEnd()<\/code> ayn\u0131 etiketle \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda ge\u00e7en s\u00fcreyi milisaniye cinsinden konsola yazd\u0131r\u0131r.<\/p>\nconsole.time(\"veri\u0130\u015fleme\"); \/\/ Zamanlay\u0131c\u0131y\u0131 ba\u015flat\nfor (let i = 0; i < 1000000; i++) {\n \/\/ Yo\u011fun bir i\u015flem\n}\nconsole.timeEnd(\"veri\u0130\u015fleme\"); \/\/ Zamanlay\u0131c\u0131y\u0131 bitir ve s\u00fcreyi yazd\u0131r<\/code><\/pre>\nconsole.assert()<\/code>: Ko\u015fullu Hata Mesaj\u0131<\/h4>\nfalse<\/code> ise bir hata mesaj\u0131 yazd\u0131r\u0131r. Ko\u015ful true<\/code> ise hi\u00e7bir \u015fey yapmaz. Bu, belirli varsay\u0131mlar\u0131n do\u011fru olup olmad\u0131\u011f\u0131n\u0131 h\u0131zl\u0131ca kontrol etmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nlet age = 15;\nconsole.assert(age >= 18, \"Kullan\u0131c\u0131 18 ya\u015f\u0131ndan k\u00fc\u00e7\u00fck!\"); \/\/ Ko\u015ful yanl\u0131\u015f, hata mesaj\u0131 g\u00f6sterilir.\n\nage = 20;\nconsole.assert(age >= 18, \"Kullan\u0131c\u0131 18 ya\u015f\u0131ndan k\u00fc\u00e7\u00fck!\"); \/\/ Ko\u015ful do\u011fru, hi\u00e7bir \u015fey g\u00f6sterilmez.<\/code><\/pre>\nconsole.trace()<\/code>: \u00c7a\u011fr\u0131 Y\u0131\u011f\u0131n\u0131n\u0131 G\u00f6sterme<\/h4>\nfunction funcA() {\n funcB();\n}\n\nfunction funcB() {\n funcC();\n}\n\nfunction funcC() {\n console.trace(\"funcC \u00e7a\u011fr\u0131ld\u0131!\");\n}\n\nfuncA();<\/code><\/pre>\nKonsolu Hata Ay\u0131klama \u0130\u00e7in Kullanma (Debugging)<\/h3>\n
Hata Mesajlar\u0131n\u0131 Okuma ve Anlama<\/h4>\n
debugger;<\/code> Anahtar Kelimesi ile Duraklatma<\/h4>\ndebugger;<\/code> anahtar kelimesini kullanabilirsiniz. Bu sat\u0131ra ula\u015f\u0131ld\u0131\u011f\u0131nda, taray\u0131c\u0131 otomatik olarak \"Sources\" (Kaynaklar) paneline ge\u00e7er ve y\u00fcr\u00fctmeyi duraklat\u0131r.<\/p>\nfunction calculateSum(a, b) {\n let sum = a + b;\n debugger; \/\/ Burada kod y\u00fcr\u00fctmesi durur\n return sum;\n}\ncalculateSum(5, 10);<\/code><\/pre>\nKesme Noktalar\u0131 (Breakpoints) Ayarlama<\/h4>\n
debugger;<\/code> kullanmak yerine, \"Sources\" panelinde belirli bir kod sat\u0131r\u0131na t\u0131klayarak kesme noktalar\u0131 ayarlayabilirsiniz. Bu, kodu de\u011fi\u015ftirmeden hata ay\u0131klama yapman\u0131z\u0131 sa\u011flar.
\n* Sat\u0131r Kesme Noktalar\u0131:<\/strong> En yayg\u0131n olan\u0131d\u0131r. Belirli bir kod sat\u0131r\u0131na ula\u015f\u0131ld\u0131\u011f\u0131nda y\u00fcr\u00fctmeyi durdurur.
\n* Ko\u015fullu Kesme Noktalar\u0131:<\/strong> Sadece belirli bir ko\u015ful do\u011fru oldu\u011funda y\u00fcr\u00fctmeyi durdurur. \u00d6rne\u011fin, bir d\u00f6ng\u00fcde i === 5<\/code> oldu\u011funda duraklatmak gibi.
\n* DOM De\u011fi\u015fiklik Kesme Noktalar\u0131:<\/strong> Bir DOM d\u00fc\u011f\u00fcm\u00fcn\u00fcn niteli\u011fi, alt d\u00fc\u011f\u00fcm\u00fc veya tamamen kald\u0131r\u0131lmas\u0131 durumunda y\u00fcr\u00fctmeyi durdurur.
\n* Olay Dinleyici Kesme Noktalar\u0131:<\/strong> Belirli bir olay (\u00f6rne\u011fin, click<\/code>, submit<\/code>) tetiklendi\u011finde y\u00fcr\u00fctmeyi durdurur.
\n* XHR\/Fetch Kesme Noktalar\u0131:<\/strong> Belirli bir URL desenine sahip bir a\u011f iste\u011fi yap\u0131ld\u0131\u011f\u0131nda y\u00fcr\u00fctmeyi durdurur.<\/p>\nAd\u0131m Ad\u0131m Kod \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
debugger;<\/code> ile duraklatt\u0131\u011f\u0131n\u0131zda, \"Sources\" panelinde bir dizi kontrol d\u00fc\u011fmesi belirir:
\n* Resume script execution (Devam et):<\/strong> Bir sonraki kesme noktas\u0131na kadar veya kodun sonuna kadar y\u00fcr\u00fctmeye devam eder.
\n* Step over next function call (Ad\u0131mla):<\/strong> Mevcut fonksiyon i\u00e7indeki bir sonraki sat\u0131ra ge\u00e7er. E\u011fer sonraki sat\u0131r bir fonksiyon \u00e7a\u011fr\u0131s\u0131 ise, o fonksiyonun i\u00e7ine girmez, t\u00fcm fonksiyonu \u00e7al\u0131\u015ft\u0131r\u0131r ve sonucunu bekler.
\n* Step into next function call (\u0130\u00e7ine gir):<\/strong> Mevcut fonksiyon i\u00e7indeki bir sonraki sat\u0131ra ge\u00e7er. E\u011fer sonraki sat\u0131r bir fonksiyon \u00e7a\u011fr\u0131s\u0131 ise, o fonksiyonun i\u00e7ine girer.
\n* Step out of current function (D\u0131\u015f\u0131na \u00e7\u0131k):<\/strong> Mevcut fonksiyonun geri kalan\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r ve bu fonksiyonun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 yere geri d\u00f6ner.<\/p>\nDe\u011fi\u015fkenleri \u0130nceleme<\/h4>\n
\n* Scope:<\/strong> Mevcut kapsamdaki (global, script, local) t\u00fcm de\u011fi\u015fkenleri ve de\u011ferlerini g\u00f6sterir.
\n* Watch:<\/strong> Belirli de\u011fi\u015fkenleri veya ifadeleri izlemek i\u00e7in kullanabilece\u011finiz \u00f6zel bir aland\u0131r. Buraya ekledi\u011finiz ifadelerin de\u011ferleri, kod ilerledik\u00e7e otomatik olarak g\u00fcncellenir.
\nAyr\u0131ca, konsolun komut sat\u0131r\u0131ndan duraklat\u0131lan kodun kapsam\u0131ndaki herhangi bir de\u011fi\u015fkene eri\u015febilir ve de\u011ferini sorgulayabilir veya de\u011fi\u015ftirebilirsiniz.<\/p>\nCall Stack'i Anlama<\/h4>\n
Konsolu Etkile\u015fimli Olarak Kullanma<\/h3>\n
JavaScript Kodu \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
\/\/ Yeni bir de\u011fi\u015fken tan\u0131mlama\nlet message = \"Merhaba konsol!\";\nconsole.log(message); \/\/ \"Merhaba konsol!\"\n\n\/\/ Bir fonksiyon \u00e7a\u011f\u0131rma\nalert(\"Bu bir uyar\u0131!\");\n\n\/\/ DOM'u manip\u00fcle etme\ndocument.body.style.backgroundColor = \"lightblue\";<\/code><\/pre>\n$<\/code> ve $$<\/code> K\u0131sayollar\u0131<\/h4>\n
\n* $()<\/code>: document.querySelector()<\/code>'\u0131n k\u0131sayoludur. Belirtilen CSS se\u00e7iciye uyan ilk \u00f6\u011feyi d\u00f6nd\u00fcr\u00fcr.<\/p>\nconst myDiv = $('div'); \/\/ Sayfadaki ilk div'i se\u00e7er\n console.log(myDiv);<\/code><\/pre>\n$$()<\/code>: document.querySelectorAll()<\/code>'\u0131n k\u0131sayoludur. Belirtilen CSS se\u00e7iciye uyan t\u00fcm \u00f6\u011feleri i\u00e7eren bir dizi d\u00f6nd\u00fcr\u00fcr.<\/p>\nconst allParagraphs = $$('p'); \/\/ Sayfadaki t\u00fcm p etiketlerini se\u00e7er\n console.log(allParagraphs);<\/code><\/pre>\n$_<\/code> ve $0<\/code> Gibi \u00d6zel De\u011fi\u015fkenler<\/h4>\n$_<\/code>: Konsolda en son de\u011ferlendirilen ifadenin sonucunu tutar.<\/p>\n2 + 2; \/\/ \u00c7\u0131kt\u0131: 4\n console.log($_); \/\/ \u00c7\u0131kt\u0131: 4<\/code><\/pre>\n$0<\/code>, $1<\/code>, $2<\/code>, $3<\/code>, $4<\/code>: \"Elements\" panelinde se\u00e7ti\u011finiz son be\u015f DOM \u00f6\u011fesini temsil eder. $0<\/code> en son se\u00e7ilen \u00f6\u011feyi, $1<\/code> bir \u00f6nceki se\u00e7ilen \u00f6\u011feyi vb. ifade eder. Bu, \"Elements\" panelinden bir \u00f6\u011feyi se\u00e7ip konsola ge\u00e7erek o \u00f6\u011fe \u00fczerinde i\u015flem yapmak i\u00e7in \u00e7ok pratiktir.<\/p>\n\/\/ Elements panelinde bir div se\u00e7in\n console.log($0); \/\/ Se\u00e7ili div \u00f6\u011fesini g\u00f6sterir\n $0.style.color = 'red'; \/\/ Se\u00e7ili div'in rengini k\u0131rm\u0131z\u0131 yapar<\/code><\/pre>\ncopy()<\/code> Fonksiyonu<\/h4>\ncopy()<\/code> fonksiyonunu kullanabilirsiniz.<\/p>\nconst myData = { name: \"Zeynep\", age: 25 };\ncopy(myData); \/\/ myData nesnesini JSON format\u0131nda panoya kopyalar<\/code><\/pre>\nmonitor()<\/code> ve unmonitor()<\/code> Fonksiyonlar\u0131<\/h4>\nmonitor()<\/code> kullan\u0131l\u0131r. unmonitor()<\/code> ise izlemeyi durdurur.<\/p>\nfunction myFunction() {\n console.log(\"My function \u00e7al\u0131\u015ft\u0131.\");\n}\n\nmonitor(myFunction);\nmyFunction(); \/\/ Konsola \"function myFunction called\" ve \"My function \u00e7al\u0131\u015ft\u0131.\" yazd\u0131r\u0131r.\nunmonitor(myFunction);\nmyFunction(); \/\/ Sadece \"My function \u00e7al\u0131\u015ft\u0131.\" yazd\u0131r\u0131r.<\/code><\/pre>\nDOM ve CSS \u0130ncelemesi<\/h3>\n
Elements<\/code> Paneli ile Entegrasyon<\/h4>\ndocument.querySelector()<\/code> veya $()<\/code> k\u0131sayolunu kullanarak herhangi bir DOM \u00f6\u011fesine eri\u015febilir ve bu \u00f6\u011feler \u00fczerinde JavaScript ile i\u015flem yapabilirsiniz. \u00d6rne\u011fin, bir \u00f6\u011fenin i\u00e7eri\u011fini de\u011fi\u015ftirebilir, niteliklerini (attributes) ekleyebilir veya kald\u0131rabilir, veya yeni \u00f6\u011feler ekleyebilirsiniz.<\/p>\nKonsoldan DOM \u00d6\u011felerine Eri\u015fim ve Manip\u00fclasyon<\/h4>\n
\/\/ Bir \u00f6\u011feyi se\u00e7me\nconst header = document.querySelector('h1');\nconsole.log(header.textContent); \/\/ Ba\u015fl\u0131k metnini yazd\u0131r\u0131r\n\n\/\/ \u0130\u00e7eri\u011fi de\u011fi\u015ftirme\nheader.textContent = \"Yeni Ba\u015fl\u0131k Metni\";\n\n\/\/ Bir s\u0131n\u0131f ekleme\nheader.classList.add('highlight');\n\n\/\/ Bir stil de\u011fi\u015ftirme\nheader.style.color = 'blue';\n\n\/\/ Yeni bir \u00f6\u011fe olu\u015fturma ve ekleme\nconst newParagraph = document.createElement('p');\nnewParagraph.textContent = \"Bu konsoldan eklenen bir paragraf.\";\ndocument.body.appendChild(newParagraph);<\/code><\/pre>\nA\u011f \u0130steklerini \u0130nceleme (Network Paneli ile Entegrasyon)<\/h3>\n
XHR\/Fetch \u0130steklerini Konsoldan \u0130zleme<\/h4>\n
fetch<\/code> iste\u011fi ba\u015far\u0131s\u0131z olursa, console.error()<\/code> ile bir hata mesaj\u0131 alabilirsiniz.<\/p>\nA\u011f Hatalar\u0131n\u0131 Ay\u0131klama<\/h4>\n
try...catch<\/code> bloklar\u0131 veya Promise.catch()<\/code> metotlar\u0131 ile birlikte kullan\u0131labilir.<\/p>\nPerformans Analizi (Performance Paneli ile Entegrasyon)<\/h3>\n
console.time()<\/code> ve console.timeEnd()<\/code> ile Basit Performans \u00d6l\u00e7\u00fcm\u00fc<\/h4>\nconsole.time('renderList');\n\/\/ B\u00fcy\u00fck bir liste olu\u015fturan ve DOM'a ekleyen kod\nfor (let i = 0; i < 1000; i++) {\n const item = document.createElement('li');\n item.textContent = Item ${i}<\/code>;\n document.getElementById('myList').appendChild(item);\n}\nconsole.timeEnd('renderList'); \/\/ Liste olu\u015fturma s\u00fcresi konsola yazd\u0131r\u0131l\u0131r<\/code><\/pre>\nconsole.profile()<\/code> \/ console.profileEnd()<\/code> ile CPU Profili Olu\u015fturma<\/h4>\nconsole.profile()<\/code> ve console.profileEnd()<\/code> metotlar\u0131, bir kod blo\u011funun CPU kullan\u0131m\u0131n\u0131 detayl\u0131 bir \u015fekilde analiz etmek i\u00e7in kullan\u0131labilir. Bu, genellikle \"Performance\" panelindeki profilleme ara\u00e7lar\u0131n\u0131n daha basit bir konsol tabanl\u0131 versiyonudur. Ancak modern taray\u0131c\u0131larda, \"Performance\" paneli genellikle daha geli\u015fmi\u015f ve g\u00f6rsel ara\u00e7lar sunar.<\/p>\nKonsol Ayarlar\u0131 ve \u00d6zelle\u015ftirmeler<\/h3>\n
Mesaj Filtreleme<\/h4>\n
\n* All (T\u00fcm\u00fc):<\/strong> T\u00fcm mesaj t\u00fcrlerini g\u00f6sterir.
\n* Errors (Hatalar):<\/strong> Sadece hata mesajlar\u0131n\u0131 g\u00f6sterir.
\n* Warnings (Uyar\u0131lar):<\/strong> Sadece uyar\u0131 mesajlar\u0131n\u0131 g\u00f6sterir.
\n* Info (Bilgi):<\/strong> Sadece bilgi mesajlar\u0131n\u0131 g\u00f6sterir.
\n* Debug (Hata Ay\u0131klama):<\/strong> Sadece hata ay\u0131klama mesajlar\u0131n\u0131 g\u00f6sterir (genellikle console.debug()<\/code> taraf\u0131ndan \u00fcretilenler).
\n* Verbose (Ayr\u0131nt\u0131l\u0131):<\/strong> T\u00fcm mesajlar\u0131, taray\u0131c\u0131dan gelen d\u00fc\u015f\u00fck seviyeli mesajlar dahil g\u00f6sterir.
\n* Custom Filters (\u00d6zel Filtreler):<\/strong> Belirli metinleri i\u00e7eren veya i\u00e7ermeyen mesajlar\u0131 g\u00f6stermek i\u00e7in kendi filtrelerinizi tan\u0131mlayabilirsiniz. Arama \u00e7ubu\u011funu kullanarak da mesajlar\u0131 filtreleyebilirsiniz.<\/p>\nAyarlar Men\u00fcs\u00fc (Di\u015fli \u00c7ark Simgesi)<\/h4>\n
\n* Preserve log (G\u00fcnl\u00fckleri Koru):<\/strong> Sayfa yenilendi\u011finde konsol g\u00fcnl\u00fcklerinin silinmesini engeller. Bu, bir sayfa yenilemesinden sonra ne oldu\u011funu izlemek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.
\n* Show timestamps (Zaman Damgalar\u0131n\u0131 G\u00f6ster):<\/strong> Her mesaj\u0131n ne zaman kaydedildi\u011fini g\u00f6steren bir zaman damgas\u0131 ekler.
\n* Eager evaluation (\u0130stekli De\u011ferlendirme):<\/strong> Komut sat\u0131r\u0131na yazarken kodunuzun sonucunu an\u0131nda g\u00f6rmenizi sa\u011flar, Enter'a basmadan \u00f6nce bile.
\n* Autocomplete from history (Ge\u00e7mi\u015ften Otomatik Tamamlama):<\/strong> Daha \u00f6nce yazd\u0131\u011f\u0131n\u0131z komutlar\u0131 otomatik olarak tamamlar.
\n* Koyu\/A\u00e7\u0131k Tema:<\/strong> Konsolun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ki\u015fisel tercihinize g\u00f6re de\u011fi\u015ftirebilirsiniz.<\/p>\nEn \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
\u00dcretim Ortam\u0131nda
console.log<\/code> Kullan\u0131m\u0131na Dikkat<\/h4>\nconsole.log<\/code> paha bi\u00e7ilmez olsa da, \u00fcretim ortam\u0131na (canl\u0131 web sitesi) g\u00f6nderilen kodda \u00e7ok fazla console.log<\/code> b\u0131rakmak performans\u0131 etkileyebilir ve hassas bilgilerin a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131na neden olabilir. \u00dcretim \u00f6ncesi t\u00fcm console.log<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131 kald\u0131rmak veya otomatik olarak devre d\u0131\u015f\u0131 b\u0131rakmak i\u00e7in build ara\u00e7lar\u0131 (\u00f6rne\u011fin, Webpack, Rollup) kullanmak iyi bir uygulamad\u0131r.<\/p>\nAnlaml\u0131 Log Mesajlar\u0131 Yazma<\/h4>\n
console.log(\"Burada \u00e7al\u0131\u015ft\u0131\");<\/code> gibi genel mesajlar yerine, neyin, ne zaman ve hangi de\u011ferle \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 belirten a\u00e7\u0131klay\u0131c\u0131 mesajlar yaz\u0131n.<\/p>\n\/\/ K\u00f6t\u00fc\nconsole.log(\"data\");\n\n\/\/ \u0130yi\nconsole.log(\"API'den gelen kullan\u0131c\u0131 verileri:\", userData);<\/code><\/pre>\nGrup ve Zamanlay\u0131c\u0131lar\u0131 Etkili Kullanma<\/h4>\n
console.group()<\/code> ve console.time()<\/code> gibi metotlar\u0131 kullanarak \u00e7\u0131kt\u0131n\u0131z\u0131 d\u00fczenli ve anla\u015f\u0131l\u0131r tutun.<\/p>\nFiltrelemeyi Aktif Kullanma<\/h4>\n
Konsolu Sadece Hata Ay\u0131klama Arac\u0131 Olarak De\u011fil, Ayn\u0131 Zamanda \u00d6\u011frenme ve Deney Yapma Alan\u0131 Olarak G\u00f6rme<\/h4>\n
Sonu\u00e7<\/h3>\n