chore: better log_effect_tree (#17833)

While working on the reactivity it's very helpful to be able to log a
snapshot of the effect tree. This PR augments the existing
`log_effect_tree` helper by marking unreachable-but-dirty effects, like
so:

<img width="333" height="415" alt="image"
src="https://github.com/user-attachments/assets/2c7501f7-b845-4271-b534-3a8be0ff62ee"
/>


(I had thought `log_inconsistent_branches` was designed to help with
this but it didn't work for me. Do we need both? cc @dummdidumm)

---------

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>

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;
 	}