Guide to JS Developer Console for beginners

1. Console

1.1 Go to Settings
1.2 Go to More tools
1.3 Go to Developer Tools
1.4 You can go to Developer Tools directly with Ctrl+Shift+i (windows)
1.5 Here switch the tab from Elements to Console
1.6 Here is your console!!
1.7 Here you can try writing

alert("hello");
console.log("hello from console");
prompt("Hey! Whats your name");

1.8 If you need to modify a command that you passed through the Console, you can type the up arrow (↑) key on your keyboard to retrieve the previous command. This will allow you to edit the command and send it again.

You can modify HTML from console, but as the page refreshes, the changes will not exist, you can just experiment there.

2. DOM - Document Object Model

DOM is created every time the browser reloads the page.
The DOM is a tree of Objects and shows the HTML elements within a hierarchical view. The DOM Tree is available to view within the Elements panel in Chrome.

Also you can modify the styles by unchecking the box. You can find side panel where styles applied to the web page is visible.

Notice how one style is removed by unchecking the box, appears as strike through

3. Network

This is to monitor and record network requests.
Reload the page to see network activity. Right now it is empty.

After reload :

See the network activity. It shows Name, Status, Type, Initiator, Size, Time and Waterfall.

• Status - The HTTP response code.
• Type - The resource type.
• Initiator - What caused a resource to be requested. Clicking a link in the Initiator column takes you to the source code that caused the request.
• Time - How long the request took.
• Waterfall - A graphical representation of the different stages of the request. Hover over a Waterfall to see a breakdown.

4. Responsive Design

In chrome, you can check whether your website is device compatible or not.

You can change dimensions by clicking on the three dots near device icon on top left. Select 'Show Media Queries' there and adjust the dimensions which are visible on the top of browser window.

Thanks for reading!