use normal warning mechanism, so we can link to docs etc

packages/svelte/messages/client-warnings/warnings.md

@@ -4,6 +4,14 @@
 
 > `%binding%` (%location%) is binding to a non-reactive property
 
+## console_log_state
+
+> Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+
+When logging a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing.
+
+The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
+
 ## event_handler_invalid
 
 > %handler% should be a function. Did you mean to %suggestion%?

packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js

@@ -49,6 +49,7 @@ export function CallExpression(node, context) {
 			b.spread(
 				b.call(
 					'$.log_if_contains_state',
+					b.literal(node.callee.property.name),
 					.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
 				)
 			)

packages/svelte/src/internal/client/dev/console-log.js

@@ -1,10 +1,12 @@
 import { STATE_SYMBOL } from '../constants.js';
 import { snapshot } from '../../shared/clone.js';
+import * as w from '../warnings.js';
 
 /**
+ * @param {string} method
  * @param  {...any} objects
  */
-export function log_if_contains_state(...objects) {
+export function log_if_contains_state(method, ...objects) {
 	let has_state = false;
 	const transformed = [];
 
@@ -18,12 +20,10 @@ export function log_if_contains_state(...objects) {
 	}
 
 	if (has_state) {
+		w.console_log_state(method);
+
 		// eslint-disable-next-line no-console
-		console.log(
-			'Your console.log contained $state objects. We recommend using $inspect or $state.snapshot when logging these for better results. The snapshotted value is:\n',
-			...transformed,
-			'\nThe original value is:\n'
-		);
+		console.log('%c[snapshot]', 'color: grey', ...transformed);
 	}
 
 	return objects;

packages/svelte/src/internal/client/warnings.js

@@ -19,6 +19,19 @@ export function binding_property_non_reactive(binding, location) {
 	}
 }
 
+/**
+ * Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
+ * @param {string} method
+ */
+export function console_log_state(method) {
+	if (DEV) {
+		console.warn(`%c[svelte] console_log_state\n%cYour \`console.${method}\` contained \`$state\` proxies. Consider using \`$inspect(...)\` or \`$state.snapshot(...)\` instead`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("console_log_state");
+	}
+}
+
 /**
  * %handler% should be a function. Did you mean to %suggestion%?
  * @param {string} handler