The JavaScript console in Chrome, or just the Console for short, is an extremely powerful tool that lets you enter JavaScript or jQuery commands that interact with the web page you're currently viewing.
You can even write JavaScript or jQuery in your own page, log statements therein, view it in Chrome, and see exactly the diagnostic information you needed.
The Console is so important, it even has its own keyboard shortcut! Type Command + Alt + J (Mac) or Control + Shift + J (Windows/Linux).
Let's take a simple example at first. You can write pure JavaScript in the Console and execute it. Let's say I want to combine two strings, "Hey " and "friends!" to make a complete sentence.
I'd type the following code directly into the console, hit enter, and I'd get my result of "Hey friends!"
console.log('Hey ' + 'friends!');
The console is a great tool for those starting to learn JavaScript or jQuery, since it allows instant results from code you want to test.
If you have any code files locally, you should try to run console.log from within your code file, and then open up the console in the browser. You'll see the same result!
jQuery in the console
You can also run jQuery (an open-source JavaScript library) from within the console. To do so, make sure that the page you're on has jQuery included as part of the code!
For example, here on this course page, open up your JavaScript console. Paste the following line of code inside:
$('body').css('background-color', 'orange');You'll notice the entire page background color changes! Here, you've run a jQuery command that identifies the background-color CSS property and updates its value to orange. Of course, when you reload the page, the modification is no longer there.
Try out some of your own JavaScript or jQuery commands in the developer tools console now!
