Chrome Developer Tools.
Hi guys. after long time. today article about google chrome browser developer tools. first i hope to discuss what is developer tools?
Web development tools often called as devtools. It allows web developers to test and debug their code. It is different from web site builders and integrated development environment. Because that they don't assist in the direct creation of web page. As well as this tools are used for testing the user interface of web site or web application.These developer tools come with browser like add-ons or built in features..
There are many web browsers in industry. Chrome, firefox ,opera, safari and internet explorer take main place among them.. These browsers have this developer tools. Most of developers use different names to call of them. for example:-
FireFox – F12 Web Console / Browser Console
Google Chrome – Chrome Developer Tools (DevTools)
Internet explorer and Microsoft Edge – F12
Opera – Opera Dragonfly
Safari– Safari Web Development Tools
Now we come back to our topic ;
Now i hope to discuss chrome developer tools.Chrome browser have set of developer tools.That they have directly built tools. this tools help to edit page when run the page and quickly diagnose problems and which is help to built better websites,faster.
Insight the browser there are many ways to open devtools. Because different users need to quick access to different parts of the devtools UI.
For example:-
When we need to work with DOM or CSS, right click-->select inspect. after that jump into the element panel. as well as we can use as shortcut command+option+j (mac), or ctrl+shift+c (windows,linux).When we need to see logged messages or run java script , can press command+option+j(mac) or ctrl+shift+j(windows, linux) to jump straight into the console panel.
Device mode
Stimulate mobile devices.
Elements Panel
View and change the DOM and CSS
Console panel
View messages and run java script from the console.
Sources Panel
Debug java script ,persist changes made in devtools across page reloads, save and run snippets of Java Script and save changes that you make in devtools to disk.
Network Panel
View and debug network activity
Performance Panel
Find ways to improve load and runtime performance.
Memory Panel
Profile memory usage and track down leaks.
Application Panel
Inspect all resources that are loaded including indexed DB or Web SQL databases, local and session storage , cookies, application ,cache, images, fonts and style sheets.
Security Panel
Debug mixed content issues, certificate problems, and more.
