My Understanding of the DEV-Tools!

**

What are browser developer tools🤔?

**
Basically dev-tool is nothing but the in-Built tools provided by the browser for the wide range of action on the web-page, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long it takes to load a page and optimize the pages cache and memory😯.

So, how to pull-up the dev-tools?
Well, it's simple you need to click =>
windows: Ctrl + Shift + I || F12
mac: Option + Shift + ⌘ + I || F12


_DOM-Manipulation:_

well DOM-manipulation becomes very easy and siplified with the use of dev-tool and you can easily modify and update the code live on the web-page for the better options.

• Delete Node (sometimes Delete Element). Deletes the current element.
• Edit as HTML (sometimes Add attribute/Edit text). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
• :hover/:active/:focus. Forces element states to be toggled on, so you can see what their styling would look like.
• Copy/Copy as HTML. Copy the currently selected HTML.

Well DOM-manipulation is not the only feature you get from the dev-tools, you can also make alteration in your CSS code. Which comes very handy for testing the design and UI.

devTool also provide you a easy and compatible view of your page on different device such as mobile devices, tablets or a wide-screen device, with the help of these design feature you can make alternation and manage your responsive design easily.

_JavaScript Console:_

console.log('hello') is one of the most famous and executed statement in the javascript console which can be viewed in the console option from the dev-tools window.
The console window allows you to access all the javascipt object and function for the test purpose and see for yourself what it return on the page. This comes in-handy at various times and help you to fix a logic for the javascript debugger and check for the breakpoints.

Secrect-Tips:

"You can use 'save all resouces' extension available on chrome to download the code of a webpage and use it to learn and view the code and understand the factoring of the code."

That's all for this Blog. I'll leave the responsibility of exploring the other features of the dev-tool on you.

KEEP EXPLORING AND KEEP TRYING🙌... untill next time😁.