Chrome’da Öğeyi İncele Aracını Nasıl Kullanılır: Eksiksiz Bir Geliştirici Rehberi

Google Chrome’daki Öğeyi İncele aracı, Chrome DevTools’a yönelik tarayıcı tabanlı bir arayüzdür; Chrome DevTools, doğrudan tarayıcıya yerleştirilmiş hata ayıklama, profil oluşturma ve canlı düzenleme yardımcı programlarından oluşan bir pakettir. Bu araç, sunucuya veya kaynak dosyalara dokunmadan bir sayfanın HTML yapısını, CSS kurallarını ve JavaScript yürütmesini gerçek zamanlı olarak okumanıza ve değiştirmenize olanak tanır.

Web geliştiricileri, ön uç mühendisleri ve QA test uzmanları için bu araç, “bir şeyler bozuk görünüyor”dan “tam olarak nedenini biliyorum”a giden en hızlı yoldur. Bu kılavuz, tüm önemli panelleri, pratik iş akışlarını ve sıradan kullanıcıları uzman kullanıcılardan ayıran göze çarpmayan teknikleri kapsamaktadır.

Chrome DevTools Nedir ve Öğeyi İncele Nereye Uyar?

Chrome DevTools, her Chromium tabanlı tarayıcıya gömülü bir geliştirici yardımcı programları koleksiyonudur. Elements paneli — çoğu insanın “Öğeyi İncele” derken kastettiği şey — yaklaşık bir düzine özel panelden yalnızca biridir. Birlikte DOM incelemesi, JavaScript hata ayıklama, ağ profili oluşturma, performans alev grafikleri, bellek yığın anlık görüntüleri ve erişilebilirlik denetimi konularını kapsamaktadırlar.

Öğeyi İncele’nin çok daha büyük bir araç setine giriş noktası olduğunu anlamak, onu nasıl kullandığınızı değiştirir. Bir düzen hatası Elements panelinde başlayabilir, Computed sekmesinde CSS geçersiz kılma kontrolü gerektirebilir ve tarayıcıdan çıkmadan Network panelinde bir ağ şelalesi analiziyle sona erebilir.

Chrome’da Öğeyi İncele Aracı Nasıl Açılır

Chrome dört farklı yöntem sunar. Her biri farklı bir iş akışı için optimize edilmiştir.

Yöntem 1: Sağ Tık Bağlam Menüsü (En Hassas)

İncelemek istediğiniz belirli öğeye doğrudan sağ tıklayın. Bağlam menüsünden İncele‘yi seçin. Chrome, DevTools’u Elements paneli etkin olarak açar ve tam olarak o DOM düğümü zaten seçili ve görünür hâlde olur. Bu, HTML ağacında manuel olarak arama yapmadan doğrudan belirli bir öğeye atlamanın en hızlı yoludur.

Yöntem 2: Klavye Kısayolları (Uzman Kullanıcılar için En Hızlı)

Aradaki fark önemlidir: Ctrl+Shift+I, DevTools’u en son bıraktığınız durumda açar. Ctrl+Shift+C ise öğe seçiciyi hemen etkinleştirir ve sayfadaki herhangi bir öğeye tıklayarak doğrudan o öğenin DOM düğümüne atlamanızı sağlar.

Yöntem 3: Chrome Uygulama Menüsü

Sağ üst köşedeki üç noktalı menüye gidin, ardından Diğer araçlar > Geliştirici Araçları‘na gidin. Bu en verimsiz yöntemdir, ancak klavye kısayolları başka bir uygulama tarafından yeniden eşlendiğinde kullanışlıdır.

Yöntem 4: Adres Çubuğu (Az Kullanılan)

Adres çubuğuna about:blank yazın, DevTools’u açın, ardından hedef URL’nize gidin. Bu yöntem, sayfa yüklenmeyi tamamlamadan önce tetiklenen istekler de dahil olmak üzere ağ isteklerini ilk bayttan itibaren yakalar; sayfa yüklendikten sonra DevTools’u açarsanız kaybolan yönlendirme zincirlerini veya erken aşama kaynak getirmelerini hata ayıklamak için kullanışlıdır.

DevTools Panel Mimarisi

