diff --git a/debugger/coordinates.js b/debugger/coordinates.js
new file mode 100644
index 0000000..b763457
--- /dev/null
+++ b/debugger/coordinates.js
@@ -0,0 +1,12 @@
+const cords = document.getElementById("coordinates");
+
+function updateCords(x, y) {
+ cords.textContent = `(${Math.round(x)}, ${Math.round(y)})`;
+
+}
+
+updateCords(0, 1000);
+
+window.addEventListener("mousemove", event => {
+ updateCords(event.x, event.y);
+});
diff --git a/debugger/index.html b/debugger/index.html
new file mode 100644
index 0000000..bf9caf9
--- /dev/null
+++ b/debugger/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+ Pixel canvas emulator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/debugger/poll.js b/debugger/poll.js
new file mode 100644
index 0000000..cf735cf
--- /dev/null
+++ b/debugger/poll.js
@@ -0,0 +1,15 @@
+(async () => {
+ const file = await fetch("../dist/user-script.user.js").then((e => e.text()));
+ while (true) {
+ await new Promise(resolve => setTimeout(resolve), 100);
+ const file2 = await fetch("../dist/user-script.user.js")
+ .then((e => e.status === 200 ? e.text() : Promise.resolve(file)));
+ if (file !== file2) {
+ console.log(file);
+ break;
+ }
+ }
+ await new Promise(resolve => setTimeout(resolve), 1000);
+ location.reload();
+
+})();
\ No newline at end of file
diff --git a/debugger/style.css b/debugger/style.css
new file mode 100644
index 0000000..47ed74e
--- /dev/null
+++ b/debugger/style.css
@@ -0,0 +1,274 @@
+html {
+ line-height: 1.5;
+ -webkit-text-size-adjust: 100%;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ -webkit-tap-highlight-color: transparent
+}
+
+body {
+ margin: 0;
+ line-height: inherit
+}
+
+hr {
+ height: 0;
+ color: inherit;
+ border-top-width: 1px
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: inherit;
+ font-weight: inherit
+}
+
+a {
+ color: inherit;
+ text-decoration: inherit
+}
+
+b,
+strong {
+ font-weight: bolder
+}
+
+code,
+kbd,
+pre,
+samp {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+ font-feature-settings: normal;
+ font-variation-settings: normal;
+ font-size: 1em
+}
+
+small {
+ font-size: 80%
+}
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+
+sub {
+ bottom: -.25em
+}
+
+sup {
+ top: -.5em
+}
+
+table {
+ text-indent: 0;
+ border-color: inherit;
+ border-collapse: collapse
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-feature-settings: inherit;
+ font-variation-settings: inherit;
+ font-size: 100%;
+ font-weight: inherit;
+ line-height: inherit;
+ letter-spacing: inherit;
+ color: inherit;
+ margin: 0;
+ padding: 0
+}
+
+button,
+select {
+ text-transform: none
+}
+
+button,
+input:where([type=button]),
+input:where([type=reset]),
+input:where([type=submit]) {
+ -webkit-appearance: button;
+ background-color: transparent;
+ background-image: none
+}
+
+:-moz-focusring {
+ outline: auto
+}
+
+:-moz-ui-invalid {
+ box-shadow: none
+}
+
+progress {
+ vertical-align: baseline
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+ height: auto
+}
+
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+
+::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+
+summary {
+ display: list-item
+}
+
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+ margin: 0
+}
+
+fieldset {
+ margin: 0
+}
+
+fieldset,
+legend {
+ padding: 0
+}
+
+menu,
+ol,
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0
+}
+
+dialog {
+ padding: 0
+}
+
+textarea {
+ resize: vertical
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+input::placeholder,
+textarea::placeholder {
+ opacity: 1;
+ color: #9ca3af
+}
+
+[role=button],
+button {
+ cursor: pointer
+}
+
+:disabled {
+ cursor: default
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+ display: block;
+ vertical-align: middle;
+}
+
+img,
+video {
+ max-width: 100%;
+ height: auto
+}
+
+[hidden]:where(:not([hidden=until-found])) {
+ display: none
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0
+}
+
+
+@media (min-width:480px) {
+ .xs\:bottom-16 {
+ bottom: 4rem
+ }
+
+ .xs\:bottom-4 {
+ bottom: 1rem
+ }
+}
+
+@media (min-width:640px) {
+ .sm\:items-start {
+ align-items: flex-start
+ }
+
+ .sm\:items-end {
+ align-items: flex-end
+ }
+
+ .sm\:p-6 {
+ padding: 1.5rem
+ }
+
+ .sm\:px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem
+ }
+
+ .sm\:text-left {
+ text-align: left
+ }
+}