If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Developer Tools

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.

Learn More…

 

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.

 

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.

Developer Tools, 4.0 out of 5 based on 15 ratings