DevTools açıldığında sekmeli bir arayüz görürsünüz. Her sekme bağımsız bir araçtır. İşte işlevsel bir döküm:

Elements Panelinde Çalışmak

DOM Ağacında Gezinme

Elements paneli, ham HTML kaynağını değil, canlı DOM’u işler. Bu kritik bir ayrımdır. React, Vue veya Angular gibi JavaScript çerçeveleri, ilk HTML ayrıştırıldıktan sonra DOM’u sıklıkla değiştirir. Elements panelinde gördükleriniz, belge nesne modelinin mevcut durumunu yansıtır; bu durum, view-source:‘ın size gösterdiğinden önemli ölçüde farklı olabilir.

Düğümleri genişletmek ve daraltmak için ok tuşlarını kullanın. Tüm bir alt ağacı tek seferde genişletmek için bir açıklama üçgenine tıklarken Alt (Windows/Linux) veya Option (macOS) tuşunu basılı tutun; bu, derin iç içe geçmiş bileşen ağaçlarıyla çalışırken vazgeçilmezdir.

HTML’yi Gerçek Zamanlı Düzenleme

Herhangi bir metin düğümüne, öznitelik değerine veya etiket adına çift tıklayarak satır içinde düzenleyin. Onaylamak için Enter tuşuna basın. Bir düğümün tam dış HTML’sini düzenlemek için sağ tıklayın ve HTML olarak düzenle‘yi seçin. Bu, tüm HTML parçalarını yapıştırabileceğiniz çok satırlı bir düzenleyici açar.

Pratik örnek — bir başlık değişikliğini test etme:

<!-- Original -->
<h1 class="hero-title">Welcome to My Site</h1>

<!-- Edited inline to test copy -->
<h1 class="hero-title">Start Your Free Trial Today</h1>

Değişiklikler tarayıcı oturumunuzla sınırlıdır. Sayfayı yenilemek tüm değişiklikleri atar. Bu, Elements panelini deneme için güvenli kılar; burada düzenleme yaparak yanlışlıkla bir üretim sitesini bozamazsınız.

Styles Bölmesinde CSS Düzenleme

Styles bölmesi (Elements panelinin sağ tarafı), seçili öğeye uygulanan her CSS kuralını özgüllük sırasına göre gösterir. Geçersiz kılınan kurallar üstü çizili olarak görünür.

Bir özelliği değiştirmek için değerine tıklayın ve yeni bir değer yazın. Yeni bir bildirim eklemek için herhangi bir kural bloğunun içinde son özellikten sonra tıklayın. Tamamen yeni bir kural eklemek için Styles bölmesi araç çubuğundaki + simgesine tıklayın; Chrome, öğenin seçicisine kapsamlı yeni bir kural oluşturur.

Örnek — arka plan rengi geçersiz kılmasını test etme:

/* Typed directly into the Styles pane */
background-color: #1a1a2e;
color: #eaeaea;

Computed alt sekmesi, basamak uygulandıktan sonra her CSS özelliğinin son çözümlenmiş değerini gösterir. Bir stil beklendiği gibi davranmadığında, Computed sekmesi tam olarak hangi kuralın kazandığını ve nereden geldiğini söyler.

Durumları Değiştirme ve Zorlama

Her CSS bildiriminin bir onay kutusu vardır. İşaretini kaldırmak, o özelliği silmeden devre dışı bırakır ve bir kuralı kaldırmanın görsel etkisini anında test etmenizi sağlar.

Etkileşimli durumlar için, sözde sınıfları zorlamak amacıyla Styles bölmesi araç çubuğundaki :hov düğmesini kullanın: :hover, :focus, :active, :visited. Bu, yalnızca fare etkileşiminde görünen stilleri hata ayıklamak için gereklidir; aksi takdirde fareyi DevTools’a taşımak hover durumunu kaldırdığından bu stilleri incelemek imkânsızdır.

Kutu Modeli Görselleştiricisi

Styles bölmesinin altında, Layout bölümü margin, border, padding ve içerik boyutları için canlı düzenlenebilir değerlere sahip görsel bir kutu modeli diyagramı gösterir. Diyagramdaki herhangi bir değere tıklayarak doğrudan düzenleyin. Bu, aralığı ayarlamanız gerektiğinde ilgili CSS kuralını aramaktan daha hızlıdır.

