Elements are used to show HTML and CSS coding of the current web page.
The console is used for log diagnostic information to help debug your web page or application and enter commands that interact with the document and the Chrome Developer Tools.
Sources help to view the web page files. You can see all files that used on the website and easily open by pressing CTRL+P or by click on files name.
Network panel records information about each network operation in your application, including detailed timing data, HTTP request and response headers, cookies, Web Socket data, and more. The Network panel helps you answer questions about the network performance of your web application.
A Timeline shows you where time is invested when a web page is loaded/refreshed. It gives you a complete overview of where time is spent when loading and using your web app or page.
Profiles panel lets you profile the execution time and memory usage of a web app or page. These help you to understand where resources are being spent and so help you to optimize your code.
Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML5 Database, Local Storage, Cookies, AppCache, etc.
Security panel shows the security of a current website. It also shows SSL certificate details and warns you if the website is not protected and harmful for your computer.
Audit analyze the page as it loads. Then provides suggestions and optimizations for decreasing page load time.
1) Change the text temporarily of any website using Inspect Element.
- Highlight the word which you want to change, then right-click and select Inspect Element.
- Inspect Element will open, double-click on that word and change it and hit Enter.
2) Show the password using Inspect Element.
- Highlight the password which you want to show, then right-click and select Inspect Element.
- Inspect Element will open, then you will see password after the type.
- Replace this word password with text, then hit Enter key.
- Do this trick with your friends and enjoy 🙂
3) Change the color of text.
- Highlight any word, then right-click and open Inspect Element or Shift+CTRL+I or F12 key.
- Inspect Element will open, then you will see CSS coding under Element Tab.
- In CSS section, you will see the color. Click on it.
- You can change the color by entering the code of color or custom color palettes and color picker.
4) Change Picture/Logo of any website.
- Open the image which you want to replace, then Copy Image Address.
- The open image which you want to replace, right-click on it and open Inspect Element.
- Then you”ll see Image Link then double-click on this link and paste the link and hit Enter key.
5) View all files of websites.
- Open Inspect Element then click on Source Tab.
- You”ll see all files at left column in Inspect Element.
- Click any file which you want to open.
Interesting Post: 10 Useful Extension in Google Chrome