Hata Ayıklama

Debug akışı görünür dokümanda tek sayfada toplanmıştır. Bu bölümde yalnızca kullanıcıya doğrudan verdiğiniz runtime değerleri anlatılır:

debug
map
performance

<link rel="stylesheet" href="./styles.luis" data-luis="debug">

Hangi Değer Ne İşe Yarar?

`data-luis` değeri	Açtığı şey	Ne zaman kullanılır
`debug`	warning logları, import tanısalları ve rule map yayını	Derleme sırasında neyin yanlış gittiğini görmek istediğinizde
`map`	DevTools'ta `.luis` kaynağına dönen source map bilgisi	Inspect ederken kuralın hangi kaynaktan geldiğini görmek istediğinizde
`performance`	compile, import ve observed süre logları	Hangi kaynakların yavaş olduğunu anlamak istediğinizde

Birden fazla değer birlikte verilebilir:

<link rel="stylesheet" href="./styles.luis" data-luis="debug,map,performance">

`debug`

debug, derleme sırasında oluşan tanısal bilgileri konsola taşır.

<link rel="stylesheet" href="./styles.luis" data-luis="debug">

Ne Görürsünüz?

compile warning'leri
.luis import tanısalları
observed event logları
window.__LentyStyleRuleMap

Warning Örneği

[LentyStyle][runtime][warn][RUN0013] [debug] inline data-luis style: missing semicolon after declaration (line 4, code: missing-semicolon).

Import Tanısalı Örneği

[LentyStyle][runtime][info][RUN0014] [debug] Loaded imported .luis: https://example.com/styles/tokens.luis (from https://example.com/styles/app.luis)
[LentyStyle][runtime][info][RUN0015] [debug] Import diagnostics: https://example.com/styles/tokens.luis (from https://example.com/styles/app.luis; 248 chars; 1.42 ms; cache miss; parent: https://example.com/styles/app.luis)

Observed Event Logu

debug açıkken her observed olay için ayrıca bir log satırı üretilir:

[LentyStyle][runtime][info][RUN0021] [debug] Observed mutation: https://example.com/styles/app.luis (tokens: 4, affected: 2, active: 3)

event alanı şu değerlerden birini alabilir:

Event	Ne zaman tetiklenir
`upsert`	Kaynak ilk kez yüklenip observed kuralları yerleştirildiğinde
`mutation`	DOM mutation observed kural eşleşmesini değiştirdiğinde
`mutation-noop`	DOM mutation geldi ama eşleşme değişmediğinde
`media-change`	Media query durumu değişip kural listesini güncellediğinde
`media-noop`	Media query değişti ama aktif kural seti aynı kaldığında
`lazy-enter`	Lazy gözlemleme ile bir kural viewport'a girdiğinde

Rule Map

debug veya map açıkken runtime önce bir log satırı yayar:

[LentyStyle][runtime][info][RUN0022] [debug] Debug rule map ready: window.__LentyStyleRuleMap["luis-style-1"]

Ardından compiled style tag'e ait selector ve satır bilgisi şu alanda erişilebilir hale gelir:

const map = window.__LentyStyleRuleMap['luis-style-1']

Bu veri özellikle:

inspect edilen kuralın nereden geldiğini bulmak
selector bazında satır eşleştirmesi yapmak
üretilen CSS ile .luis kaynağını yan yana okumak

için kullanışlıdır.

`map`

map, üretilen CSS'i DevTools tarafında tekrar .luis kaynağına bağlar.

<link rel="stylesheet" href="./styles.luis" data-luis="map">

Ne Sağlar?

CSS sonuna source map bilgisi eklenir
sourceURL footer eklenir
DevTools'ta kuralın hangi .luis kaynaktan geldiği görünür

Nasıl Kullanılır?

Bu mod özellikle şu durumda işe yarar:

bir elementi inspect edersiniz
styles panelinde gelen kuralı görürsünüz
kuralın doğrudan .luis kaynağına dönmesini istersiniz