HTML ve CSS Kopyalama

Zengin bir kopyalama alt menüsüne erişmek için herhangi bir DOM düğümüne sağ tıklayın:

• Öğeyi kopyala — tam dış HTML’yi kopyalar
• Seçiciyi kopyala — o öğeye giden bir CSS seçici yolu oluşturur
• JS yolunu kopyala — doğrudan Console’a yapıştırabileceğiniz bir document.querySelector(...) ifadesi oluşturur
• XPath’i kopyala / Tam XPath’i kopyala — Selenium veya Playwright gibi test çerçeveleriyle kullanım için

Console Panelinde Çalışmak

Console, sayfanın window bağlamına doğrudan erişimi olan tam bir JavaScript REPL’dir. Sayfadaki her değişken, işlev ve DOM düğümüne buradan erişilebilir.

Pratik Console Komutları

DOM öğelerini sorgulama ve değiştirme:

// Select an element and log it
const hero = document.querySelector('.hero-title');
console.log(hero.textContent);

// Modify a style property
document.body.style.backgroundColor = '#0d0d0d';

// Count all images on the page
document.querySelectorAll('img').length;

Çerezleri ve depolamayı inceleme:

// Read all cookies
document.cookie;

// Read a localStorage value
localStorage.getItem('user_preferences');

$_ kısayolu, son değerlendirilen ifadenin değerini ifade eder. $0 ise Elements panelinde o anda seçili olan DOM düğümünü ifade eder; bu, iki panel arasında güçlü bir köprüdür.

// After selecting a node in Elements panel:
$0.classList.toggle('hidden');

Console Filtreleme ve Günlük Seviyeleri

Yalnızca Errors, Warnings, Info veya Verbose mesajlarını göstermek için filtre çubuğunu kullanın. Büyük uygulamalarda konsol gürültüyle dolup taşar. Yalnızca Errors olarak filtrelemek, bir sayfa yüklemesinde gerçekte neyin bozuk olduğunu belirlemenin en hızlı yoludur.

Cihaz Araç Çubuğuyla Mobil Cihazları Simüle Etme

Duyarlı tasarım moduna girmek için Cihaz Araç Çubuğunu Değiştir simgesine (Ctrl+Shift+M / Cmd+Shift+M) tıklayın. Bu, yalnızca görünüm alanını yeniden boyutlandırmaktan fazlasını yapar.

Cihaz emülatörünün gerçekte değiştirdikleri:

• Görünüm alanı boyutları ve cihaz piksel oranı (window.devicePixelRatio)
• Kullanıcı aracısı dizesi (sunucuya bildirilen ve JavaScript aracılığıyla erişilebilen)
• Dokunma olayı türü (fare olayları dokunma olaylarıyla değiştirilir)
• Ağ kısıtlama ön ayarı (isteğe bağlı, ancak yapılandırılabilir)

Tam özelliklerini uygulamak için açılır listeden bir cihaz seçin. Özel test için Duyarlı modunu kullanın ve görünüm alanı tutamaçlarını sürükleyin ya da genişlik/yükseklik alanlarına tam piksel boyutlarını yazın.

Göze çarpmayan bir tuzak: Cihaz emülatörü CPU performansını taklit etmez. Emüle edilmiş mobil modda sorunsuz çalışıyor gibi görünen bir site, gerçek düşük kaliteli bir cihazda yine de kötü performans gösterebilir. Daha gerçekçi bir değerlendirme için CPU kısıtlaması etkin (4x veya 6x yavaşlama) olarak Performance panelini kullanın.

Sources Panelinde JavaScript Hata Ayıklama

Sources paneli tam özellikli bir hata ayıklayıcıdır. Paketlenmiş ve küçültülmüş dosyalar dahil olmak üzere sayfa tarafından yüklenen tüm JavaScript dosyalarını görüntüler.

Kesme Noktaları Ayarlama

Kesme noktası ayarlamak için Sources panelinde herhangi bir satır numarasına tıklayın. Yürütme o satıra ulaştığında tarayıcı duraklar ve mevcut kapsamı, çağrı yığınını ve tüm değişken değerlerini inceleyebilirsiniz.

Satır düzeyinin ötesinde kesme noktası türleri:

