By default browsers don't display any error messages when things go wrong. This is so your experience browsing the web is smooth and not interrupted with lots of annoying error messages. However, if something goes wrong with your Construct game, you won't see any error message at first. This can make it difficult to work out what has gone wrong.
To see error messages, you first have to open the browser's Developer Tools (also known as DevTools) and view the console. The console is basically a log of messages and it will list any errors that occurred. These error messages are very useful to add to bug reports! It's also a good idea to check for errors after publishing your game to ensure it is working properly. If something is going wrong, it's also a good place to check in case it lists an error message that wasn't displayed anywhere else.
Opening developer tools
To open developer tools in each browser:
- In Chrome, Firefox and Edge: press F12
- Safari: press ⌘ + ⌥ + I
Make sure you switch to the Console tab if it's not already showing. This is where any information, warning or error messages will be logged.
Desktop exports
Some desktop exporters access developer tools in a different way. With Windows WebView2 you can access them in the usual way by pressing F12, but macOS WKWebView and Linux CEF are both a bit different.
macOS WKWebView
To access developer tools for a macOS WKWebView app, you need to use the 'Develop' menu of the Safari browser. To see that menu, you first must enable features for web developers - see Apple's guide on Enabling features for web developers for that.
Once the 'Develop' menu appears in Safari, you can then access developer tools for a macOS WKWebView export like so:
- Launch the macOS WKWebView app. Note you must have exported the app with Enable DevTools checked!
- Launch Safari
- Open the 'Develop' menu
- Near the top find the device you are working on (e.g. Username's Macbook Pro), and expand that menu
- Inside that menu, find the name of the macOS WKWebView app, and select the item reading index.html. Developer tools will now open for the app.
Linux CEF
To access developer tools for a Linux CEF app you need to use the Chrome browser's inspect page. First make sure the Chrome or Chromium browser is installed on the system (Chromium being a completely open-source variant of Chrome which some Linux systems provide). Then follow these steps:
- Launch your Linux CEF app. Note you must have exported the app with Enable DevTools checked!
- Launch Chrome or Chromium and use the address bar to visit a special URL chrome://inspect
- The inspect page should load. After a moment, your Linux CEF app should appear in the list. Then you can click Inspect to open developer tools for the Linux CEF app.
Note that this process uses remote debugging. When DevTools is enabled, the Linux app allows remote debugging on port 9222, which is one of the default ports Chromium looks for on the "inspect" page, so it should appear by default. Note that if you have changed the default configuration it may not appear.
Checking for errors on mobile devices
It's tricker to get to developer tools for Android and iOS devices, because you can't bring it up on the device itself. Instead you need to connect it up to a desktop system using its cable, and configure it to allow debugging.
For more information on this see the following guides:
Remote Debugging Android Devices - the section on remote debugging WebViews also applies to Android apps.
For iOS refer to the Safari developer tools documentation. As with Android, the same approach can be used to bring up developer tools for iOS apps.
Common errors
- Blank screen when running project
- Something has gone wrong while loading - use the shortcuts above to find any error message. You might want to post a bug report including the error message.
- Game freezes half way through
- Something has gone wrong during the game - use the shortcuts above to find any error message. You might want to post a bug report including the error message.
- Game works in preview but not after exporting
- This is usually caused by broken third-party plugins and behaviors which do not work with the minifier. The error message will probably include random characters like P.wf is undefined. Try removing third party plugins or behaviors. You should report the problem to the plugin or behavior developer, since Scirra cannot fix it. If you are not using any third party plugins or behaviors at all, you should post a bug report. As a temporary work-around, you can disable minifying script on export, but please report the bug so it can be fixed.
- No audio plays, or sound files come up as '404 not found'
- Make sure you've set up all the right MIME types on your server to ensure audio playback works correctly.
- Some other files come up as 404 not found
- Did you upload the entire project and all its files and folders? You might have forgot to upload everything. You might also want to double-check your server has the right MIME types set up.