Easy WebDesign with Google Chrome

Google Chrome comes with excellent Developer's tool that has essential features. Many users may not observed it. Here i want to explain how to design a web page with Google Chrome's Developers tool. before that you should know how to use this tool and what all the things it can do:

Functionalities:

1. View code of a pericular element by a single click. along with css style information.

2. Excellent Javascript console, which is helpful for debugging

3. Javascript Error Highlighing

4. Resourse viewer

5. Modify Elements and view results in the page itself without reloading

To open this tool just Right Click on the perticular page and select 'Inspect Element' option, OR click 'Settings' Icon and goto Tools>Developer Tools. Here you can see different tabs such as Elements, resources, Network, Scripts, etc. Each section allows you to edit corresponding catagory items. In the elements section, you can edit the whole page.

To modify an element or html tag, just right click and select 'Edit as HTML' and make modufications. at the same time you can see results. You can also add CSS style codes to elements. It has it's own color picker that makes your task easy. after each modification is done, right click on it and copy the code and put it in your file.

No comments:

Post a Comment

Thank you for commenting. Please keep visiting.