Working with the JavaScript Console

Modern JavaScript Lets Get Started Writing Code
4 minutes
Share the link to this page
Copied
  Completed

Transcript

In the previous movie, we used document dot right to be able to get some output that we could see, it actually wrote the text. Welcome Steven, and our HTML page. In this movie, we're going to look at the JavaScript console. The JavaScript console is part of the Chrome Developer Tools. I'm using the Chrome browser here. There are developer tools available in other browsers as well.

Internet Explorer has developer tools. Safari has developer tools, and a fire. There are extensions for Firefox that give you developer tools. They basically all work very similar in the different browsers. But as I mentioned, I'll be using Chrome. So let me jump back to the JavaScript file that we're writing.

The last line was document dot right. I'm going to change that now. I'm going to change it to console dot log. I'm going to go ahead and save that. I'm going to jump back to my HTML page. And I'm going to refresh it.

Notice the text that was down here at the bottom, the welcome Steven has disappeared. Well, that's because I removed the document, right? So it no longer told it to write the text out to the HTML page. But what it console console dot log do, where does console dot log send this output? Well, it sends it to the JavaScript console. Now, how can you access the Java JavaScript console?

Well, there are a couple ways to do that. A quick way is you can right click anywhere on HTML page. And you can choose inspect. These are the developer tools that are that are popped up here. Now when you do this, you may find that it's added to the bottom of the browser window, I have disconnected mine, I like it in a separate window so I can work with it easier. All right, I'm gonna make this a little bit smaller so you can see better.

Now, you'll see across the top, there are a bunch of different menus, one of which is console. That is the JavaScript console. Notice the text that's showing up. Welcome, Steven. I'm not going to take time to introduce these other elements up here. You can, there's a lot of resources out there you can use to learn about the developer tools, which I think is advantageous if you do a lot of work on the web.

But I do want to spend most of time talking about the console. So one of the purposes of the console is it allows us to see output without changing the HTML page. So if you're working on some JavaScript and you're wondering if it's working properly, quick way to do a test is to send some output to the console. And then you're able to look at the console and see if it's working correctly. Something else you can do in the console is you can enter JavaScript directly. So let's go ahead and do the exact same JavaScript that we had inside the app.js file.

So I'm going to use var to declare variable again. set it equal to Steven. Okay. Now if I want to go to a new line, I can press Shift Enter. Or I could simply starting start typing the next line of JavaScript right after the semi colon. The semi colon separates different JavaScript statements.

So I press return, shift return. And now I'll enter console dot log. And we'll do the exact same thing. Welcome, space, concatenate, name, and concatenate an exclamation point, then close the method and put a somewhat semi colon at the end. Now when I press enter, it displays welcome Stephen, just like the app.js file. So we will be using the JavaScript console quite a bit as we learn the basics of JavaScript, especially in the first part of this course.

Because it's important to be able to enter things quickly see how it works in JavaScript. It gives you immediate feedback. And that's one of the one of the great ways to learn JavaScript. Alright, let's continue on with some more basic information regarding JavaScript.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.