🔍

Debug Panel Yapı Analizi

?debug=1 Parametresi ile Açılan Performans İzleme Sistemi

📅 19 Şubat 2026 ⚡ Performance Debug v3

📝 Basit Anlatım (Herkes İçin)

🎯 Debug Penceresi Nedir?

Muzibu'da müzik çalarken arka planda neler olduğunu gösteren bir geliştirici aracı. Tıpkı bir arabanın gösterge paneli gibi, sistemin performansını, bellek kullanımını ve olası sorunları anlık olarak izleyebilirsiniz.

🚀 Nasıl Açılır?

https://muzibu.com/?debug=1

Site adresinin sonuna ?debug=1 parametresini ekleyerek debug panelini otomatik açabilirsiniz.

👁️ Neler Gösterir?

💾 Bellek Kullanımı

Sistemin ne kadar RAM (bellek) kullandığını gösterir. Bellek dolduğunda gecikmelar başlar.

🎵 Şu Anki Şarkı

Çalmakta olan şarkının bilgilerini ve oynatma durumunu gösterir.

⏱️ Gecikme Tespiti

Sistemde 100ms'den uzun gecikmelar olduğunda yakalar ve nedenini analiz eder.

📊 Oturum İstatistikleri

Kaç şarkı değişimi yapıldığı, kaç gecikme olduğu gibi sayısal verileri gösterir.

🔧 Ne İşe Yarar?

✓ Sorun Tespiti: Müzik çalarken gecikme, gecikme gibi sorunların kaynağını bulmaya yardımcı olur.
✓ Performans İzleme: Bellek kullanımını takip eder, bellek sızıntılarını (memory leak) tespit eder.
✓ Detaylı Raporlama: Tüm verileri panoya kopyalayarak geliştiricilerle paylaşabilirsiniz.

💡

Önemli Not

Bu panel genellikle geliştiriciler için tasarlanmıştır. Normal kullanıcıların bu paneli açmasına gerek yoktur. Ancak bir sorun yaşadığınızda ve destek ekibiyle iletişime geçtiğinizde, size "debug raporu alın" denilirse bu paneli açıp "Verileri Kopyala" butonuna basarak bilgileri paylaşabilirsiniz.

🔧 Teknik Detaylar (Geliştiriciler İçin)

🏗️ Mimari Genel Bakış

Ana Dosyalar

app.blade.php Layout - Debug ayarlarını yükler

performance-debug.js Debug sistemi - v3 (1478 satır)

📍 Dosya Konumu


                                        /public/themes/muzibu/js/player/features/performance-debug.js

📦 Versiyon


                                        MuzibuPerformanceDebug v3

⚡ Tetikleme Mekanizması

1️⃣ Layout Konfigürasyonu (app.blade.php:93-100)

<script>
    // Player debug level from ENV (0=off, 1=root only, 2=all users)
    window.PLAYER_DEBUG_LEVEL = {{ (int) config('app.player_debug', 0) }};

    // Is current user a root user? (for debug level 1 check)
    window.isRootUser = {{ auth()->check() && auth()->user()->hasRole('root') ? 'true' : 'false' }};
</script>
                                

2️⃣ Script Yükleme (app.blade.php:104)

<script src="{{ versioned_asset('themes/muzibu/js/player/features/performance-debug.js') }}"></script>
                                

3️⃣ URL Parametresi Kontrolü (performance-debug.js:1448-1452)

function init() {
    setupEventListeners();
    const params = new URLSearchParams(window.location.search);
    if (params.get('debug') === '1' || params.get('perf') === '1') {
        setTimeout(show, 1000); // 1 saniye sonra paneli aç
    }
}
                                

Kullanım: ?debug=1 veya ?perf=1 parametresi ile panel otomatik açılır.

📊 Ana Veri Yapıları

📈 metrics

• Anlık bellek kullanımı

• Cache boyutu

• Audio element sayısı

• Blob URL sayısı

📜 history

• Oturum başlangıcı

• Peak değerler

• Şarkı değişim sayısı

• Crossfade/Fallback sayıları

📝 activityLog

• Son 100 aktivite (rolling buffer)

• Her olay timestamp + detay

• Bellek ve audio sayısı snapshot

⏱️ freezeSnapshots

• Son 20 gecikme kaydı

• Tam sistem durumu

• Root cause analizi

• Gecikme öncesi aktiviteler

🔄 transitionLogs

• Son 30 şarkı geçişi

• Before/After state

• Bellek değişimi

• Başarı durumu

⏱️ memoryTimeline

• Son 120 saniye bellek

• Saniyede 1 kayıt

• Trend analizi için

• GC (Garbage Collection) tespiti

⏱️ Gecikme Tespit Sistemi

PerformanceObserver API Kullanımı

const observer = new PerformanceObserver(function(list) {
    for (const entry of list.getEntries()) {
        if (entry.duration > 100) { // 100ms+ = ciddi gecikme
            captureFreeze(Math.round(entry.duration), 'longtask');
        } else if (entry.duration > 50) {
            logActivity('JANK', `${Math.round(entry.duration)}ms gecikme`);
        }
    }
});
observer.observe({ entryTypes: ['longtask'] });
                                

Eşik Değerleri

50-100ms: JANK (hafif takılma)

100ms+: FREEZE (ciddi gecikme)

Snapshot İçeriği

• Tam sistem durumu

• Son 20 aktivite

• Root cause analizi

• Çözüm önerileri

🔍 Root Cause Analiz Sistemi

Gecikme tespit edildiğinde analyzeFreezeRootCause() fonksiyonu çalışır ve 10 farklı sebep kategorisini kontrol eder:

