- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
Featured templates
MonsterONE Subscrioption
Developer Tools
June 15, 2011
While working with website templates you may often need to modify the HTML markup, CSS styles or JavaScript files. Usually to modify some elements on the page you should browse through the files and search for necessary line.
This post will show you how to make the process easier and clear using the browser developer tools.
The browser developer tools can be used to:
- Inspect the HTML markup
- Check and edit the CSS element styles
- Trace the JavaScript and Network errors etc
Mozilla Firefox
Mozilla Firefox browser doesn’t have any developer tools included so you need to download and install the Firebug plugin
It’s the most powerful and easy to use developer tool so we highly recommend you to use it.
Microsoft Internet Explorer
The MSIE browser has the included developer tool that could be enabled from the Tools > Developer Tool menu or pressing the F12 hotkey.
Opera
Opera browser developer tool can be enabled with the right click on the screen and selecting Inspect Element from the drop down menu.
Google Chrome
The Google Chrome browser developer tool can be enabled the same way as in the Opera browser – right clicking on the screen and selecting Inspect Element from the drop down menu.
Learn how to use Google Chrome Device Emulation feature.
Safari
The developer tool in Safari is disabled by default. So if you want to enable it go to Edit > Preferences > Advanced and enable the Show Develop menu in menu bar. Then you can open the developer tool window right clicking at the website element and selecting Inspect Element.
