diff --git a/packages/svelte/src/internal/client/dev/debug.js b/packages/svelte/src/internal/client/dev/debug.js index 22c4de1179..55b7247c23 100644 --- a/packages/svelte/src/internal/client/dev/debug.js +++ b/packages/svelte/src/internal/client/dev/debug.js @@ -72,15 +72,22 @@ function effect_label(effect, append_effect = false) { * * @param {Effect} effect */ -export function log_effect_tree(effect, depth = 0) { +export function log_effect_tree(effect, depth = 0, is_reachable = true) { const flags = effect.f; - const label = effect_label(effect); + let label = effect_label(effect); let status = (flags & CLEAN) !== 0 ? 'clean' : (flags & MAYBE_DIRTY) !== 0 ? 'maybe dirty' : 'dirty'; + let styles = [`font-weight: ${status === 'clean' ? 'normal' : 'bold'}`]; + + if (status !== 'clean' && !is_reachable) { + label = `⚠️ ${label}`; + styles.push(`color: red`); + } + // eslint-disable-next-line no-console - console.group(`%c${label} (${status})`, `font-weight: ${status === 'clean' ? 'normal' : 'bold'}`); + console.group(`%c${label} (${status})`, styles.join('; ')); if (depth === 0) { const callsite = new Error().stack @@ -120,9 +127,11 @@ export function log_effect_tree(effect, depth = 0) { } } + var child_is_reachable = is_reachable && ((flags & BRANCH_EFFECT) === 0 || (flags & CLEAN) === 0); + let child = effect.first; while (child !== null) { - log_effect_tree(child, depth + 1); + log_effect_tree(child, depth + 1, child_is_reachable); child = child.next; }