chore: highlight effect in tree (#17835)

Another QoL improvement to `log_effect_tree` — if you pass an array of
effects as the second argument, it will highlight them in the tree. It
will also italicise any effects that currently have the `INERT` flag.

Author: Rich-Harris

packages/svelte/src/internal/client/dev/debug.js

@@ -68,11 +68,12 @@ function effect_label(effect, append_effect = false) {
 
 	return label;
 }
+
 /**
- *
  * @param {Effect} effect
+ * @param {Effect[]} highlighted
  */
-export function log_effect_tree(effect, depth = 0, is_reachable = true) {
+export function log_effect_tree(effect, highlighted = [], depth = 0, is_reachable = true) {
 	const flags = effect.f;
 	let label = effect_label(effect);
 
@@ -86,6 +87,14 @@ export function log_effect_tree(effect, depth = 0, is_reachable = true) {
 		styles.push(`color: red`);
 	}
 
+	if ((flags & INERT) !== 0) {
+		styles.push('font-style: italic');
+	}
+
+	if (highlighted.includes(effect)) {
+		styles.push('background-color: yellow');
+	}
+
 	// eslint-disable-next-line no-console
 	console.group(`%c${label} (${status})`, styles.join('; '));
 
@@ -131,7 +140,7 @@ export function log_effect_tree(effect, depth = 0, is_reachable = true) {
 
 	let child = effect.first;
 	while (child !== null) {
-		log_effect_tree(child, depth + 1, child_is_reachable);
+		log_effect_tree(child, highlighted, depth + 1, child_is_reachable);
 		child = child.next;
 	}