• Koşullu kesme noktaları — bir satır numarasına sağ tıklayın ve bir ifade girin; yürütme yalnızca ifade doğru olduğunda duraklar
• DOM mutasyon kesme noktaları — Elements panelinde bir DOM düğümüne sağ tıklayın ve o düğümün alt ağacı, öznitelikleri veya kaldırılması değiştiğinde duraklamak için Şurada kes‘i seçin
• XHR/Fetch kesme noktaları — bir ağ isteği URL’si bir desenle eşleştiğinde yürütmeyi durdurur
• Olay dinleyici kesme noktaları — herhangi bir tıklama, tuş basımı veya diğer DOM olaylarında duraklar

Kaynak Haritaları

Modern JavaScript genellikle dönüştürülür ve paketlenir. Kaynak haritaları, küçültülmüş üretim kodunu orijinal kaynak dosyalarıyla eşleştirir. Kaynak haritaları doğru şekilde yapılandırıldığında, Sources paneli okunamaz paketler yerine orijinal TypeScript veya ES6 modüllerinizi gösterir. Okunabilir yapı olmadan bundle.min.js görüyorsanız, kaynak haritaları ya eksiktir ya da sunulmamaktadır.

Network Paneli ile Ağ Analizi

Network panelini sayfayı yüklemeden veya yenilemeden önce açın. DevTools yalnızca panel açıkken gerçekleşen istekleri kaydeder.

Şelaleleri Okuma

Network panelindeki her satır bir HTTP isteğini temsil eder. Şelale sütunu, aşamalara ayrılmış zamanlamayı gösterir:

• Kuyruğa alma / Durdu — tarayıcı isteği göndermek için bekliyor (bağlantı sınırları, önceliklendirme)
• DNS Araması — ana bilgisayar adını çözümleme süresi
• İlk Bağlantı / SSL — TCP el sıkışması ve TLS müzakeresi
• İlk Bayta Kadar Geçen Süre (TTFB) — sunucu işleme süresi
• İçerik İndirme — yanıt gövdesini alma süresi

Uzun bir TTFB, sunucu tarafı bir soruna işaret eder; yavaş veritabanı sorguları, optimize edilmemiş arka uç kodu veya yetersiz sunucu kaynakları. Kendi altyapınızı çalıştırıyorsanız, burası sunucu tarafı metriklerle ilişkilendireceğiniz yerdir. Uygun şekilde kaynak sağlanmış bir VPS Hosting ortamına yükseltmek, paylaşımlı altyapının çözemediği TTFB sorunlarını genellikle çözer.

İstekleri Filtreleme ve İnceleme

Yalnızca belirli kaynak türlerini göstermek için filtre çubuğunu kullanın: XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm. Ayrıntı bölmesini açmak için herhangi bir istek satırına tıklayın; bu bölmede şunlar gösterilir:

• Başlıklar — önbellek kontrolü yönergeleri, içerik türü ve sunucu tanımlaması dahil istek ve yanıt başlıkları
• Önizleme — JSON, resim veya HTML yanıtlarının işlenmiş önizlemesi
• Yanıt — ham yanıt gövdesi
• Zamanlama — o belirli istek için şelale dökümü
• Çerezler — istekle gönderilen ve yanıt tarafından ayarlanan çerezler

SSL/TLS Ayrıntılarını Kontrol Etme

Network panelinde herhangi bir HTTPS isteğine tıklayın ve TLS sürümünü, şifre paketini ve sertifika zincirini görmek için ayrıntı bölmesindeki Security sekmesine gidin. Site genelinde güvenlik genel bakışı için DevTools’taki özel Security panelini kullanın. Doğru yapılandırılmış SSL Sertifikaları burada görünür; yayıncıyı, son kullanma tarihini ve sertifikanın istenen tam etki alanını kapsayıp kapsamadığını doğrulayabilirsiniz.

Application Paneli: Depolama, Önbelleğe Alma ve Servis Çalışanları

Application paneli, tarayıcının site adına depoladığı her şeye görünürlük sağlar.

Burada erişilebilen depolama türleri:

