[Tutorial] How to Use Google Chrome Developer Tool

• Tweet
• Sharebar

• Tweet

Google Chrome is the fastest Internet browser and other than a web browser it is very useful in many ways. There are a lot of plugins/extension are available for free for Chrome.

Google Chrome comes with a full featured application for web developers which is very helpful in inspecting the web page components such as HTML,CSS,PHP or JavaScript. The code inspector of Google Chrome looks just like Opera Dragonfly but it is much easy and user-friendly than Dragonfly. Even launching procedure is same as Dragonfly. You can launch this application by using keyboard shortcut Ctrl+Shift+I or by clicking right and then selecting option “Inspect Elements” and it is just like Opera Dragonfly.

Click to View Full Size Image

The developer tool of Chrome is very helpful in web designing such as CSS editing. With the help of it you can locate any HTML block by just clicking on that block and can find the CSS style of it. Its JavaScript console is also a very good tool for JavaScript developers. You can find out the JavaScript code in page source easily.

There are three ways to launch Chrome Developer tool

• By clicking right > Inspect Element
• By Selecting Top right tool bar icon > Tools > Developer tools
• By using Ctrl + Shift + I

After launching the application use right click > Inspect Element wherever you want to inspect the page element