path: root/files/tr/learn/css/building_blocks/debugging_css/index.html

---
title: CSS'de hata ayıklamak
slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS
tags:
  - Acemi
  - Beginner
  - CSS
  - DOM
  - Debugging
  - DevTools
  - Eğitim
  - Hata Ayıklama
  - Kaynak kod
  - Learn
  - source
translation_of: Learn/CSS/Building_blocks/Debugging_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>

<p>Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan  DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Ön koşullar:</th>
   <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve  HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
  </tr>
  <tr>
   <th scope="row">Amaç:</th>
   <td>Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek</td>
  </tr>
 </tbody>
</table>

<h2 id="Tarayıcılarda_DevToolsa_nasıl_erişilir">Tarayıcılarda DevTools'a nasıl erişilir</h2>

<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirici araçları nelerdir</a> dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.</p>

<p>Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için,  <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Izgara Düzeni</a>, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>'ı ve <a href="/tr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Biçimleri</a> incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.</p>

<p>Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">örnek bir dosya</a> kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.</p>

<h2 id="DOM_ve_görüntüleme_kaynağı_karşılaştırması">DOM ve görüntüleme kaynağı karşılaştırması</h2>

<p>Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının <a href="/tr/docs/Tools/View_source">kaynağını görüntülediğinde</a> veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Panelinde</a> görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.</p>

<p>Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <code>&lt;h2&gt;</code><font><font> etiketini </font></font><code>&lt;/h3&gt;</code> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan <code>&lt;/h3&gt;</code>'ü <code>&lt;/h2&gt;</code> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.</p>

<p>Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ağacı</a>'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.</p>

<h2 id="Uygulanan_CSSi_inceleme">Uygulanan CSS'i inceleme</h2>

<p>Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden <em>öğeyi incele</em>'yi seçerek veya <em>Araçlar</em> menüsündeki <em>Web geliştirici</em> sekmesinde bulunan seçeneklerden birini seçerek <em>DevTools'a</em> geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki <code>box1</code> sınıfına atanmış öğeyi seçip <em>DevTools'u </em>aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.</p>

<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>

<p>Açılan <em>DevTools</em> ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde <em>Denetçi</em> sekmesinde bulunan HTML alanının sağındaki <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Kurallar görünümüne</a> bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan <code>box1</code> sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <code>&lt;body&gt;</code>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.</p>

<p>Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım <code>margin</code> kısa tanımı üzerinden ilerleyelim.</p>

<p><strong>Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.</strong></p>

<p><strong>Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, <code>border-radius</code> niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve <em>DevTools</em> bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.</strong></p>

<p>Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve <code>box1</code> sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.</p>

<p>Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:</p>

<p>{{EmbedYouTube("O3DAm82vIvU")}}</p>

<h2 id="Değerleri_düzenleme">Değerleri düzenleme</h2>

<p>Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.</p>

<p><strong>Seçtimiz <code>box1</code> sınıfına ait öğemizin <em>Kurallar görünümündeki</em> <code>color</code> niteliğinin yanıda ki küçük renkli daireye tıklayalım.</strong><strong> Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.</strong></p>

<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>

<h2 id="Yeni_nitelik_eklemek">Yeni nitelik eklemek</h2>

<p><em>DevTools'u</em> kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <code>&lt;body&gt;</code> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.</p>

<p><strong>Yeni bir bildirim girebilmek için kuralın sonunda bulunan <code>}</code> süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle <code>font-size</code> niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.</strong></p>

<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>

<div class="blockIndicator note">
<p><strong>Not</strong>: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS'i inceleme ve düzenleme</a> dersine bakın.</p>
</div>

<h2 id="Kutu_modelini_anlamak">Kutu modelini anlamak</h2>

<p>Önceki derslerde <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeline</a> verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.</p>

<p><a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Düzen görünümde(Layout)</a> seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile  kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.</p>

<p>Bu panelde, kutu modeli özelliklerinden biri olan <code>box-sizing</code> öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.</p>

<p><strong><code>box1</code></strong><strong> ve <code>box2</code> sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak <code>box1</code> sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin <code>context-box</code> değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.</strong></p>

<p><strong><code>box2</code> sınıfına dahil olan öğemizin kutu modeli <code>border-box</code> olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.</strong></p>

<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>

<div class="blockIndicator note">
<p><strong>Not</strong>: <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Kutu Modelini İnceleme ve Düzenleme</a> bölümünden daha fazla bilgi edinebilirsin.</p>
</div>

<h2 id="Özgüllük_sorunlarını_çözme">Özgüllük sorunlarını çözme</h2>

<p>Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.</p>

<p>Örnek dosyamızda bir <code>&lt;em&gt;</code> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:</p>

<pre class="brush: css notranslate">em {
  color: hotpink;
  font-weight: bold;
}</pre>

<p>Bunla birlikte stil sayfamda <code>.special</code> sınıf seçicisine sahip bir kuralım daha var:</p>

<pre class="brush: css notranslate">.special {
  color: orange;
}</pre>

<p><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a> dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.</p>

<p><strong>Kontrol görünümünde <code>&lt;em&gt;</code> öğe ve <code>.special</code> sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan <code>color</code> niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.</strong></p>

<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>

<h2 id="Firefox_Geliştirici_Araçları_hakkında_daha_fazla_bilgi_edinin">Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin</h2>

<p>MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için <a href="/tr/docs/Tools">DevTools bölümüne</a> ve <a href="/tr/docs/Tools/Page_Inspector#How_to">Nasıl Yapılır Rehberi'ne</a> bakın.</p>

<h2 id="CSSde_hata_ayıklama_sorunları">CSS'de hata ayıklama sorunları</h2>

<p>DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.</p>

<h3 id="Sorundan_bir_adım_uzaklaşın">Sorundan bir adım uzaklaşın</h3>

<p>Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.</p>

<h3 id="HTML_ve_CSS_kodların_geçerli_mi">HTML ve CSS kodların geçerli mi?</h3>

<p>Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.</p>

<ul>
 <li><a href="https://jigsaw.w3.org/css-validator/">CSS doğrulayıcı</a></li>
 <li><a href="https://validator.w3.org/">HTML doğrulayıcı</a></li>
</ul>

<h3 id="Nitelik_ve_değer_test_ettiğin_tarayıcı_tarafından_destekleniyor_mu">Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?</h3>

<p>Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.</p>

<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>

<p>MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.</p>

<p>{{Compat("css.properties.shape-outside")}}</p>

<h3 id="CSSini_geçersiz_kılan_başka_bir_etken_mi_var">CSS'ini geçersiz kılan başka bir etken mi var?</h3>

<p>Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.</p>

<h3 id="İndirgenmiş_test_senaryosu">İndirgenmiş test senaryosu</h3>

<p>Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.</p>

<p>İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.</p>

<p>İndirgenmiş bir test senaryosu oluşturmak:</p>

<ol>
 <li>Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. <a href="https://codepen.io/">CodePen</a> gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.</li>
 <li>JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.</li>
 <li>Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.</li>
 <li>Sorunu etkilemeyen tüm CSS'leri kaldırın.</li>
</ol>

<p>Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.</p>

<p>Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.</p>

<p>Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın <a href="https://bugzilla.mozilla.org">bugzilla</a> sitesi).</p>

<p>CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>

<h2 id="Bu_kısımda">Bu kısımda</h2>

<ol>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
  <ul>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li>
   <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
  </ul>
 </li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
 <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
</ol>