never hoist writable vars in dev mode, fix debug statements

src/compiler/compile/Component.ts

@@ -1010,6 +1010,10 @@ export default class Component {
 					if (!d.init) return false;
 					if (d.init.type !== 'Literal') return false;
 
+					// everything except const values can be changed by e.g. svelte devtools
+					// which means we can't hoist it
+					if (node.kind !== 'const' && this.compile_options.dev) return false;
+
 					const { name } = d.id as Identifier;
 
 					const v = this.var_lookup.get(name);

src/compiler/compile/render_dom/wrappers/DebugTag.ts

@@ -59,12 +59,12 @@ export default class DebugTagWrapper extends Wrapper {
 					const variable = var_lookup.get(e.node.name);
 					return !(variable && variable.hoistable);
 				})
-				.map(e => p`${e.node.name}`);
+				.map(e => e.node.name);
 
 			const logged_identifiers = this.node.expressions.map(e => p`${e.node.name}`);
 
 			const debug_statements = b`
-				const { ${contextual_identifiers} } = #ctx;
+				${contextual_identifiers.map(name => b`const ${name} = ${renderer.reference(name)};`)}
 				@_console.${log}({ ${logged_identifiers} });
 				debugger;`;
 

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -38,7 +38,10 @@ function create_each_block(ctx) {
 			t1 = space();
 
 			{
-				const { foo, bar, baz, thing } = ctx;
+				const foo = ctx[1];
+				const bar = ctx[2];
+				const baz = ctx[3];
+				const thing = ctx[4];
 				console.log({ foo, bar, baz, thing });
 				debugger;
 			}
@@ -54,7 +57,10 @@ function create_each_block(ctx) {
 			if (changed & 1 && t0_value !== (t0_value = ctx[4].name + "")) set_data_dev(t0, t0_value);
 
 			if (changed & 15) {
-				const { foo, bar, baz, thing } = ctx;
+				const foo = ctx[1];
+				const bar = ctx[2];
+				const baz = ctx[3];
+				const thing = ctx[4];
 				console.log({ foo, bar, baz, thing });
 				debugger;
 			}

test/js/samples/debug-foo/expected.js

@@ -38,7 +38,7 @@ function create_each_block(ctx) {
 			t1 = space();
 
 			{
-				const { foo } = ctx;
+				const foo = ctx[1];
 				console.log({ foo });
 				debugger;
 			}
@@ -54,7 +54,7 @@ function create_each_block(ctx) {
 			if (changed & 1 && t0_value !== (t0_value = ctx[2].name + "")) set_data_dev(t0, t0_value);
 
 			if (changed & 2) {
-				const { foo } = ctx;
+				const foo = ctx[1];
 				console.log({ foo });
 				debugger;
 			}

test/js/samples/debug-hoisted/expected.js

@@ -13,7 +13,8 @@ function create_fragment(ctx) {
 	const block = {
 		c: function create() {
 			{
-				const { obj } = ctx;
+				const obj = ctx[0];
+				const kobzol = ctx[1];
 				console.log({ obj, kobzol });
 				debugger;
 			}
@@ -22,9 +23,10 @@ function create_fragment(ctx) {
 			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
 		},
 		m: noop,
-		p: function update(changed, ctx) {
+		p: function update(ctx, changed) {
 			if (changed & 3) {
-				const { obj } = ctx;
+				const obj = ctx[0];
+				const kobzol = ctx[1];
 				console.log({ obj, kobzol });
 				debugger;
 			}

test/js/samples/debug-no-dependencies/expected.js

@@ -31,7 +31,7 @@ function create_each_block(ctx) {
 	const block = {
 		c: function create() {
 			{
-				const { index } = ctx;
+				const index = ctx[2];
 				console.log({ index });
 				debugger;
 			}