• Çerezler — tam öznitelik görünürlüğüyle (HttpOnly, Secure, SameSite, son kullanma tarihi) bireysel çerezleri görüntüleyin, düzenleyin ve silin
• localStorage / sessionStorage — anahtar-değer çiftleri; doğrudan panelde düzenlenebilir
• IndexedDB — yapılandırılmış istemci tarafı veritabanı; nesne deposuna göre göz atılabilir
• Cache Storage — servis çalışanları tarafından önbelleğe alınan kaynaklar; Aşamalı Web Uygulaması hata ayıklaması için kritik
• Servis Çalışanları — etkin servis çalışanlarını kaydedin, kaydını silin ve inceleyin; çevrimdışı modu simüle edin

Yaygın bir hata ayıklama senaryosu: Bir kullanıcı, dağıtımdan sonra eski içerik gördüğünü bildiriyor. Application paneli, eski varlık sürümünün servis çalışanı tarafından hâlâ önbelleğe alınıp alınmadığını doğrulamak ve kullanıcının zorla yenileme yapmasına gerek kalmadan bir güncellemeyi zorlamak veya önbelleği temizlemek için Cache Storage’ı incelemenize olanak tanır.

Lighthouse Paneli: Otomatik Denetim

Lighthouse, beş kategori için otomatik bir denetim çalıştırır: Performans, Erişilebilirlik, En İyi Uygulamalar, SEO ve Aşamalı Web Uygulaması. Her kategori, 0 ile 100 arasında bir puan ve belgelere doğrudan bağlantılarla madde madde bulgular üretir.

Lighthouse’u hem Mobil hem de Masaüstü modlarında çalıştırın; mobil simülasyon CPU ve ağ kısıtlaması uyguladığından puanlar önemli ölçüde farklılık gösterir. SEO denetimi, eksik meta açıklamalarını, taranabilir olmayan bağlantıları ve hatalı görünüm alanı yapılandırmasını kontrol eder. Erişilebilirlik denetimi, eksik ARIA etiketlerini, yetersiz renk kontrast oranlarını ve klavye gezinme boşluklarını işaretler.

Lighthouse bulguları, bir siteyi başlatmadan önce neyin düzeltileceğini doğrudan bildirir. cPanel ile VPS üzerinde barındırıyorsanız, pek çok performans önerisi — sıkıştırmayı etkinleştirme, önbellek başlıklarını yapılandırma, HTTP/2’yi etkinleştirme — doğrudan sunucu kontrol panelinden uygulanabilir.

Çoğu Kullanıcının Kaçırdığı Gelişmiş Teknikler

Yerel Geçersiz Kılmalarla Kalıcı Geçersiz Kılmalar

Sources panelinde Overrides sekmesine gidin. Yerel bir dizini sitenin kaynağıyla eşleştirin. DevTools, yaptığınız tüm CSS veya JavaScript düzenlemelerini o yerel dizine kaydeder ve yenileme sonrasında bile her sayfa yüklemesinde yeniden uygular. Bu, sunucuyu değiştirmeden herhangi bir web sitesi üzerinde etkili bir şekilde yerel bir yama katmanı sağlar; uzun süreli test oturumları veya değişiklik önerisi hazırlamak için kullanışlıdır.

Karanlık Modu ve Diğer Medya Sorgularını Zorlama

Rendering sekmesini açın (DevTools içindeki üç noktalı menü > Diğer araçlar > Rendering aracılığıyla erişilebilir). Burada OS ayarlarınızı değiştirmeden prefers-color-scheme: dark, prefers-reduced-motion: reduce ve diğer CSS medya özelliklerini zorlayabilirsiniz. Bu, karanlık mod uygulamalarını test etmenin doğru yoludur.

Web Yazı Tiplerini İnceleme

Application panelinde Fonts altında Chrome, sayfa tarafından yüklenen her yazı tipi dosyasını ve gerçekte hangi gliflerin kullanıldığını listeler. Bu, değişken bir yazı tipinin gereksiz yere yüklenip yüklenmediğini veya bir yazı tipi alt kümesinin yük boyutunu azaltıp azaltamayacağını belirlemeye yardımcı olur.

Ağ ve CPU’yu Kısıtlama

