≡ Menu

Firebug-Debug,Monitor and Edit CSS,HMTL,Javascripts Live in WebPage

Some time you will find a blog with outstanding and cool design. You would like to follow the same designing approaches in order to make your blog theme outstanding and cool looking. However if you have less CSS and HTML knowledge then probably it will be difficult to makeup your blog theme just like the blog you liked. You will have to find the CSS code used for a particular function e.g Author Bio, Header Customization, Side Bar Designing, Font Size and style etc. Here is a very useful firefox plugin that enables you to Debug, Monitor and Edit CSS, HMTL, Javascripts Live in WebPage.

Firebug is a very useful Firefox Add-ons, that enables you to see the source code of a particular function of any blog or website. Let say you want to know the CSS code of Techmaish sidebar “Popular Posts” entry. You just need to install the plugin, and then put the mouse cursor on the area, and you will get the CSS code. (Screen shot)

firebug firefox add-onsThis is just an example, you can do a lot of things with Firebug. You can modify any blog design in your Web browser, edit HTLM or Javascripts in webpage etc. The modification will only shown in your browser. Simply it is just a preview feature that will allow you to see the preview of your blog design before applying a particular code.

How Firebug Works?

When you will install Firebug pluin in your firefox, you will see a firebug icon on your browser status bar. By clicking on that you will see another box just at the end of the page. Where you can adjust and modify things in a blog or website. You simply place the mouse cursor over the place for which you want to know the CSS code or want to adjust width or height.

Copy CSS of blog1. Click on the icon to enable Firebug

2. Click on that mouse and place at any where at the blog or website to know its CSS or HTML code.

3. Click on “CSS” button to know its CSS code OR click on “HMTL” button to know its HTML code.

4. Click on the “Edit” button to modify the code and preview it in your browser. The changes will only effect in your web browser. This is just a handy tool to see your blog before actually applying all the codes.

Install Firebug

{ 0 comments… add one }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.