- Go to this URL sign up for an account.
- Sign in.
- Make a new repl.
- You are ready to write code! The code you write is typed into the white area and the console is the black area on the right. The console is where you will see the results of the code that you run.
It is a tradition to print "Hello, World!" to the console, so that is what we will do now! Here's how:
- Open a repl as described above.
- Type the following into the white area of your repl as shown below:
- The repl should look like the following:
- The console.log() part of the code above logs your code to the console. The "Hello, World!" part of the code is a string. The quotation marks like those around "Hello, World!" must be included for all strings. A string is just a line of text or characters. This entire line of code must be closed with a semi-colon as a good coding convention.
This same code can be run in the actual console in the browser. You can see this by:
- Right-clicking anywhere inside the Chrome browser on a webpage and clicking "Inspect".
- Click "console" in the Chrome DevTools that appear. The console tab along with the code we will be writing are highlighted in the image below:
- If there is anything already in the console, right-click inside the console and select "clear console" to prevent confusion. You can adjust the size of this window if you cannot see it well.
- Type the same code you typed into your repl and press "enter":
The code will run, and you will achieve the same result as you did in the repl. However, anything that is run in the DevTools will not make permanent changes. It is essentially a tool to quickly see how changes affect the webpage being displayed in the browser, but it does not rewrite the code. It can be thought of as a "sandbox" for code. These tools are also used for finding bugs in code or identifying errors. This section has given you a basic familiarity with DevTools, and an idea of what replit was meant to simulate. However, we will be working with replit for a while in this series.