Network panelinde Slow 3G, Fast 3G simüle etmek veya özel bir profil tanımlamak için kısıtlama açılır listesini kullanın. Performance panelinde, düşük kaliteli mobil donanımı simüle etmek için CPU kısıtlamasını etkinleştirin. Her ikisini aynı anda çalıştırmak, kısıtlı cihaz ve ağlardaki kullanıcılar için en gerçekçi performans profilini verir.

Barındırma ve Altyapı Sorunlarını Teşhis Etmek için DevTools

Öğeyi İncele araç seti yalnızca ön uç çalışmaları için değildir. Kullanıcı deneyimini doğrudan etkileyen altyapı düzeyindeki sinyalleri ortaya çıkarır.

DevTools aracılığıyla sunucu yapılandırmasını teşhis etme:

• Network panelindeki Yanıt başlıkları, gzip/Brotli sıkıştırmasının etkin olup olmadığını (content-encoding: br), HTTP/2 veya HTTP/3’ün kullanımda olup olmadığını ve önbellek başlıklarının doğru ayarlanıp ayarlanmadığını ortaya koyar
• Sürekli olarak 600ms’nin üzerindeki TTFB değerleri, sunucu tarafı darboğazları olduğunu gösterir; yetersiz kaynaklı barındırma, eksik opcode önbelleğe alma veya optimize edilmemiş veritabanı sorguları
• Console’daki Karışık içerik uyarıları (Mixed Content: The page was loaded over HTTPS...), HTTPS sayfasında yüklenen HTTP kaynaklarını gösterir; tarayıcılar bunları engeller ve sunucu tarafı düzeltmeler gerektirir
• Security panelinde görünen Sertifika hataları, yanlış yapılandırılmış SSL Sertifikalarına veya süresi dolmuş ara sertifikalara işaret eder

Birden fazla siteyi veya istemci ortamını yönetiyorsanız, bir Dedicated Servers kurulumu size sunucu başlıkları, TLS yapılandırması ve sıkıştırma ayarları üzerinde tam kontrol sağlar; bunların hepsini daha sonra bir barındırma sağlayıcısının varsayılanlarına güvenmeden doğrudan DevTools aracılığıyla doğrulayabilirsiniz.

Karşılaştırma: Kullanım Alanına Göre Chrome DevTools Panelleri

Pratik Karar Matrisi: Önce Hangi Paneli Açmalı

Belirti: Sayfa görsel olarak bozuk görünüyor

Elements panelini açın. Geçersiz kılınan veya eksik kurallar için Styles bölmesini kontrol edin. Beklenmedik çözümlenmiş değerler için Computed sekmesini kontrol edin. Sözde sınıf durumlarını zorlamak için :hov kullanın.

Belirti: JavaScript özelliği çalışmıyor

Önce Console’u açın. Yakalanmamış hataları arayın. Yoksa Sources’ı açın ve ilgili işlev giriş noktasına bir kesme noktası ayarlayın.

Belirti: Sayfa yavaş yükleniyor

Yenilemeden önce Network panelini açın. En büyük kaynakları ve en uzun TTFB değerlerini belirleyin. Önceliklendirilmiş öneriler için Lighthouse Performance denetimiyle çapraz referans yapın.

Belirti: Form gönderimi veya API çağrısı başarısız oluyor

Network panelini açın. XHR veya Fetch ile filtreleyin. Başarısız isteği bulun, istek başlıklarını, yükü ve yanıt gövdesini inceleyin. CORS hataları için Console’u kontrol edin.

Belirti: Önbelleğe alınan içerik güncellenmiyor

Application panelini açın. Cache Storage ve Servis Çalışanlarını kontrol edin. Kaynağa ait tüm depolanan verileri silmek için Site verilerini temizle düğmesini kullanın.

Temel Teknik Çıkarımlar

