diff --git a/test/js/samples/debug-empty/expected-bundle.js b/test/js/samples/debug-empty/expected-bundle.js
new file mode 100644
index 0000000000..ba3b1dda59
--- /dev/null
+++ b/test/js/samples/debug-empty/expected-bundle.js
@@ -0,0 +1,200 @@
+function noop() {}
+
+function assign(tar, src) {
+ for (var k in src) tar[k] = src[k];
+ return tar;
+}
+
+function append(target, node) {
+ target.appendChild(node);
+}
+
+function insert(target, node, anchor) {
+ target.insertBefore(node, anchor);
+}
+
+function detachNode(node) {
+ node.parentNode.removeChild(node);
+}
+
+function createElement(name) {
+ return document.createElement(name);
+}
+
+function createText(data) {
+ return document.createTextNode(data);
+}
+
+function setData(text, data) {
+ text.data = '' + data;
+}
+
+function blankObject() {
+ return Object.create(null);
+}
+
+function destroy(detach) {
+ this.destroy = noop;
+ this.fire('destroy');
+ this.set = noop;
+
+ this._fragment.d(detach !== false);
+ this._fragment = null;
+ this._state = {};
+}
+
+function _differs(a, b) {
+ return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+ var handlers =
+ eventName in this._handlers && this._handlers[eventName].slice();
+ if (!handlers) return;
+
+ for (var i = 0; i < handlers.length; i += 1) {
+ var handler = handlers[i];
+
+ if (!handler.__calling) {
+ try {
+ handler.__calling = true;
+ handler.call(this, data);
+ } finally {
+ handler.__calling = false;
+ }
+ }
+ }
+}
+
+function get() {
+ return this._state;
+}
+
+function init(component, options) {
+ component._handlers = blankObject();
+ component._bind = options._bind;
+
+ component.options = options;
+ component.root = options.root || component;
+ component.store = options.store || component.root.store;
+}
+
+function on(eventName, handler) {
+ var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+ handlers.push(handler);
+
+ return {
+ cancel: function() {
+ var index = handlers.indexOf(handler);
+ if (~index) handlers.splice(index, 1);
+ }
+ };
+}
+
+function set(newState) {
+ this._set(assign({}, newState));
+ if (this.root._lock) return;
+ this.root._lock = true;
+ callAll(this.root._beforecreate);
+ callAll(this.root._oncreate);
+ callAll(this.root._aftercreate);
+ this.root._lock = false;
+}
+
+function _set(newState) {
+ var oldState = this._state,
+ changed = {},
+ dirty = false;
+
+ for (var key in newState) {
+ if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+ }
+ if (!dirty) return;
+
+ this._state = assign(assign({}, oldState), newState);
+ this._recompute(changed, this._state);
+ if (this._bind) this._bind(changed, this._state);
+
+ if (this._fragment) {
+ this.fire("state", { changed: changed, current: this._state, previous: oldState });
+ this._fragment.p(changed, this._state);
+ this.fire("update", { changed: changed, current: this._state, previous: oldState });
+ }
+}
+
+function callAll(fns) {
+ while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+ this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+var proto = {
+ destroy,
+ get,
+ fire,
+ on,
+ set,
+ _recompute: noop,
+ _set,
+ _mount,
+ _differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+ var h1, text, text_1, text_2, text_3;
+
+ return {
+ c() {
+ h1 = createElement("h1");
+ text = createText("Hello ");
+ text_1 = createText(ctx.name);
+ text_2 = createText("!");
+ text_3 = createText("\n");
+ debugger;
+ },
+
+ m(target, anchor) {
+ insert(target, h1, anchor);
+ append(h1, text);
+ append(h1, text_1);
+ append(h1, text_2);
+ insert(target, text_3, anchor);
+ },
+
+ p(changed, ctx) {
+ if (changed.name) {
+ setData(text_1, ctx.name);
+ }
+
+ debugger;
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(h1);
+ detachNode(text_3);
+ }
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js
new file mode 100644
index 0000000000..592f3a7a2b
--- /dev/null
+++ b/test/js/samples/debug-empty/expected.js
@@ -0,0 +1,56 @@
+/* generated by Svelte vX.Y.Z */
+import { append, assign, createElement, createText, detachNode, init, insert, proto, setData } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+ var h1, text, text_1, text_2, text_3;
+
+ return {
+ c() {
+ h1 = createElement("h1");
+ text = createText("Hello ");
+ text_1 = createText(ctx.name);
+ text_2 = createText("!");
+ text_3 = createText("\n");
+ debugger;
+ },
+
+ m(target, anchor) {
+ insert(target, h1, anchor);
+ append(h1, text);
+ append(h1, text_1);
+ append(h1, text_2);
+ insert(target, text_3, anchor);
+ },
+
+ p(changed, ctx) {
+ if (changed.name) {
+ setData(text_1, ctx.name);
+ }
+
+ debugger;
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(h1);
+ detachNode(text_3);
+ }
+ }
+ };
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/debug-empty/input.html b/test/js/samples/debug-empty/input.html
new file mode 100644
index 0000000000..11da4f6d15
--- /dev/null
+++ b/test/js/samples/debug-empty/input.html
@@ -0,0 +1,2 @@
+
Hello {name}!
+{@debug}
\ No newline at end of file
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected-bundle.js b/test/js/samples/debug-foo-bar-baz-things/expected-bundle.js
new file mode 100644
index 0000000000..e6796c685f
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/expected-bundle.js
@@ -0,0 +1,290 @@
+function noop() {}
+
+function assign(tar, src) {
+ for (var k in src) tar[k] = src[k];
+ return tar;
+}
+
+function append(target, node) {
+ target.appendChild(node);
+}
+
+function insert(target, node, anchor) {
+ target.insertBefore(node, anchor);
+}
+
+function detachNode(node) {
+ node.parentNode.removeChild(node);
+}
+
+function destroyEach(iterations, detach) {
+ for (var i = 0; i < iterations.length; i += 1) {
+ if (iterations[i]) iterations[i].d(detach);
+ }
+}
+
+function createElement(name) {
+ return document.createElement(name);
+}
+
+function createText(data) {
+ return document.createTextNode(data);
+}
+
+function setData(text, data) {
+ text.data = '' + data;
+}
+
+function blankObject() {
+ return Object.create(null);
+}
+
+function destroy(detach) {
+ this.destroy = noop;
+ this.fire('destroy');
+ this.set = noop;
+
+ this._fragment.d(detach !== false);
+ this._fragment = null;
+ this._state = {};
+}
+
+function _differs(a, b) {
+ return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+function fire(eventName, data) {
+ var handlers =
+ eventName in this._handlers && this._handlers[eventName].slice();
+ if (!handlers) return;
+
+ for (var i = 0; i < handlers.length; i += 1) {
+ var handler = handlers[i];
+
+ if (!handler.__calling) {
+ try {
+ handler.__calling = true;
+ handler.call(this, data);
+ } finally {
+ handler.__calling = false;
+ }
+ }
+ }
+}
+
+function get() {
+ return this._state;
+}
+
+function init(component, options) {
+ component._handlers = blankObject();
+ component._bind = options._bind;
+
+ component.options = options;
+ component.root = options.root || component;
+ component.store = options.store || component.root.store;
+}
+
+function on(eventName, handler) {
+ var handlers = this._handlers[eventName] || (this._handlers[eventName] = []);
+ handlers.push(handler);
+
+ return {
+ cancel: function() {
+ var index = handlers.indexOf(handler);
+ if (~index) handlers.splice(index, 1);
+ }
+ };
+}
+
+function set(newState) {
+ this._set(assign({}, newState));
+ if (this.root._lock) return;
+ this.root._lock = true;
+ callAll(this.root._beforecreate);
+ callAll(this.root._oncreate);
+ callAll(this.root._aftercreate);
+ this.root._lock = false;
+}
+
+function _set(newState) {
+ var oldState = this._state,
+ changed = {},
+ dirty = false;
+
+ for (var key in newState) {
+ if (this._differs(newState[key], oldState[key])) changed[key] = dirty = true;
+ }
+ if (!dirty) return;
+
+ this._state = assign(assign({}, oldState), newState);
+ this._recompute(changed, this._state);
+ if (this._bind) this._bind(changed, this._state);
+
+ if (this._fragment) {
+ this.fire("state", { changed: changed, current: this._state, previous: oldState });
+ this._fragment.p(changed, this._state);
+ this.fire("update", { changed: changed, current: this._state, previous: oldState });
+ }
+}
+
+function callAll(fns) {
+ while (fns && fns.length) fns.shift()();
+}
+
+function _mount(target, anchor) {
+ this._fragment[this._fragment.i ? 'i' : 'm'](target, anchor || null);
+}
+
+var proto = {
+ destroy,
+ get,
+ fire,
+ on,
+ set,
+ _recompute: noop,
+ _set,
+ _mount,
+ _differs
+};
+
+/* generated by Svelte vX.Y.Z */
+
+function create_main_fragment(component, ctx) {
+ var text, p, text_1, text_2;
+
+ var each_value = ctx.things;
+
+ var each_blocks = [];
+
+ for (var i = 0; i < each_value.length; i += 1) {
+ each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
+ }
+
+ return {
+ c() {
+ for (var i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].c();
+ }
+
+ text = createText("\n\n");
+ p = createElement("p");
+ text_1 = createText("foo: ");
+ text_2 = createText(ctx.foo);
+ },
+
+ m(target, anchor) {
+ for (var i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].m(target, anchor);
+ }
+
+ insert(target, text, anchor);
+ insert(target, p, anchor);
+ append(p, text_1);
+ append(p, text_2);
+ },
+
+ p(changed, ctx) {
+ if (changed.things) {
+ each_value = ctx.things;
+
+ for (var i = 0; i < each_value.length; i += 1) {
+ const child_ctx = get_each_context(ctx, each_value, i);
+
+ if (each_blocks[i]) {
+ each_blocks[i].p(changed, child_ctx);
+ } else {
+ each_blocks[i] = create_each_block(component, child_ctx);
+ each_blocks[i].c();
+ each_blocks[i].m(text.parentNode, text);
+ }
+ }
+
+ for (; i < each_blocks.length; i += 1) {
+ each_blocks[i].d(1);
+ }
+ each_blocks.length = each_value.length;
+ }
+
+ if (changed.foo) {
+ setData(text_2, ctx.foo);
+ }
+ },
+
+ d(detach) {
+ destroyEach(each_blocks, detach);
+
+ if (detach) {
+ detachNode(text);
+ detachNode(p);
+ }
+ }
+ };
+}
+
+// (1:0) {#each things as thing}
+function create_each_block(component, ctx) {
+ var span, text_value = ctx.thing.name, text, text_1;
+
+ return {
+ c() {
+ span = createElement("span");
+ text = createText(text_value);
+ text_1 = createText("\n\t");
+
+ const { foo, bar, baz } = ctx;
+ console.log({ foo, bar, baz });
+ debugger;
+ },
+
+ m(target, anchor) {
+ insert(target, span, anchor);
+ append(span, text);
+ insert(target, text_1, anchor);
+ },
+
+ p(changed, ctx) {
+ if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
+ setData(text, text_value);
+ }
+
+ if (changed.foo || changed.bar || changed.baz) {
+ const { foo, bar, baz } = ctx;
+ console.log({ foo, bar, baz });
+ debugger;
+ }
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(span);
+ detachNode(text_1);
+ }
+ }
+ };
+}
+
+function get_each_context(ctx, list, i) {
+ const child_ctx = Object.create(ctx);
+ child_ctx.thing = list[i];
+ child_ctx.each_value = list;
+ child_ctx.thing_index = i;
+ return child_ctx;
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+
+export default SvelteComponent;
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
new file mode 100644
index 0000000000..1406c3b927
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -0,0 +1,140 @@
+/* generated by Svelte vX.Y.Z */
+import { append, assign, createElement, createText, destroyEach, detachNode, init, insert, proto, setData } from "svelte/shared.js";
+
+function create_main_fragment(component, ctx) {
+ var text, p, text_1, text_2;
+
+ var each_value = ctx.things;
+
+ var each_blocks = [];
+
+ for (var i = 0; i < each_value.length; i += 1) {
+ each_blocks[i] = create_each_block(component, get_each_context(ctx, each_value, i));
+ }
+
+ return {
+ c() {
+ for (var i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].c();
+ }
+
+ text = createText("\n\n");
+ p = createElement("p");
+ text_1 = createText("foo: ");
+ text_2 = createText(ctx.foo);
+ },
+
+ m(target, anchor) {
+ for (var i = 0; i < each_blocks.length; i += 1) {
+ each_blocks[i].m(target, anchor);
+ }
+
+ insert(target, text, anchor);
+ insert(target, p, anchor);
+ append(p, text_1);
+ append(p, text_2);
+ },
+
+ p(changed, ctx) {
+ if (changed.things) {
+ each_value = ctx.things;
+
+ for (var i = 0; i < each_value.length; i += 1) {
+ const child_ctx = get_each_context(ctx, each_value, i);
+
+ if (each_blocks[i]) {
+ each_blocks[i].p(changed, child_ctx);
+ } else {
+ each_blocks[i] = create_each_block(component, child_ctx);
+ each_blocks[i].c();
+ each_blocks[i].m(text.parentNode, text);
+ }
+ }
+
+ for (; i < each_blocks.length; i += 1) {
+ each_blocks[i].d(1);
+ }
+ each_blocks.length = each_value.length;
+ }
+
+ if (changed.foo) {
+ setData(text_2, ctx.foo);
+ }
+ },
+
+ d(detach) {
+ destroyEach(each_blocks, detach);
+
+ if (detach) {
+ detachNode(text);
+ detachNode(p);
+ }
+ }
+ };
+}
+
+// (1:0) {#each things as thing}
+function create_each_block(component, ctx) {
+ var span, text_value = ctx.thing.name, text, text_1;
+
+ return {
+ c() {
+ span = createElement("span");
+ text = createText(text_value);
+ text_1 = createText("\n\t");
+
+ const { foo, bar, baz, thing } = ctx;
+ console.log({ foo, bar, baz, thing });
+ debugger;
+ },
+
+ m(target, anchor) {
+ insert(target, span, anchor);
+ append(span, text);
+ insert(target, text_1, anchor);
+ },
+
+ p(changed, ctx) {
+ if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
+ setData(text, text_value);
+ }
+
+ if (changed.foo || changed.bar || changed.baz || changed.things) {
+ const { foo, bar, baz, thing } = ctx;
+ console.log({ foo, bar, baz, thing });
+ debugger;
+ }
+ },
+
+ d(detach) {
+ if (detach) {
+ detachNode(span);
+ detachNode(text_1);
+ }
+ }
+ };
+}
+
+function get_each_context(ctx, list, i) {
+ const child_ctx = Object.create(ctx);
+ child_ctx.thing = list[i];
+ child_ctx.each_value = list;
+ child_ctx.thing_index = i;
+ return child_ctx;
+}
+
+function SvelteComponent(options) {
+ init(this, options);
+ this._state = assign({}, options.data);
+ this._intro = true;
+
+ this._fragment = create_main_fragment(this, this._state);
+
+ if (options.target) {
+ this._fragment.c();
+ this._mount(options.target, options.anchor);
+ }
+}
+
+assign(SvelteComponent.prototype, proto);
+export default SvelteComponent;
\ No newline at end of file
diff --git a/test/js/samples/debug-foo-bar-baz-things/input.html b/test/js/samples/debug-foo-bar-baz-things/input.html
new file mode 100644
index 0000000000..6fa8611415
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/input.html
@@ -0,0 +1,6 @@
+{#each things as thing}
+ {thing.name}
+ {@debug foo, bar, baz, thing}
+{/each}
+
+foo: {foo}
\ No newline at end of file
diff --git a/test/validator/samples/debug-invalid/errors.json b/test/validator/samples/debug-invalid/errors.json
new file mode 100644
index 0000000000..1dc4507a39
--- /dev/null
+++ b/test/validator/samples/debug-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+ "code": "invalid-debug",
+ "message": "{@debug ...} arguments must be identifers, not arbitrary expressions",
+ "start": {
+ "line": 2,
+ "column": 9,
+ "character": 13
+ },
+ "end": {
+ "line": 2,
+ "column": 14,
+ "character": 18
+ },
+ "pos": 13
+}]
\ No newline at end of file
diff --git a/test/validator/samples/debug-invalid/input.html b/test/validator/samples/debug-invalid/input.html
new file mode 100644
index 0000000000..5c89e7049d
--- /dev/null
+++ b/test/validator/samples/debug-invalid/input.html
@@ -0,0 +1,4 @@
+
+ {@debug a + b}
+ {a + b}
+
\ No newline at end of file