Running JavaScript in browser console - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the browser console used for?

The browser console is a tool to write, test, and debug JavaScript code directly in the browser.

beginner

How do you open the browser console in most browsers?

Press F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac), then select the Console tab.

beginner

What happens when you type console.log('Hello') in the console?

It prints the message Hello in the console output area.

intermediate

Can you run multi-line JavaScript code in the browser console?

Yes, you can write multi-line code by pressing Shift+Enter to add new lines without running the code immediately.

beginner

Why is the browser console helpful for beginners learning JavaScript?

It lets you try small pieces of code instantly and see results, making learning interactive and easy.

Which keyboard shortcut usually opens the browser console?

A Ctrl+P

B Ctrl+Shift+I

C Alt+F4

D Ctrl+S

Ctrl+Shift+I opens developer tools including the console in most browsers.

What does console.log('Hi') do in the console?

A Shows 'Hi' in the console output

B Saves 'Hi' to a file

C Opens a new browser tab

D Closes the console

console.log prints the message inside the parentheses to the console.

How do you write multiple lines of code in the console without running it immediately?

A Press Alt+Enter

B Press Enter

C Press Ctrl+Enter

D Press Shift+Enter

Shift+Enter adds a new line in the console without running the code.

Which tab do you select to run JavaScript code in developer tools?

A Elements

B Network

C Console

D Sources

The Console tab is where you write and run JavaScript code directly.

Why is the browser console useful for beginners?

A It lets you test code quickly and see results

B It edits website images

C It blocks ads

D It speeds up internet connection

The console allows instant code testing, which helps beginners learn faster.

Explain how to open the browser console and run a simple JavaScript command.

Think about the keys you press and what you type to see output.

Describe why using the browser console is helpful when learning JavaScript.

Consider how seeing results quickly helps you understand code better.

Practice

1. What is the primary purpose of the browser console in JavaScript?

easy

A. To quickly run and test JavaScript code

B. To design website layouts

C. To write HTML code

D. To manage browser bookmarks

Solution

1. Step 1: Understand the browser console role

   The browser console is a tool inside web browsers used mainly for running and testing JavaScript code quickly. The other options relate to tasks like design, HTML, or bookmarks, which are not the console's main use.

2. Final Answer:

   To quickly run and test JavaScript code -> Option A

3. Quick Check:

   Console = run/test JS code [OK]

Hint: Console runs JavaScript code fast in browser [OK]

Common Mistakes:

• Confusing console with HTML editor
• Thinking console manages bookmarks
• Assuming console designs layouts

2. Which keyboard shortcut opens the browser console in most browsers?

easy

A. Ctrl + S

B. F12

C. Ctrl + P

D. Alt + F4

Solution

1. Step 1: Recall common browser shortcuts

   F12 is the standard shortcut to open developer tools, including the console, in most browsers. Ctrl + S saves files, Ctrl + P prints, and Alt + F4 closes windows, so they don't open the console.

2. Final Answer:

   F12 -> Option B

3. Quick Check:

   Open console = F12 [OK]

Hint: Press F12 to open console quickly [OK]

Common Mistakes:

• Using Ctrl + S thinking it opens console
• Confusing print shortcut Ctrl + P
• Mistaking Alt + F4 for console shortcut

3. What will be the output in the browser console after running this code?

console.log(2 + 3 * 4);

medium

A. 20

B. Undefined

C. 14

D. 24

Solution

1. Step 1: Apply operator precedence in JavaScript

   Multiplication (*) has higher priority than addition (+), so 3 * 4 = 12 is calculated first, then 2 + 12 = 14, which is the final result logged to the console.

2. Final Answer:

   14 -> Option C

3. Quick Check:

   2 + (3 * 4) = 14 [OK]

Hint: Multiply before add in expressions [OK]

Common Mistakes:

• Adding before multiplying
• Expecting string output
• Confusing output with undefined

4. You typed console.log('Hello World' in the browser console and got an error. What is the problem?

medium

A. Wrong quotes used

B. Missing semicolon

C. console.log is not a function

D. Missing closing parenthesis

Solution

1. Step 1: Check the syntax of the code

   The code has an opening parenthesis after console.log but no closing parenthesis at the end. JavaScript syntax rules require matching parentheses; quotes are correct, console.log is valid, and semicolon is optional.

2. Final Answer:

   Missing closing parenthesis -> Option D

3. Quick Check:

   Syntax error = missing ')' [OK]

Hint: Check matching parentheses in console code [OK]

Common Mistakes:

• Ignoring missing parenthesis error
• Blaming quotes instead of parentheses
• Thinking semicolon is mandatory here

5. You want to quickly check the value of variable z in the browser console after running this code:

let x = 10;
let y = 5;
let z = x + y;

Which command will show the value of z immediately?

medium

A. console.log(z);

B. print(z);

C. echo(z);

D. show(z);

Solution

1. Step 1: Recall how to display values in browser console

   console.log() is the standard JavaScript function to print values to the console. print(), echo(), and show() are not valid JavaScript functions in the browser console.

2. Final Answer:

   console.log(z); -> Option A

3. Quick Check:

   Show value = console.log() [OK]

Hint: Use console.log() to display values [OK]

Common Mistakes:

• Using print() instead of console.log()
• Trying echo() which is not JavaScript
• Assuming show() works in console