Getting started with chrome developer tools
Tags: chrome, devtools, webdev, javascript
Published: 2021-07-15 06:58:18

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.
![devtools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xlhslpy2oppk7u4wny3.png)
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 
![Elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f184081ngvai91qg19j.png)
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 
![selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/247galruz6zgx3f3cqf3.png) 
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 ![sources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9a7sypt8bnglnbhfrc6j.png)

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)
![sources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob6hib8yu94i8vuwpzql.png) 
and you can remove that item using this thing 
```js 
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 
![throttling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3um65fnc8c1sc0m9w35.png) 
and also you can check how much time content is taking to load ![speed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otlr0cudkhnrni5gjoa4.png)

**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](https://web.dev/measure/)
**Security**
you can know more about site is secured or not which certificates like [digicerti](https://www.digicert.com/tls-ssl/business-tls-ssl-certificates?ef_id=CjwKCAjwlrqHBhByEiwAnLmYUGLn72x56d2SJTXbz2D_jO2J_ZxfaHdkLz6G4ygFFJ02UEv_9AaoZBoCT9cQAvD_BwE:G:s&s_kwcid=AL!6100!3!474776495915!e!!g!!secure%20site&campaignid=197474813&adgroupid=59344376853&gclid=CjwKCAjwlrqHBhByEiwAnLmYUGLn72x56d2SJTXbz2D_jO2J_ZxfaHdkLz6G4ygFFJ02UEv_9AaoZBoCT9cQAvD_BwE) 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](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots/)

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 :)