Function-> 

a block of code designed to perform a particular task.

We need to call it
 function is defined with the function keyword, followed by a name, followed
by parentheses ()( which include parameters ).( follows same rule as
variables )

Function arguments are the values received by the function when it is

invoked.( it behaves like a local variable )

JavaScript reaches a return statement, the function will stop executing.

( otherwise it will give undefinded as output )

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce
different results.

Arguments are stored in key value pair and we can pass many arguments .

HTML

 Open the site you wish to debug with your Chrome browser.
 If you want to debug an element, right-click on it.
 Click on Inspect. (Clicking the Inspect option from the right-click menu will open the
Developer tools for you)

A — The element you debug

B -: Inspect element
C — The element’s HTML
D — The style Tab

Break on -> It is an alternative way of debugging your code, where you can put a breakpoint for
the result and travel back to the code (script) that causes it.

The steps are as follows.

 Press a right-click on the element that you want to set a breakpoint.

 Choose break on option
 Then select among Subtree modifications, Attribute modifications and Node
removal.
Types of DOM change breakpoints
 Subtree modifications. Respond to the removal or addition of a child of the selected
node, or to the changes of a child’s content.
 Attributes modifications: It’s triggered when an attribute is added or removed on the
currently chosen node, or when an attribute value is changed.
 Node Removal: Triggered when the selected node is removed.

STORE A GLOBAL VARIABLE

Suppose you want to get a reference to an element live in your browser for debugging purposes.
Typically we use DOM methods like document.getElementById or
document.getElementsByClassName to get the element node reference. But, do you know it’s
just a once click away to do that with the “Store as global variable” feature?

 Use the context menu to select Store as a global variable option when selecting an
element in the DOM Tree.
 Input temp1 into the console to see the expression.

Scroll into view

If there is a DOM node that isn’t currently visible in the viewport, you can easily reposition the
viewport using this feature.

This is particularly handy when you’ve been debugging for a while and forget where you were or
can’t seem to find that element on that page.

Right-click the node and select Scroll into view. Your viewport scrolls back up so that you can
see the selected node.

COPY JS PATH

If you’re doing some automation testing, it is necessary to copy the JavaScript path of your node.
You can have it by inspecting the Copy JS path option in your context menu(right-click the
element you need to save the path)

Then you can paste (Ctrl+V) out the results in the console and see
Toggle a pseudo-class (Force state)
You can also toggle a pseudo-class like :active, :focus, :hover, :visited, :focus-within
or focus-visible: to remain in the state.

All you have to do is,

1. Go to the Styles tab in the Elements

2. select :hov.
3. Mark the pseudo-class.