36
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
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
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
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
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
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
"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
you can add items to sessionStorage using this
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");
undefinedMemory
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
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 :)
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 :)
36