Using developer tools
The browser console is part of the browser's developer tools, or "dev tools" for short. Getting to developer tools might seem like a bit of a detour when you're just getting started, but it's well worth it, for two reasons:
- Developer tools, and things like logging messages to the console, are an essential part of the day-to-day work of programming. It's definitely worth learning about them and getting familiar with how they work.
- The browser console is also a really useful tool for helping you learn JavaScript. You can type in snippets of JavaScript, run them and see their result immediately, which is a great way to experiment and learn more. We'll try that out later on.
Opening dev tools
You can open dev tools for any browser window or tab. However we only want dev tools for the preview window where your project runs, as that's where your JavaScript code runs too. While you can open dev tools for the Construct editor, it's not useful here.
So first of all preview your project by clicking the "Play" icon in the toolbar near the "Menu" button. (You can also preview by pressing F5.)
Construct will open a popup window with a blank white screen, as there's nothing in the layout. Make sure the preview window is the active window - you can click inside the preview window to make sure it's the active window - then:
- In Safari, press Command + Option + I.
- In any other browser, press F12.
A new window should open for the browser developer tools. Click the Console tab near the top to make sure you're viewing the list of console messages. You should see Hello world! in the list of messages! There may be some other messages that Construct logged itself, but you can ignore those.
Congratulations! You have run your first line of JavaScript code and seen the message it logged.
Changing the message
In Construct you can try changing the message that is logged. (Remember to double-click the script block to edit it, and click outside to finish.) Any text between the double quotes will be shown in the console. For example you could try:
console.log("My super cool message!");
Preview the project, open dev tools, and you can see your updated message.
Testing code in the console
As mentioned previously, a great feature of the console is that you can also type in code and see it run immediately. This is a very handy way to try things out. At the bottom of the list of messages in the console should be an input field where you can enter some code. Try typing 1 + 1 and press Enter. It will instantly run this as JavaScript code and log the result.
You can also try entering the console log code inside the console, and see it print the message there.
You can enter code in to the console this way at any time and immediately see the result - or an error if you entered something incorrectly. This makes it a great way to quickly experiment with lots of different variations of code, and learn more about how JavaScript works and what results you get from different code snippets. Do feel free to try it out at any point during this guide and play with different code samples - it's a great way to learn more.
Conclusion
In this part we've covered:
- About this guide, and what you'll learn in this series
- How to add some JavaScript code in an event sheet in Construct
- Using
console.log() to add a message to the browser console
- How to open the browser developer tools and view the console
- How to enter code in the console to quickly try it out
This guide will often use the browser console for logging the results of code, and it provides an excellent place to experiment with code, so it's worth the time to get familiar with it.
You can download a Construct project file for this part of the guide here:
Part 2
When you're ready to continue, head to the next part at Learning JavaScript in Construct, part 2: language basics!