1. Crossfade İşlemi

2 audio element aynı anda decode (Güvenilirlik: %85)

2. Şarkı Geçişi

3sn içinde geçiş varsa (Güvenilirlik: %80)

3. Yüksek Bellek

>%80 kullanım = GC çalışıyor (Güvenilirlik: %90)

4. Audio Element Birikimi

>2 audio element = temizlik yok (Güvenilirlik: %75)

5. HLS Buffer

Segment decode sorunu (Güvenilirlik: %70)

6. Hızlı Şarkı Değişimi

Son 10 aktivitede 2+ geçiş (Güvenilirlik: %65)

Analiz Çıktısı

• primaryCause: En olası sebep

• confidence: Güvenilirlik yüzdesi (0-100)

• explanation: Detaylı açıklama

• recommendation: Çözüm önerisi

• allCauses: Diğer olası sebepler (güvenilirlik sıralı)

🎨 Debug Panel Özellikleri

Panel Konumu ve Tasarım

position: fixed;
top: 10px;
right: 10px;
width: 360px;
max-height: 85vh;
background: rgba(15, 23, 42, 0.97);
backdrop-filter: blur(10px);
z-index: 99999;
                                

Gerçek Zamanlı Güncelleme

updateInterval = setInterval(updatePanel, 1000); // Her saniye güncelle

Panel açıldığında her saniye updatePanel() fonksiyonu çalışır ve tüm metrikler yenilenir.

Buton Aksiyonları

📋 Verileri Kopyala

copyReport()

🗑️ Cache Temizle

clearCache()

♻️ GC Zorla

forceGC()

🔌 Public API (Console Kullanımı)

Debug sistemi window.MuzibuPerformanceDebug global objesi olarak erişilebilir. Aynı zamanda window.perfDebug alias'ı da mevcut.

perfDebug.show()

Paneli açar

perfDebug.hide()

Paneli kapatır

perfDebug.toggle()

Aç/Kapat toggle

perfDebug.copyReport()

Raporu kopyalar

perfDebug.getMetrics()

Anlık metrikleri döner

perfDebug.getState()

Tam sistem durumu

perfDebug.getFreezes()

Gecikme kayıtları

perfDebug.getTransitions()

Şarkı geçiş logları

Örnek Kullanım

// Console'da debug panelini aç
MuzibuPerformanceDebug.show();

// Tüm gecikmeları göster
console.table(perfDebug.getFreezes());

// Son 10 aktiviteyi göster
console.log(perfDebug.getActivity().slice(-10));

// Anlık bellek kullanımı
const metrics = perfDebug.getMetrics();
console.log(`Bellek: ${metrics.memory.used}MB`);
                                

🎧 Event Listener Sistemi

Debug sistemi player'dan gelen custom event'leri dinler ve loglar:

player:songChange

Şarkı değiştiğinde

player:play

Çalma başladığında

player:pause

Duraklatıldığında

player:error

Hata oluştuğunda

player:crossfadeStart

Crossfade başladığında

player:hlsError

HLS hatası oluştuğunda

player:preloadSuccess

Preload başarılı olduğunda

player:fallback

MP3'e geçildiğinde

📈 Bellek Trend Analizi

analyzeMemoryTrend() fonksiyonu bellek zaman serisini analiz eder ve şunları tespit eder:

GC (Garbage Collection) Tespiti

• 10MB+ ani düşüşler = GC

• Ortalama GC temizliği hesaplanır

• GC sayısı loglanır

Testere Dişi Paterni

• Sık GC + yükseliş/düşüş döngüsü

• Peak - Dip > 20MB

⚠️ Bellek sızıntısı belirtisi!

Trend Kategorileri

📈 Yükseliyor (sızıntı)

📉 Düşüyor

📊 Testere Dişi (sık GC)

➡️ Stabil

📋 Rapor Formatı

generateReport() fonksiyonu şu bölümleri içeren detaylı bir metin rapor oluşturur:

📱

Cihaz Bilgileri

Platform, CPU, RAM, ekran, bağlantı

💾

Bellek Durumu

Kullanılan, peak, limit, yüzde

📊

Oturum İstatistikleri

Şarkı değişimi, crossfade, fallback, gecikme sayıları

🔊

Audio Element Detayları

Her audio'nun ID, src, time, state, buffer bilgisi

⏱️

Gecikme Olayları

Her gecikmenın süresi, root cause analizi, öneriler

🔄

Şarkı Geçişleri

Method, süre, bellek değişimi, başarı durumu

📈

Bellek Geçmişi

Son 30 saniye bellek timeline

📋

Son Aktiviteler

Son 30 aktivite timestamp ile

💡 Rapor Kullanımı

Kullanıcı bir sorun yaşadığında "Verileri Kopyala" butonuna basarak tüm debug bilgilerini alabilir ve destek ekibiyle paylaşabilir. Rapor metin formatında olduğu için e-posta, chat, issue tracker gibi her ortamda paylaşılabilir.

🎯 Özet

✓ Debug paneli ?debug=1 parametresi ile otomatik açılır.

✓ Gerçek zamanlı bellek, audio element, cache takibi yapar.

✓ 100ms+ gecikmeları tespit eder ve root cause analizi yapar.

✓ Şarkı geçişlerini detaylı loglar (before/after state, bellek değişimi).

✓ Bellek trend analizi yapar (GC tespiti, testere dişi paterni).

✓ Tüm verileri kopyalanabilir metin raporu olarak sunar.

✓ Console'dan perfDebug API'si ile erişilebilir.

19 Şubat 2026 • Muzibu.com