diff --git a/README.md b/README.md
index 1536d6b..b5081e8 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,12 @@ const mySerializedSVG = ctx.getSerializedSvg();
 
 ## CHANGELOG
 
+## v2.1.0
+
+- feat: SVGCanvasElement(options)
+- feat: options.debug
+- refactor
+
 ### v2.0.7
 
 - fix typo
diff --git a/context.js b/context.js
index df281fa..33883d1 100644
--- a/context.js
+++ b/context.js
@@ -18,7 +18,7 @@ import * as utils from './utils';
 export default (function () {
     "use strict";
 
-    var STYLES, ctx, CanvasGradient, CanvasPattern, namedEntities;
+    var STYLES, Context, CanvasGradient, CanvasPattern, namedEntities;
 
     //helper function to format a string
     function format(str, args) {
@@ -196,8 +196,7 @@ export default (function () {
     CanvasGradient.prototype.addColorStop = function (offset, color) {
         var stop = this.__ctx.__createElement("stop"), regex, matches;
         stop.setAttribute("offset", offset);
-        color = utils.toString(color);
-        if (color.indexOf("rgba") !== -1) {
+        if (utils.toString(color).indexOf("rgba") !== -1) {
             //separate alpha value, since webkit can't handle it
             regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
             matches = regex.exec(color);
@@ -223,7 +222,8 @@ export default (function () {
      * enableMirroring - enables canvas mirroring (get image data) (defaults to false)
      * document - the document object (defaults to the current document)
      */
-    ctx = function (o) {
+    Context = function (o) {
+
         var defaultOptions = { width:500, height:500, enableMirroring : false}, options;
 
         //keep support for this way of calling C2S: new C2S(width,height)
@@ -237,9 +237,9 @@ export default (function () {
             options = o;
         }
 
-        if (!(this instanceof ctx)) {
+        if (!(this instanceof Context)) {
             //did someone call this without new?
-            return new ctx(options);
+            return new Context(options);
         }
 
         //setup options
@@ -260,7 +260,7 @@ export default (function () {
         }
 
         this.__setDefaultStyles();
-        this.__stack = [this.__getStyleState()];
+        this.__styleStack = [this.__getStyleState()];
         this.__groupStack = [];
 
         //the root svg element
@@ -284,14 +284,30 @@ export default (function () {
 
         // init transformation matrix
         this.resetTransform();
+
+        this.__options = options;
+        this.__id = Math.random().toString(16).substring(2, 8);
+        this.__debug(`new`, o);
     };
 
+    /**
+     * Log
+     * 
+     * @private
+     */
+    Context.prototype.__debug = function(...data) {
+        if (!this.__options.debug) {
+            return
+        }
+        console.debug(`svgcanvas#${this.__id}:`, ...data)
+    }
+
 
     /**
      * Creates the specified svg element
      * @private
      */
-    ctx.prototype.__createElement = function (elementName, properties, resetFill) {
+    Context.prototype.__createElement = function (elementName, properties, resetFill) {
         if (typeof properties === "undefined") {
             properties = {};
         }
@@ -314,7 +330,7 @@ export default (function () {
      * Applies default canvas styles to the context
      * @private
      */
-    ctx.prototype.__setDefaultStyles = function () {
+    Context.prototype.__setDefaultStyles = function () {
         //default 2d canvas context properties see:http://www.w3.org/TR/2dcontext/
         var keys = Object.keys(STYLES), i, key;
         for (i=0; i<keys.length; i++) {
@@ -328,7 +344,7 @@ export default (function () {
      * @param styleState
      * @private
      */
-    ctx.prototype.__applyStyleState = function (styleState) {
+    Context.prototype.__applyStyleState = function (styleState) {
         var keys = Object.keys(styleState), i, key;
         for (i=0; i<keys.length; i++) {
             key = keys[i];
@@ -341,7 +357,7 @@ export default (function () {
      * @return {Object}
      * @private
      */
-    ctx.prototype.__getStyleState = function () {
+    Context.prototype.__getStyleState = function () {
         var i, styleState = {}, keys = Object.keys(STYLES), key;
         for (i=0; i<keys.length; i++) {
             key = keys[i];
@@ -353,7 +369,7 @@ export default (function () {
     /**
      * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
      */
-    ctx.prototype.__applyTransformation = function (element, matrix) {
+    Context.prototype.__applyTransformation = function (element, matrix) {
         const {a, b, c, d, e, f} = matrix || this.getTransform();
         element.setAttribute('transform', `matrix(${a} ${b} ${c} ${d} ${e} ${f})`)
     }
@@ -363,7 +379,7 @@ export default (function () {
      * @param type
      * @private
      */
-    ctx.prototype.__applyStyleToCurrentElement = function (type) {
+    Context.prototype.__applyStyleToCurrentElement = function (type) {
     	var currentElement = this.__currentElement;
     	var currentStyleGroup = this.__currentElementsToStyle;
     	if (currentStyleGroup) {
@@ -397,7 +413,7 @@ export default (function () {
                     //gradient
                     currentElement.setAttribute(style.apply, format("url(#{id})", {id:value.__root.getAttribute("id")}));
                 } else if (style.apply.indexOf(type)!==-1 && style.svg !== value) {
-                    if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && utils.toString(value).indexOf("rgba") !== -1) {
+                    if ((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
                         //separate alpha value, since illustrator can't handle it
                         regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
                         matches = regex.exec(value);
@@ -430,7 +446,7 @@ export default (function () {
      * Will return the closest group or svg node. May return the current element.
      * @private
      */
-    ctx.prototype.__closestGroupOrSvg = function (node) {
+    Context.prototype.__closestGroupOrSvg = function (node) {
         node = node || this.__currentElement;
         if (node.nodeName === "g" || node.nodeName === "svg") {
             return node;
@@ -445,7 +461,7 @@ export default (function () {
      *                           If true, we attempt to find all named entities and encode it as a numeric entity.
      * @return serialized svg
      */
-    ctx.prototype.getSerializedSvg = function (fixNamedEntities) {
+    Context.prototype.getSerializedSvg = function (fixNamedEntities) {
         var serialized = new XMLSerializer().serializeToString(this.__root),
             keys, i, key, value, regexp, xmlns;
 
@@ -476,20 +492,23 @@ export default (function () {
      * Returns the root svg
      * @return
      */
-    ctx.prototype.getSvg = function () {
+    Context.prototype.getSvg = function () {
         return this.__root;
     };
 
     /**
      * Will generate a group tag.
      */
-    ctx.prototype.save = function () {
+    Context.prototype.save = function () {
         var group = this.__createElement("g");
         var parent = this.__closestGroupOrSvg();
         this.__groupStack.push(parent);
         parent.appendChild(group);
         this.__currentElement = group;
-        this.__stack.push(this.__getStyleState());
+        const style = this.__getStyleState();
+
+        this.__debug('save style', style)
+        this.__styleStack.push(style);
         if (!this.__transformMatrixStack) {
             this.__transformMatrixStack = [];
         }
@@ -499,24 +518,26 @@ export default (function () {
     /**
      * Sets current element to parent, or just root if already root
      */
-    ctx.prototype.restore = function () {
+    Context.prototype.restore = function () {
         this.__currentElement = this.__groupStack.pop();
         this.__currentElementsToStyle = null;
         //Clearing canvas will make the poped group invalid, currentElement is set to the root group node.
         if (!this.__currentElement) {
             this.__currentElement = this.__root.childNodes[1];
         }
-        var state = this.__stack.pop();
+        var state = this.__styleStack.pop();
+        this.__debug('restore style', state);
         this.__applyStyleState(state);
         if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
             this.setTransform(this.__transformMatrixStack.pop())
         }
+       
     };
 
     /**
      * Create a new Path Element
      */
-    ctx.prototype.beginPath = function () {
+    Context.prototype.beginPath = function () {
         var path, parent;
 
         // Note that there is only one current default path, it is not part of the drawing state.
@@ -534,7 +555,7 @@ export default (function () {
      * Helper function to apply currentDefaultPath to current path element
      * @private
      */
-    ctx.prototype.__applyCurrentDefaultPath = function () {
+    Context.prototype.__applyCurrentDefaultPath = function () {
     	var currentElement = this.__currentElement;
         if (currentElement.nodeName === "path") {
 			currentElement.setAttribute("d", this.__currentDefaultPath);
@@ -547,7 +568,7 @@ export default (function () {
      * Helper function to add path command
      * @private
      */
-    ctx.prototype.__addPathCommand = function (command) {
+    Context.prototype.__addPathCommand = function (command) {
         this.__currentDefaultPath += " ";
         this.__currentDefaultPath += command;
     };
@@ -556,7 +577,7 @@ export default (function () {
      * Adds the move command to the current path element,
      * if the currentPathElement is not empty create a new path element
      */
-    ctx.prototype.moveTo = function (x,y) {
+    Context.prototype.moveTo = function (x,y) {
         if (this.__currentElement.nodeName !== "path") {
             this.beginPath();
         }
@@ -572,7 +593,7 @@ export default (function () {
     /**
      * Closes the current path
      */
-    ctx.prototype.closePath = function () {
+    Context.prototype.closePath = function () {
         if (this.__currentDefaultPath) {
             this.__addPathCommand("Z");
         }
@@ -581,7 +602,7 @@ export default (function () {
     /**
      * Adds a line to command
      */
-    ctx.prototype.lineTo = function (x, y) {
+    Context.prototype.lineTo = function (x, y) {
         this.__currentPosition = {x: x, y: y};
         if (this.__currentDefaultPath.indexOf('M') > -1) {
             this.__addPathCommand(format("L {x} {y}", {
@@ -599,7 +620,7 @@ export default (function () {
     /**
      * Add a bezier command
      */
-    ctx.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
+    Context.prototype.bezierCurveTo = function (cp1x, cp1y, cp2x, cp2y, x, y) {
         this.__currentPosition = {x: x, y: y};
         this.__addPathCommand(format("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",
             {
@@ -615,7 +636,7 @@ export default (function () {
     /**
      * Adds a quadratic curve to command
      */
-    ctx.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
+    Context.prototype.quadraticCurveTo = function (cpx, cpy, x, y) {
         this.__currentPosition = {x: x, y: y};
         this.__addPathCommand(format("Q {cpx} {cpy} {x} {y}", {
             cpx: this.__matrixTransform(cpx, cpy).x, 
@@ -639,7 +660,7 @@ export default (function () {
      *
      * @see http://www.w3.org/TR/2015/WD-2dcontext-20150514/#dom-context-2d-arcto
      */
-    ctx.prototype.arcTo = function (x1, y1, x2, y2, radius) {
+    Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
         // Let the point (x0, y0) be the last point in the subpath.
         var x0 = this.__currentPosition && this.__currentPosition.x;
         var y0 = this.__currentPosition && this.__currentPosition.y;
@@ -730,7 +751,7 @@ export default (function () {
     /**
      * Sets the stroke property on the current element
      */
-    ctx.prototype.stroke = function () {
+    Context.prototype.stroke = function () {
         if (this.__currentElement.nodeName === "path") {
             this.__currentElement.setAttribute("paint-order", "fill stroke markers");
         }
@@ -741,7 +762,8 @@ export default (function () {
     /**
      * Sets fill properties on the current element
      */
-    ctx.prototype.fill = function () {
+    Context.prototype.fill = function () {
+        utils.debug('fill', this.fillStyle);
         if (this.__currentElement.nodeName === "path") {
             this.__currentElement.setAttribute("paint-order", "stroke fill markers");
         }
@@ -752,7 +774,7 @@ export default (function () {
     /**
      *  Adds a rectangle to the path.
      */
-    ctx.prototype.rect = function (x, y, width, height) {
+    Context.prototype.rect = function (x, y, width, height) {
         if (this.__currentElement.nodeName !== "path") {
             this.beginPath();
         }
@@ -768,7 +790,7 @@ export default (function () {
     /**
      * adds a rectangle element
      */
-    ctx.prototype.fillRect = function (x, y, width, height) {
+    Context.prototype.fillRect = function (x, y, width, height) {
         let {a, b, c, d, e, f} = this.getTransform();
         if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
             //clear entire canvas
@@ -797,7 +819,7 @@ export default (function () {
      * @param width
      * @param height
      */
-    ctx.prototype.strokeRect = function (x, y, width, height) {
+    Context.prototype.strokeRect = function (x, y, width, height) {
         var rect, parent;
         rect = this.__createElement("rect", {
             x : x,
@@ -818,7 +840,7 @@ export default (function () {
      * 1. save current transforms
      * 2. remove all the childNodes of the root g element
      */
-    ctx.prototype.__clearCanvas = function () {
+    Context.prototype.__clearCanvas = function () {
         var rootGroup = this.__root.childNodes[1];
         this.__root.removeChild(rootGroup);
         this.__currentElement = this.__document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -830,7 +852,7 @@ export default (function () {
     /**
      * "Clears" a canvas by just drawing a white rectangle in the current group.
      */
-    ctx.prototype.clearRect = function (x, y, width, height) {
+    Context.prototype.clearRect = function (x, y, width, height) {
         let {a, b, c, d, e, f} = this.getTransform();
         if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
             //clear entire canvas
@@ -855,7 +877,7 @@ export default (function () {
      * Adds a linear gradient to a defs tag.
      * Returns a canvas gradient object that has a reference to it's parent def
      */
-    ctx.prototype.createLinearGradient = function (x1, y1, x2, y2) {
+    Context.prototype.createLinearGradient = function (x1, y1, x2, y2) {
         var grad = this.__createElement("linearGradient", {
             id : randomString(this.__ids),
             x1 : x1+"px",
@@ -872,7 +894,7 @@ export default (function () {
      * Adds a radial gradient to a defs tag.
      * Returns a canvas gradient object that has a reference to it's parent def
      */
-    ctx.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
+    Context.prototype.createRadialGradient = function (x0, y0, r0, x1, y1, r1) {
         var grad = this.__createElement("radialGradient", {
             id : randomString(this.__ids),
             cx : x1+"px",
@@ -891,7 +913,7 @@ export default (function () {
      * Parses the font string and returns svg mapping
      * @private
      */
-    ctx.prototype.__parseFont = function () {
+    Context.prototype.__parseFont = function () {
         var regex = /^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i;
         var fontPart = regex.exec( this.font );
         var data = {
@@ -923,7 +945,7 @@ export default (function () {
      * @return {*}
      * @private
      */
-    ctx.prototype.__wrapTextLink = function (font, element) {
+    Context.prototype.__wrapTextLink = function (font, element) {
         if (font.href) {
             var a = this.__createElement("a");
             a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", font.href);
@@ -941,7 +963,7 @@ export default (function () {
      * @param action - stroke or fill
      * @private
      */
-    ctx.prototype.__applyText = function (text, x, y, action) {
+    Context.prototype.__applyText = function (text, x, y, action) {
         var font = this.__parseFont(),
             parent = this.__closestGroupOrSvg(),
             textElement = this.__createElement("text", {
@@ -969,7 +991,7 @@ export default (function () {
      * @param x
      * @param y
      */
-    ctx.prototype.fillText = function (text, x, y) {
+    Context.prototype.fillText = function (text, x, y) {
         this.__applyText(text, x, y, "fill");
     };
 
@@ -979,7 +1001,7 @@ export default (function () {
      * @param x
      * @param y
      */
-    ctx.prototype.strokeText = function (text, x, y) {
+    Context.prototype.strokeText = function (text, x, y) {
         this.__applyText(text, x, y, "stroke");
     };
 
@@ -988,7 +1010,7 @@ export default (function () {
      * @param text
      * @return {TextMetrics}
      */
-    ctx.prototype.measureText = function (text) {
+    Context.prototype.measureText = function (text) {
         this.__ctx.font = this.font;
         return this.__ctx.measureText(text);
     };
@@ -996,7 +1018,7 @@ export default (function () {
     /**
      *  Arc command!
      */
-    ctx.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
+    Context.prototype.arc = function (x, y, radius, startAngle, endAngle, counterClockwise) {
         // in canvas no circle is drawn if no angle is provided.
         if (startAngle === endAngle) {
             return;
@@ -1044,7 +1066,7 @@ export default (function () {
     /**
      * Generates a ClipPath from the clip command.
      */
-    ctx.prototype.clip = function () {
+    Context.prototype.clip = function () {
         var group = this.__closestGroupOrSvg(),
             clipPath = this.__createElement("clipPath"),
             id =  randomString(this.__ids),
@@ -1073,7 +1095,7 @@ export default (function () {
      * Note that all svg dom manipulation uses node.childNodes rather than node.children for IE support.
      * http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-drawimage
      */
-    ctx.prototype.drawImage = function () {
+    Context.prototype.drawImage = function () {
         //convert arguments to a real array
         var args = Array.prototype.slice.call(arguments),
             image=args[0],
@@ -1110,7 +1132,7 @@ export default (function () {
         parent = this.__closestGroupOrSvg();
         currentElement = this.__currentElement;
         const matrix = this.getTransform().translate(dx, dy);
-        if (image instanceof ctx) {
+        if (image instanceof Context) {
             //canvas2svg mock canvas context. In the future we may want to clone nodes instead.
             //also I'm currently ignoring dw, dh, sw, sh, sx, sy for a mock context.
             svg = image.getSvg().cloneNode(true);
@@ -1153,7 +1175,7 @@ export default (function () {
     /**
      * Generates a pattern tag
      */
-    ctx.prototype.createPattern = function (image, repetition) {
+    Context.prototype.createPattern = function (image, repetition) {
         var pattern = this.__document.createElementNS("http://www.w3.org/2000/svg", "pattern"), id = randomString(this.__ids),
             img;
         pattern.setAttribute("id", id);
@@ -1172,14 +1194,14 @@ export default (function () {
                 image.nodeName === "CANVAS" ? image.toDataURL() : image.getAttribute("src"));
             pattern.appendChild(img);
             this.__defs.appendChild(pattern);
-        } else if (image instanceof ctx) {
+        } else if (image instanceof Context) {
             pattern.appendChild(image.__root.childNodes[1]);
             this.__defs.appendChild(pattern);
         }
         return new CanvasPattern(pattern, this);
     };
 
-    ctx.prototype.setLineDash = function (dashArray) {
+    Context.prototype.setLineDash = function (dashArray) {
         if (dashArray && dashArray.length > 0) {
             this.lineDash = dashArray.join(",");
         } else {
@@ -1193,7 +1215,7 @@ export default (function () {
      * 
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform
      */
-    ctx.prototype.setTransform = function (a, b, c, d, e, f) {
+    Context.prototype.setTransform = function (a, b, c, d, e, f) {
         if (a instanceof DOMMatrix) {
             this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]);
         } else {
@@ -1207,7 +1229,7 @@ export default (function () {
      * 
      * @returns A DOMMatrix Object
      */
-    ctx.prototype.getTransform = function () {
+    Context.prototype.getTransform = function () {
         let {a, b, c, d, e, f} = this.__transformMatrix;
         return new DOMMatrix([a, b, c, d, e, f]);
     };
@@ -1217,7 +1239,7 @@ export default (function () {
      * 
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform
      */
-    ctx.prototype.resetTransform = function () {
+    Context.prototype.resetTransform = function () {
         this.setTransform(1, 0, 0, 1, 0, 0);
     };
 
@@ -1228,7 +1250,7 @@ export default (function () {
      * @param y The y argument represents the scale factor in the vertical direction.
      * @see https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-scale
      */
-    ctx.prototype.scale = function (x, y) {        
+    Context.prototype.scale = function (x, y) {        
         if (y === undefined) {
             y = x;
         }
@@ -1247,7 +1269,7 @@ export default (function () {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate
      * @see https://www.w3.org/TR/css-transforms-1
      */
-    ctx.prototype.rotate = function (angle) {
+    Context.prototype.rotate = function (angle) {
         let matrix = this.getTransform().multiply(new DOMMatrix([
             Math.cos(angle),
             Math.sin(angle),
@@ -1266,7 +1288,7 @@ export default (function () {
      * @param y Distance to move in the vertical direction. Positive values are down, and negative are up.
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate
      */
-    ctx.prototype.translate = function (x, y) {
+    Context.prototype.translate = function (x, y) {
         const matrix = this.getTransform().translate(x, y);
         this.setTransform(matrix);
     };
@@ -1277,23 +1299,23 @@ export default (function () {
      * 
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
      */
-    ctx.prototype.transform = function (a, b, c, d, e, f) {
+    Context.prototype.transform = function (a, b, c, d, e, f) {
         const matrix = this.getTransform().multiply(new DOMMatrix([a, b, c, d, e, f]));
         this.setTransform(matrix);
     };
 
-    ctx.prototype.__matrixTransform = function(x, y) {
+    Context.prototype.__matrixTransform = function(x, y) {
         return new DOMPoint(x, y).matrixTransform(this.__transformMatrix)
     }
 
     /**
      * Not yet implemented
      */
-    ctx.prototype.drawFocusRing = function () {};
-    ctx.prototype.createImageData = function () {};
-    ctx.prototype.getImageData = function () {};
-    ctx.prototype.putImageData = function () {};
-    ctx.prototype.globalCompositeOperation = function () {};
+    Context.prototype.drawFocusRing = function () {};
+    Context.prototype.createImageData = function () {};
+    Context.prototype.getImageData = function () {};
+    Context.prototype.putImageData = function () {};
+    Context.prototype.globalCompositeOperation = function () {};
 
-    return ctx;
+    return Context;
 }());
diff --git a/element.js b/element.js
index b464131..74d40a6 100644
--- a/element.js
+++ b/element.js
@@ -2,7 +2,7 @@ import Context from './context';
 
 function SVGCanvasElement(options) {
 
-    this.ctx = new Context(100, 100);
+    this.ctx = new Context(options);
     this.svg = this.ctx.__root;
 
     // sync attributes to svg
diff --git a/utils.js b/utils.js
index baa79e7..4384a5c 100644
--- a/utils.js
+++ b/utils.js
@@ -1,8 +1,19 @@
+const DEBUG = true;
+
 function toString(obj) {
+    if (!obj) {
+        return obj
+    }
     if (typeof obj === 'string') {
         return obj
     }
-    return obj.toString()
+    return obj + '';
 }
 
-export {toString};
\ No newline at end of file
+function debug(...data) {
+    if (DEBUG) {
+        console.debug(...data)
+    }
+}
+
+export {toString, debug};
\ No newline at end of file