• DevTools’ta yapılan tüm değişiklikler yalnızca oturum içindir — Sources panelinde Yerel Geçersiz Kılmalar yapılandırılmadıkça sayfa yenilemesi bunları atar
• Elements paneli, HTML kaynağını değil canlı DOM’u gösterir — JavaScript ile işlenen içerik burada görünür ancak view-source:‘da görünmez
• Ctrl+Shift+C öğe seçiciyi doğrudan etkinleştirir; Ctrl+Shift+I son kullanılan paneli açar
• Console’daki $0 her zaman Elements panelinde o anda seçili olan DOM düğümünü ifade eder
• 600ms’nin üzerindeki TTFB değerleri sürekli olarak ön uç sorunlarını değil, sunucu tarafı sorunları olduğunu gösterir
• Cihaz emülatörü görünüm alanını, kullanıcı aracısını ve dokunma olaylarını değiştirir — CPU performansını taklit etmez
• Lighthouse puanları, uygulanan kısıtlama nedeniyle Mobil ve Masaüstü modları arasında farklılık gösterir — her zaman her ikisini de çalıştırın
• :hov düğmesi aracılığıyla sözde sınıfları zorlamak (:hover, :focus), etkileşim durumlarını incelemenin tek güvenilir yoludur
• Sources panelinin üretim derlemelerinde okunabilir kod göstermesi için kaynak haritalarının paketlerle birlikte sunulması gerekir
• Application paneli, servis çalışanı ve önbellekle ilgili eski içerik sorunlarını teşhis etmek için yetkili kaynaktır

Üretim iş yüklerini çalıştıran ekipler için DevTools tarafından ortaya çıkarılan bilgiler — sıkıştırma başlıkları, TTFB, TLS yapılandırması, önbellek yönergeleri — yalnızca sunucu ortamı üzerinde kontrolünüz varsa uygulanabilir. VPS Hosting ve Dedicated Servers, DevTools’un teşhis ettiği şeyleri uygulamak için gereken yönetici erişimini sağlar. Yönetilen VPS Control Panels, derin sunucu yönetimi bilgisi gerektirmeden bu düzeltmeleri uygulamayı daha da basitleştirir.

SSS

Elements panelinde HTML veya CSS düzenlemek gerçek web sitesini değiştirir mi?

Hayır. Tüm değişiklikler tarayıcı oturumunuzla sınırlıdır ve yalnızca işlenen sayfanın kopyasına uygulanır. Değişiklikler yenileme sırasında atılır. Kalıcı değişiklikler yapmak için kaynak dosyaları sunucuda veya kod tabanınızda düzenlemeniz gerekir.

Elements paneli neden sayfa kaynağından farklı HTML gösteriyor?

Elements paneli, JavaScript yürütüldükten sonra canlı DOM’u görüntüler. view-source:, herhangi bir istemci tarafı işleme gerçekleşmeden önce sunucu tarafından teslim edilen ham HTML’yi gösterir. Tek sayfalı uygulamalar ve JavaScript ağırlıklı siteler, ikisi arasında önemli farklılıklar gösterecektir.

Fareyi hareket ettirdiğimde kaybolan bir öğeyi nasıl inceleyebilirim?

Elements panelinde, görünümü tetikleyen üst öğeyi seçin. Ardından Styles bölmesindeki :hov düğmesine tıklayın ve :hover‘ı işaretleyin. Bu, DevTools’ta gezinirken hover durumunun etkin kalmasını zorlar. Alternatif olarak, öğe göründüğü anda yürütmeyi duraklatmak için öğe üzerinde bir DOM mutasyon kesme noktası ayarlayın.

Network panelinde yüksek bir TTFB değeri ne anlama gelir?

İlk Bayta Kadar Geçen Süre, sunucunun isteği aldıktan sonra yanıt göndermeye başlamasının ne kadar sürdüğünü ölçer. Sürekli olarak yüksek bir TTFB (600ms’nin üzerinde), sunucu tarafı darboğazları olduğunu gösterir: yavaş veritabanı sorguları, eksik PHP opcode önbelleğe alma, yetersiz RAM veya aşırı yüklenmiş paylaşımlı bir sunucuda CPU çekişmesi. Bu bir ön uç sorunu değildir ve CSS veya JavaScript optimizasyonlarıyla düzeltilemez.

HTTPS trafiğini ve sertifika ayrıntılarını incelemek için Chrome DevTools’u kullanabilir miyim?

Evet. DevTools’taki Security paneli, mevcut sayfa için TLS sürümünü, şifre paketini, sertifika yayıncısını ve son kullanma tarihini gösterir. Bireysel istek düzeyindeki sertifika ayrıntılarına, Network panelinde bir isteğe tıklayarak ve ayrıntı bölmesindeki Security sekmesini seçerek erişilebilir.