`debug` ile İlişkisi

map, tek başına açılabilir:

<link rel="stylesheet" href="./styles.luis" data-luis="map">

Ama çoğu durumda şu kombinasyon daha kullanışlıdır:

<link rel="stylesheet" href="./styles.luis" data-luis="map,debug">

Böylece hem DevTools tarafında kaynak eşleşmesi hem de konsolda warning/tanısal akış birlikte görünür.

`performance`

performance, runtime'ın tek tek compile ve observed güncellemeleri için süre logları üretmesini sağlar.

<link rel="stylesheet" href="./styles.luis" data-luis="performance">

Temel Log Satırı

Worker üzerinden derlenen bir kaynak için örnek (tüm opsiyonel alanlar görünür):

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 1.50 ms (css: 428 chars) (mode: full) (execution: worker:warm) (timing: compile 1.12 ms, bootstrap 0.300 ms, transport 0.180 ms, features 0.050 ms, remap 0.070 ms, compose 0.050 ms, map 0.040 ms, apply 0.040 ms, total 1.50 ms) (blocks: 12/12 rendered, reused: 0; parser: 1/1 parsed, reused: 0)

Main thread üzerinden derlenen bir kaynak için:

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 1.10 ms (css: 428 chars) (mode: full) (execution: main) (timing: compile 1.10 ms, compose 0.000 ms, apply 0.100 ms, total 1.10 ms) (blocks: 12/12 rendered, reused: 0; parser: 1/1 parsed, reused: 0)

Execution değerleri: worker:warm, worker:cold, worker (state bilgisi yoksa), main. Timing alanları (compile dışındaki hepsi) yalnızca ölçülebildiğinde görünür; 1ms altı değerler 3 ondalık basamakla gösterilir.

Incremental derleme durumunda (blocks: ...) suffix de görünür — full modda bile kaç bloğun yeniden kullanıldığı raporlanır:

[LentyStyle][runtime][info][RUN0016] [performance] Compiled https://example.com/styles/app.luis in 0.40 ms (css: 428 chars) (mode: incremental) (execution: worker:warm) (timing: compile 0.40 ms, total 0.40 ms) (blocks: 2/8 rendered, reused: 6; parser: 2/8 parsed, reused: 6)

Import Logu

[LentyStyle][runtime][info][RUN0017] [performance] Compiled https://example.com/styles/tokens.luis in 0.72 ms (css: 248 chars) (imported by: https://example.com/styles/app.luis; cache: miss; parent: https://example.com/styles/app.luis)

Observed Logu

[LentyStyle][runtime][info][RUN0018] [performance] Compiled https://example.com/styles/app.luis [observed:mutation] in 0.33 ms (css: 96 chars) (observed: 3/8 active, changed: 2)

[observed:{event}] alanı upsert, mutation, mutation-noop, media-change, media-noop, lazy-enter değerlerinden birini alabilir.

Ne Zaman Kullanılır?

hangi kaynağın yavaş derlendiğini görmek istediğinizde
worker gerçekten fark yaratıyor mu diye bakarken
observed mutation yükünün ne kadar arttığını anlamak istediğinizde

Birlikte Kullanım

En yaygın kombinasyonlar:

Kullanım	Ne sağlar
`debug`	warning ve tanısal akış
`map`	DevTools'ta kaynak eşleşmesi
`performance`	süre logları
`debug,map`	hem konsol tanısalı hem inspect/debug
`debug,performance`	warning + süre takibi
`debug,map,performance`	tam debug akışı

<link rel="stylesheet" href="./styles.luis" data-luis="debug,map,performance">

Kısa Seçim Rehberi

İhtiyaç	Açmanız gereken değer
Warning görmek istiyorum	`debug`
Kural hangi `.luis` dosyasından geldi görmek istiyorum	`map`
Yavaşlık nerede görmek istiyorum	`performance`
Hepsini birlikte görmek istiyorum	`debug,map,performance`