Getting started with chrome developer tools

Hello there :)
today we are going to learn practically about how we can use chrome developer tools if your into webdev/security related domain then it is more beneficial to you .
So let's start
First thing you need is latest chrome browser installed then do a right click and look for Inspect or do CTRL+SHIFT+I then you can see developer tools section out there.

In this above image in preferences you can do basic things like theme changes and formatting disable / enable javascript and in the Workspace section you can add your own reactjs or any project and you can change code from your browser also and in the experiments section those are upcoming features you can test it out in your browser in Devices you can add custom devices or existing devices for checking in different different devices how your website/web-app behaves or work and in throttling you can customise your internet connection speed according to your needs and in shortcuts you can use CTRL+L for clearing console and many more shortcuts to save your seconds/minutes :)

*Elements section *
if you go the elements section and did right click to the header or any tag you can edit that with right click and then below thing

and also if you do select to the specific heading tag or paragraph then after right clicks you can copy all his CSS styles and improve it and use it for yourself or for your project like implementing twitter animations for buttons in your webapp

and also you can do duplicate or copy of the elements

Sources
In the sources section you we can create breakpoints for our code which to execute or not or stop only execute not debug
like that

If you have ul(un ordered list and you want to copy this js path particlular list item then you can get js path by this)

and you can remove that item using this thing

function onClickEvent(){
    let mycount=1;
    alert("your a best learner"+mycount+'excercise');
    document.querySelector("body > ul > li:nth-child(2)").remove();
}

we use it as IDE(Integrated Development Environment) chrome workspace.

Console
"Preserve Log upon Navigation"
will persist console content by default. You can clear the console log by clicking the 'clear' button in the top right or opening and closing the tools.
we can use console.log to debug and for solving errors and also for displaying data more precisely using console.table().
Network
In this section you can turn on throttling like this change your network within in the browser

and also you can check how much time content is taking to load

Application
if open same application in another tabs then that data should be shared that called localstorage and data that is limited for that Session only that called sessionStorage we can save that data for that session
you can add items to sessionStorage using this

js sessionStorage.setItem("name","krishna");
undefined

Performance
For knowing more performance using you can refer web.dev
Security
you can know more about site is secured or not which certificates like digicerti site is using .

Memory
We can take heap snapshots to see it to take JS heap snapshots, analyze memory graphs, compare snapshots, and find memory leaks.
Know more hear

thank you for reading
And also i am open for front-end web development jobs and i have experience with react(8 months) a if anyone is having opportunity related to this domains please let me know i am passionate about learning new things and implementing projects.
have a great day ahead :)