What to do when you encounter a bug

[richard]

Hey folks!

We here at the MakeCode team try our best to fix any bugs that forum users run into in a timely manner. However, it can sometimes be difficult for us to diagnose or fix these bugs when we can’t recreate the bug ourselves. That’s why we need YOUR help when you encounter bugs to get the most information about the problem as possible.

The purpose of this post is to lay out a few things you can do when posting about bugs to make it easier for us to figure out the root cause and fix 'em!

1. Send us a copy of your project

Please always include a share link to your project when you are reporting a bug if possible

Instructions for creating a share link

1. Click on the share icon in the header bar. The share icon looks like this:
   
2. In the dialog that pops up, uncheck the “Update existing share link for this project” checkbox if it is present. This checkbox will only appear if you are logged in and have shared this project before.
   
   
3. Click the “Share Project” button
4. Click the “Copy” button next to the link that appears and paste it into your forum post2.

If you cannot share a link to the project due to an error, then try downloading the project and including it in your post.

Instructions for downloading the project as a PNG (arcade only)

1. Click the save button that appears in the bottom bar of the editor:
   
   
2. If your project doesn’t have a name, you may be prompted to rename your project. Enter a project name and click “Save”
3. This should download the PNG file to your computer. Drag that file from your Downloads folder into your forum post to upload it to the forum.

Note: When posting PNGs of your games, please make sure that you don’t edit, resize, screenshot or convert the image into a different format. The file uploaded needs to be the exact file downloaded from Arcade

Instructions for downloading the project as a HEX/UF2/MKCD file

1. Before downloading your project, disconnect any MakeCode hardware devices that you have plugged into your computer (e.g. micro:bit, meowbit, Adafruit pybadge, etc.)
2. Inside the editor, click the download button in the bottom left of the screen
3. If you are prompted to choose your hardware, go ahead and click on any hardware (it doesn’t matter which)
4. This should download the file to your computer
5. Upload this file to your favorite file sharing service (e.g. Google Drive, iCloud, Onedrive, Dropbox, etc.) and share a link to that file in your forum post.

2. Copy the console logs from the browser developer tools

If you are using MakeCode from within a browser on a laptop or desktop, please try opening the browser developer tools and sending us a screenshot of whatever appears in the console.

Here are instructions for doing so in some common browsers:

Google Chrome

1. First, open the developer tools through one of these methods:
   a. If your computer has function keys, press F12
   b. If you’re on Windows, try pressing the shortcut “ctrl + shift + i”
   c. If you’re on macOS, try pressing the shortcut “command + option + i”
   d. If none of these work, try clicking on the vertical … menu in the top right of the browser window and selecting More Tools > Developer Tools like in the below screenshot:
   
   
2. In the developer tools view that pops up, select the Console tab in the top bar:
   
   
3. Take a screenshot of anything that appears in this tab and include it in your forum post

Microsoft Edge

1. First, open the developer tools through one of these methods:
   a. If your computer has function keys, press F12. If a dialog pops up asking if you want to open Microsoft Edge Developer Tools, select “Open Devtools”
   b. If you’re on Windows, try pressing the shortcut “ctrl + shift + i”
   c. If you’re on macOS, try pressing the shortcut “command + option + i”
   d. If none of these work, try clicking on the … menu in the top right of the browser window and selecting More Tools > Developer Tools like in the below screenshot:
   
   
2. In the developer tools view that pops up, select the Console tab in the top bar:
   
   
3. Take a screenshot of anything that appears in this tab and include it in your forum post

Mozilla Firefox

1. First, open the developer tools through one of these methods:
   a. If your computer has function keys, press F12
   b. If you’re on Windows, try pressing the shortcut “ctrl + shift + i”
   c. If you’re on macOS, try pressing the shortcut “command + option + i”
   d. If none of these work, try clicking on the menu with three horizontal lines in the top right of the browser window and selecting More Tools > Web Developer Tools like in the below GIF:
   
2. In the developer tools view that pops up, select the Console tab in the top bar:
   
   
3. Take a screenshot of anything that appears in this tab and include it in your forum post

Safari

1. In the top bar, select Safari > Settings…
   
   
2. In the settings dialog that comes up, select the “Advanced” tab and check the “Show features for web developers” checkbox:
   
   
3. Now close the settings window. The top bar should now have a “Develop” option
4. Select Develop > Show JavaScript Console
   
   
5. Take a screenshot of everything that appears in the console that pops up and include it in your forum post

3. Let us know what you were doing when the problem occurred

If you can remember what you were doing when the problem happened, let us know! Include as much detail as possible.

4. If possible, include instructions or a video of the issue

If you’re able to make the error happen again, please include detailed instructions on how you did it! It’s also very helpful if you can record a video of the issue.

• If you’re on Windows, ScreenToGif is great for recording portions of your screen.
• If you’re on macOS, you can record the screen by using the “shift + command + 5” keyboard shortcut
• On a Chromebook, follow this guide
• On an iPad, follow these instructions

[CodeOnTheCob]

great the dev tool bit wont work since our school blocked it

[ChimbroDaPro]

For anyone who can’t access devtools (for people like me, who use phones and iPads):

1. Copy this code:

javascript:( () => { var script = document.createElement('script'); script.src = "//cdn.jsdelivr.net/npm/eruda)"; document.body.appendChild(script); script.onload = (() => eruda.init()); })()

If you’re using any Apple software:

2. Go to Safari and enter a new tab:

3. Go to a random website, click the “Share” button and then click “Add Bookmark”.

4. Click this funky button up top:

5. Now go to “Bookmarks” then “Favourites” (or if you’re using a profile like me, whatever profile folder matches the profile you bookmarked it in):

6. Now, go to the Bookmark you saved and edit the title to be “Developer Tools” or “Inspect Element”. Also swap the link with the code I gave at the beginning.

7. Now go to your project that’s bugged and click the new bookmark. It should bring up this gear-icon-thing.

8. Click the icon and BOOM, YOU NOW HAVE DEVTOOLS!!!

Now, if you’re on any other device or browser, the same code works! It’s just that the bookmarking is a bit more complex…

[UnsignedArduino]

Unless your school blocks JS execution in bookmarks

[ChimbroDaPro]

I forgot to say it but you can use this same bookmark for any website to access devtools.

[CodeOnTheCob]

mine they are control freaks this and scratch are the only coding websites that we can nuse

[ChimbroDaPro]

WAIT WAIT FR THEY CAN DO THAT??? Bro that’s like… the lowest thing you could possibly do… absolutely BRUTAL… like what are they trying to hide