How To Use Chrome Dev Tool for Web developing and Designing

Google chrome is the famous web browser. But there are some features built inside chrome that many of us don’t know. One of the main feature used by many web designers and developers is ” Chrome Dev Tool ”. Google chrome can be used as “What you See Is What You Get (WYSIWYG) editor for web pages. Google chrome can be used for performing mathematical calculations as well as Date calculations.

HOW TO OPEN CHROME DEV TOOL

Open google chrome on your desktop and press Ctrl+Shift+I on the keyboard. Now Chrome Dev tool window will be displayed. Then select the magnifying glass icon that appears at the left corner of the chrome page.

FEATURES

1.REARRANGING THE LOCATION OF ELEMENTS IN A WEB PAGE

Using Chrome Dev tool you can easily change the order of the

elements that appears on the page. Click the element , image or paragraph for which you want to change the location. Then select the magnifying glass icon and drag the element to a new location. This is how the order of elements can be changed in chrome.

2.CHANGING THE COLOURS

 

chrome-dev-tool

For writing colors in web pages , only HexaDecimal formats like

##AABBCC are used often. But chrome dev tool supports plain English Like green, gold etc. if the user type the first character, then chrome dev  tool will show all the possible colors that begins with that letter.

3.REVEALING THE HIDDEN PASSWORDS

                         Google chrome will autofill the password field whenever the user login to a form.the characters that we give in password field are hidden inside asterisk symbol. But chrome dev tool allows the user to change the settings, like changing the password <input field> from “password” to “text”. Now the characters in password field are revealed.

4.EDITING THE PAGES

Normally web pages are non-editable in the browser. But if a simple trick is applied then the user can edit the web pages inline. Open chrome dev tool and select console tab. Now type “document.body.contenteditable=true” at the command prompt. Now the page becomes editable.

5.USING CHROME AS A CALCULATOR

If the compatible mode is active , then the user can perform arithmetic calculations and date calculations in chrome. 

OTHER FEATURES

  • In console window , the user can run multi-line command to extract data from the web.
  • With Chrome dev tool, it is also possible to fake the location.