{"id":33467,"date":"2025-03-07T20:23:26","date_gmt":"2025-03-07T23:23:26","guid":{"rendered":"https:\/\/mastertrend.info\/?p=33467"},"modified":"2025-12-16T00:20:05","modified_gmt":"2025-12-16T03:20:05","slug":"element-inspector-ile-ilgili-puf-noktalari","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/tr\/trucos-con-el-inspector-de-elementos\/","title":{"rendered":"Element Denetleyicisi ile \u0130pu\u00e7lar\u0131: Web sitenizi \u015fimdi d\u00f6n\u00fc\u015ft\u00fcr\u00fcn! \u26a1\ufe0f"},"content":{"rendered":"

Element Inspector P\u00fcf Noktalar\u0131: Bilmeniz Gereken 8 \u0130pucu! \ud83d\udee0\ufe0f<\/h2>\n

Taray\u0131c\u0131n\u0131zdaki Element Inspector yaln\u0131zca geli\u015ftiricilere \u00f6zel bir ara\u00e7 gibi g\u00f6r\u00fcnebilir, ancak programlama hakk\u0131nda hi\u00e7bir \u015fey bilmeseniz bile asl\u0131nda onunla baz\u0131 harika \u015feyler yapabilirsiniz! \ud83d\ude80<\/p>\n

<\/p>\n

1 . <\/span>Resimleri \u0130ndir<\/h2>\n

Bir web sitesinden bir g\u00f6rsel indirmeniz gerekebilir. Sa\u011f t\u0131klay\u0131p \u201cResmi Kaydet\u201d se\u00e7ene\u011fine basmaya \u00e7al\u0131\u015f\u0131yorsunuz ve bu se\u00e7ene\u011fin devre d\u0131\u015f\u0131 oldu\u011funu veya \u201cResmi Kaydet\u201d d\u00fc\u011fmesinin g\u00f6r\u00fcnmedi\u011fini g\u00f6r\u00fcyorsunuz. Bazen, dosyan\u0131n tamam\u0131n\u0131 de\u011fil, yaln\u0131zca k\u00fc\u00e7\u00fck resmini indirebilirsiniz. \ud83e\udd14 N'aber?<\/p>\n

Geli\u015ftiriciler genellikle "G\u00f6r\u00fcnt\u00fcy\u00fc Kaydet" d\u00fc\u011fmesini bilerek devre d\u0131\u015f\u0131 b\u0131rak\u0131r veya bu \u015fekilde g\u00f6r\u00fcnt\u00fc indirmeye izin vermeyen bir web \u00e7er\u00e7evesi kullan\u0131rlar. Ama Element Inspector'da kullan\u0131\u015fl\u0131 bir \u00e7\u00f6z\u00fcm var. \u00dc\u00e7 basit ad\u0131mda bir web sitesindeki herhangi bir resim kayna\u011f\u0131n\u0131 tam boyutta alabilirsiniz. \ud83d\udcf8<\/p>\n

Bazen bu g\u00f6r\u00fcnt\u00fcler lisanslama nedenleriyle engellendi<\/a> ve telif hakk\u0131 konusunda dikkatli olun ve yasal sorunlardan ka\u00e7\u0131nmak i\u00e7in adil kullan\u0131m kurallar\u0131na uyun. \u2696\ufe0f<\/section>\n

Ad\u0131m 1<\/h3>\n

Yapmak sa\u011f t\u0131kla<\/a> Sayfan\u0131n herhangi bir yerine t\u0131klay\u0131n ve \u201c\u00d6\u011feyi \u0130ncele\u201d veya \u201c\u0130ncele\u201d se\u00e7ene\u011fini se\u00e7in. Ayr\u0131ca taray\u0131c\u0131n\u0131zdaki denet\u00e7i i\u00e7in \u00f6zel klavye k\u0131sayolunu da kullanabilirsiniz. F12 \u00e7o\u011fu taray\u0131c\u0131da \u00e7al\u0131\u015f\u0131r<\/a> ve i\u015fletim sistemleri. Bu demo i\u00e7in Firefox kullan\u0131yorum ama ad\u0131mlar ayn\u0131. \ud83d\uddb1\ufe0f<\/p>\n

Ad\u0131m 2<\/h3>\n

Element Inspector penceresinde \u201cA\u011f\u201d sekmesine t\u0131klay\u0131n. A\u011f sekmesinin alt men\u00fclerinden biri \u201cResimler\u201d olmal\u0131d\u0131r. \u201cResimler\u201de t\u0131klay\u0131n. \ud83d\uddbc\ufe0f<\/p>\n

\u015eimdi sayfay\u0131 yeniden y\u00fckleyin, b\u00f6ylece t\u00fcm resim kaynaklar\u0131 \u201cResimler\u201d sekmesinde g\u00f6r\u00fcnecektir. Kullan\u0131n adres \u00e7ubu\u011funun yan\u0131ndaki yenileme d\u00fc\u011fmesi<\/a> taray\u0131c\u0131n\u0131zdan veya Ctrl+R tu\u015flar\u0131na bas\u0131n. \ud83d\udd04<\/p>\n

\"Inspect<\/figure>\n

Ad\u0131m 3<\/h3>\n

\u0130\u015fte kar\u015f\u0131n\u0131zda. T\u00fcm resim k\u00fct\u00fcphanesi listeye y\u00fcklenmelidir. Liste dinamik olarak g\u00fcncellenmektedir, dolay\u0131s\u0131yla web sitesine daha fazla resim y\u00fcklendi\u011finde, bunlar burada da g\u00f6r\u00fcnecektir. \ud83d\uddbc\ufe0f\u2728<\/p>\n

Bir dosyan\u0131n \u00fczerine gelerek \u00f6nizlemesini ve boyutlar\u0131n\u0131 g\u00f6rebilirsiniz. Dosyay\u0131 yeni sekmede a\u00e7mak i\u00e7in \u00e7ift t\u0131klay\u0131n ve sa\u011f t\u0131klama men\u00fcs\u00fcn\u00fc kullanarak kaydedin. \ud83d\udcbe<\/p>\n

\"Element<\/figure>\n

2 . <\/span>Videolar\u0131 \u0130ndir<\/h2>\n

T\u0131pk\u0131 g\u00f6r\u00fcnt\u00fc varl\u0131klar\u0131 gibi, bazen web siteleri izin vermez de\u015farj<\/a> videolar\u0131 do\u011frudan. Ama bunlar\u0131 element denet\u00e7isine y\u00fckleyerek indirebilirsiniz. Denet\u00e7iye y\u00fcklendikten sonra, dosya ad\u0131na \u00e7ift t\u0131klayarak yeni bir sekmede a\u00e7abilirsiniz. \ud83c\udfa5<\/p>\n

Ad\u0131m 1<\/h3>\n

F12 klavye k\u0131sayoluna basarak Element Inspector penceresini a\u00e7\u0131n (\u00e7o\u011fu sistemde \u00e7al\u0131\u015fmas\u0131 gerekir). Alternatif olarak, web sayfas\u0131nda herhangi bir yere sa\u011f t\u0131klay\u0131p "\u0130ncele"yi se\u00e7ebilirsiniz. Element Inspector penceresi a\u00e7\u0131lmal\u0131d\u0131r. \ud83d\uddb1\ufe0f<\/p>\n

Ad\u0131m 2<\/h3>\n

Video dosyalar\u0131 hari\u00e7 her \u015feyi filtrelemek i\u00e7in \u201cA\u011f\u201d sekmesine ve ard\u0131ndan \u201cMedya\u201dya t\u0131klay\u0131n. Sayfay\u0131 yeniden y\u00fckleyin. Taray\u0131c\u0131n\u0131z\u0131n yenileme butonuna t\u0131klayarak veya Ctrl+R tu\u015flar\u0131na basarak. \ud83d\udd04<\/p>\n

\"Firefox'ta<\/figure>\n

Ad\u0131m 3<\/h3>\n

Video dosyalar\u0131 bir liste halinde y\u00fcklenmeli. An\u0131nda \u00f6nizleme yapamazs\u0131n\u0131z, ancak bir dosyay\u0131 \u00e7ift t\u0131klayarak yeni bir sekmede a\u00e7abilirsiniz. Oradan sa\u011f t\u0131klay\u0131p indirebilirsiniz. \ud83c\udfac<\/p>\n

\"Inspect<\/figure>\n

3 . <\/span>Tam Sayfa Ekran G\u00f6r\u00fcnt\u00fcleri Yakala<\/h2>\n

E\u011fer bir web sayfas\u0131n\u0131n tamam\u0131n\u0131 kaydetmek istiyorsan\u0131z, onu h\u0131zl\u0131ca PDF veya HTML dosyas\u0131 olarak indirebilirsiniz. Peki ya sayfan\u0131n tamam\u0131n\u0131n normal foto\u011fraf\u0131n\u0131 \u00e7ekmek isterseniz? Burada Nas\u0131l yap\u0131laca\u011f\u0131n\u0131 a\u00e7\u0131klayaca\u011f\u0131m<\/a>. \ud83d\udcf8<\/p>\n

Firefox'un i\u00e7erik men\u00fcs\u00fcnde \u00f6zel bir ekran g\u00f6r\u00fcnt\u00fcs\u00fc arac\u0131 var, bu y\u00fczden bunu nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 g\u00f6sterece\u011fim Google Chrome<\/a> ve di\u011fer taray\u0131c\u0131lar. \ud83c\udf10<\/p>\n

Sayfan\u0131n herhangi bir yerine sa\u011f t\u0131klayarak veya F12 tu\u015funa basarak denet\u00e7i arac\u0131n\u0131 a\u00e7\u0131n.<\/p>\n

\"Chrome'da<\/figure>\n

\u00c7al\u0131\u015ft\u0131r penceresini a\u00e7mak i\u00e7in Ctrl+Shift+P tu\u015flar\u0131na bas\u0131n. yazd\u0131\u011f\u0131m Yakalama yakalama tam boy ekran<\/a> <\/strong>Bu pencerede. \u00dczerine t\u0131klay\u0131n. \ud83d\udcc4<\/p>\n

Hemen "Farkl\u0131 Kaydet" penceresi a\u00e7\u0131lacakt\u0131r. Bu pencereden tam sayfa ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc JPG olarak kaydedebilirsiniz. \ud83d\udcbe<\/p>\n

\"Chrome'da<\/figure>\n

4 . <\/span>Telefonda oldu\u011funuzu d\u00fc\u015f\u00fcn\u00fcn<\/h2>\n

\u00c7o\u011fu web sitesi cihaz t\u00fcr\u00fcne ve ekran boyutuna ba\u011fl\u0131 olarak farkl\u0131 \u015fekilde y\u00fcklenir. Sitenin sizin farkl\u0131 bir cihaz kulland\u0131\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcnmesini sa\u011flamak istiyorsan\u0131z (herhangi bir nedenle), bunu denetleme arac\u0131yla kolayca yapabilirsiniz. \ud83d\udcf1<\/p>\n

Chrome'da sa\u011f t\u0131klama men\u00fcs\u00fcnden veya F12 tu\u015fuyla Elements Inspector penceresini a\u00e7\u0131n. Daha sonra sol \u00fcst k\u00f6\u015fedeki k\u00fc\u00e7\u00fck diz\u00fcst\u00fc bilgisayar ve telefon simgesine t\u0131klay\u0131n. Firefox'ta da Duyarl\u0131 Tasar\u0131m Modu (Ctrl+Shift+M) ad\u0131 verilen benzer bir buton var. \ud83d\udda5\ufe0f<\/p>\n

\"Chrome'da<\/figure>\n

Taklit edebilece\u011finiz ayg\u0131tlar\u0131n bir listesine sahip olacaks\u0131n\u0131z ve ayr\u0131ca boyutunu manuel olarak ayarlayabilirsiniz. ekran<\/a>. Mobil cihaz\u0131n\u0131z\u0131 se\u00e7ti\u011finizde taray\u0131c\u0131n\u0131z\u0131n dokunma hareketlerini de sim\u00fcle etti\u011fini fark edeceksiniz. \ud83d\udcf1\u2728<\/p>\n

5 . <\/span>Kaynaklar\u0131 Belirle<\/h2>\n

Bu ipucu yarat\u0131c\u0131 ki\u015filer i\u00e7indir, ancak bir web sitesindeki yaz\u0131 tipleriyle ilgilenen herkes bu numaray\u0131 kullanabilir. Kullanabilirsiniz m\u00fcfetti\u015f arac\u0131 tan\u0131mlamak i\u00e7in<\/a> ve bazen yaz\u0131 tiplerini bile indirebiliyoruz. \ud83d\udd8b\ufe0f<\/p>\n

\u00d6ncelikle eleman inceleme arac\u0131n\u0131 a\u00e7al\u0131m. Daha sonra \u201cA\u011f\u201d sekmesine t\u0131klay\u0131n (ta\u015fma men\u00fcs\u00fcnde gizli olabilir) ve \u201cKaynak\u201d\u0131 se\u00e7in.<\/p>\n

\"Inspect<\/figure>\n

Daha sonra Ctrl+R tu\u015flar\u0131na bas\u0131n. Olu\u015fturulan fontlar muhtemelen WOFF format\u0131nda listeye y\u00fcklenecektir. Font ismine \u00e7ift t\u0131klayarak do\u011frudan indirebilirsiniz. \u00d6rne\u011fin, How-To Geek varsay\u0131lan yaz\u0131 tipi olarak Roboto'yu kullan\u0131r. \ud83d\udd24<\/p>\n

Yaz\u0131 tipi hakk\u0131nda daha ayr\u0131nt\u0131l\u0131 bilgiye ihtiyac\u0131n\u0131z varsa, \u201c\u00d6\u011feler\u201d sekmesine gidin ve \u201cStiller\u201di se\u00e7in. Yaz\u0131 tipi ailesi \u00f6zelli\u011fine gidin ve t\u0131klay\u0131n. \u0130lgili metin web sayfas\u0131nda vurgulanacakt\u0131r. Bu \u015fekilde kayna\u011f\u0131n\u0131z\u0131 do\u011fru bir \u015fekilde tespit edebilirsiniz. \ud83c\udfa8<\/p>\n

\"Ayr\u0131nt\u0131l\u0131<\/figure>\n

6 . <\/span>Bir Sayfadaki Metni D\u00fczenle (Ge\u00e7ici Olarak)<\/h2>\n

Bir web sayfas\u0131ndaki hemen hemen her \u015feyi denet\u00e7iyi kullanarak ge\u00e7ici olarak d\u00fczenleyebilece\u011finizi biliyor muydunuz? Bu ara\u00e7, web sitesini olu\u015fturan kodu d\u00fczenlemenize olanak tan\u0131r; yani, kod hakk\u0131nda biraz bilginiz varsa, sayfan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc istedi\u011finiz gibi de\u011fi\u015ftirebilirsiniz (sadece kendi makinenizde, sayfay\u0131 yeniden y\u00fckleyene kadar). \ud83d\udee0\ufe0f<\/p>\n

Kodlama hakk\u0131nda hi\u00e7bir \u015fey bilmeseniz bile herhangi bir web sayfas\u0131ndaki temel metinleri d\u00fczenleyebilirsiniz. Arkada\u015flar\u0131n\u0131za yapabilece\u011finiz e\u011flenceli bir \u015faka olabilir. \ud83d\ude09<\/p>\n

D\u00fczenlemek istedi\u011finiz sayfadaki metni vurgulay\u0131n ve \u00fczerine sa\u011f t\u0131klay\u0131n. Daha sonra \u201c\u0130ncele\u201d veya \u201c\u00d6\u011feyi \u0130ncele\u201d se\u00e7ene\u011fini se\u00e7in.<\/p>\n

\u0130lgili metin par\u00e7as\u0131 \u00d6\u011feler sekmesinde g\u00f6r\u00fcnmelidir. Sadece \u00e7ift t\u0131klay\u0131n ve metni istedi\u011finiz herhangi bir \u015feyle de\u011fi\u015ftirin. \u270f\ufe0f<\/p>\n

Element denet\u00e7isini kapat\u0131n ve i\u015fte bu kadar! Sayfay\u0131 yeniden y\u00fckledi\u011finizde yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin geri al\u0131naca\u011f\u0131n\u0131 unutmay\u0131n. \ud83d\udd04<\/p>\n

7 . <\/span>\u00d6\u011feleri Sil<\/h2>\n

T\u0131pk\u0131 metin d\u00fczenlemede oldu\u011fu gibi, bir web sayfas\u0131ndaki belirli \u00f6\u011feleri de silebilirsiniz. Tekrar ediyoruz, de\u011fi\u015fiklikler yaln\u0131zca sayfay\u0131 yeniden y\u00fckleyene kadar ge\u00e7erli olacakt\u0131r. \u274c<\/p>\n

Silmek istedi\u011finiz \u00f6\u011feye sa\u011f t\u0131klay\u0131n ve ard\u0131ndan \u201c\u0130ncele\u201d veya \u201c\u00d6\u011feyi \u0130ncele\u201d se\u00e7ene\u011fini se\u00e7in.<\/p>\n

Etiketlerin \u00fczerine gelin "<\/p>\n

\n

\u201d hasta que se resalte la totalidad del elemento. Luego simplemente presion\u00e1 la tecla Suprimir<\/a>. \ud83d\udd1a<\/p>\n

\"\u00d6\u011feyi<\/figure>\n

\u0130\u015fte \u00f6ylece gitti! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/p>\n

8 . <\/span>Renk De\u011ferlerini Tan\u0131mlay\u0131n<\/h2>\n

Yarat\u0131c\u0131lar i\u00e7in bir ipucu daha: Herhangi bir \u00f6\u011fenin RGB ve HEX de\u011ferlerini alabilirsiniz. bir web sayfas\u0131nda renk<\/a> Element denet\u00e7isinde bulaca\u011f\u0131n\u0131z damlal\u0131k arac\u0131n\u0131 kullanarak. \ud83c\udfa8<\/p>\n

Sayfan\u0131n herhangi bir yerine sa\u011f t\u0131klay\u0131n ve Denet\u00e7iyi a\u00e7\u0131n. Varsay\u0131lan olarak, Kurallar penceresi Denet\u00e7i sekmesinde a\u00e7\u0131l\u0131r. Renk olarak etiketlenen \u00f6zellikleri bulmak i\u00e7in a\u015fa\u011f\u0131 kayd\u0131r\u0131n.<\/p>\n

Renk \u00f6zelli\u011finin yan\u0131nda renkli bir daire veya kare bulunmal\u0131d\u0131r. \u00dczerine t\u0131klayarak renk se\u00e7iciyi a\u00e7\u0131n ve yan\u0131ndaki damlal\u0131k simgesine bas\u0131n. \ud83d\udd8c\ufe0f<\/p>\n

\"Eleman\u0131<\/figure>\n

Renk de\u011ferlerini bulmak i\u00e7in bu damlal\u0131\u011f\u0131 sayfan\u0131n herhangi bir yerine getirebilirsiniz. Damlal\u0131\u011fa t\u0131klad\u0131\u011f\u0131n\u0131zda, \u00f6zellik otomatik olarak se\u00e7ti\u011finiz renk de\u011feriyle doldurulacakt\u0131r. Buradan kolayca kopyalayabilirsiniz. \ud83d\udccb<\/p>\n

\"Inspect<\/figure>\n
\n

Bunlar ipu\u00e7lar\u0131 ancak y\u00fczeyi \u00e7iziyor<\/a> Elements Inspector'\u0131 kullanarak ger\u00e7ekte nelerin m\u00fcmk\u00fcn oldu\u011funu g\u00f6r\u00fcn. Web geli\u015ftirme konusunda daha derinlemesine bilgi edinmek istiyorsan\u0131z, i\u015fte size ba\u015flaman\u0131z i\u00e7in bir rehber. \ud83d\udcbb<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Element Inspector Hileleri: \u00c7evrimi\u00e7i Deneyiminizi Kolayca \u00d6zelle\u015ftirmek ve Geli\u015ftirmek \u0130\u00e7in 8 \u015ea\u015f\u0131rt\u0131c\u0131 Tekni\u011fi Ke\u015ffedin \ud83d\udcbb\u2728<\/p>","protected":false},"author":1,"featured_media":89558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":65,"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"1","parallax":"1","fullscreen":"1","layout":"right-sidebar","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"top","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"1","show_popup_post":"1","show_comment_section":"1","number_popup_post":"1","show_author_box":"1","show_post_related":"1","show_inline_post_related":"0"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"percentage","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[1435],"tags":[1582,1445,1558],"class_list":["post-33467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-browsertips","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts\/33467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/comments?post=33467"}],"version-history":[{"count":6,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts\/33467\/revisions"}],"predecessor-version":[{"id":104702,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/posts\/33467\/revisions\/104702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/media\/89558"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/media?parent=33467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/categories?post=33467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/tr\/wp-json\/wp\/v2\/tags?post=33467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}