Those who don’t know what firebug is, let me tell you, it’s a firefox extension. It can not run standalone; you need firefox installed in it. To know what firebug can do visit http://www.getfirebug.com/.
Now let’s come to the point. Here I am going to show you only how to debug HTML and CSS.
Let’s take a small HTML file to make the session easier.
<html>
<body>
<p>This is a text</p>
</body>
</html>
Now open this file in Firefox. Once the page is loaded, press F12, the Firebug console with open.
Other ways to open firebug are:
1. Tools > Firebug > Open Firebug
2. Click on the small green tick icon on the bottom-right corner of firefox.
If you are using firebug for the first time then once the firebug consol is open click on “Enable Firebug for local files”
After you click on “Enable Firebug for local files” you will see something like the image below.
Click on the small + sign beside <html> and and you will see the page tags being unfolded one by one.
Hover you mouse on <p>This is a text </p> and see how the page element being highlighted on the page, as shown in the image bellow
Now click on “This is a text” and notice that it becomes editable.
Change the text to “This is another text”. See how the text in the page also changes. This is one area where Firebug rocks. Real time editing, forget going back and forth to editor and browser, when you can edit directly on page. Only this is these are all temporary changes, and if you refresh the page all changes will be gone.
Now let’s add some HTML real time.
Right click on <body> and choose “Edit HTML …” from the popup menu. Once you are in the edit mode type
<p>another line</p>
after the first line. See the page changes real-time. After you add the line, click on Edit button beside “Inspect” button to exit the Edit mode.
That’s all for today, please let me know how is it going. The tutorial series will not be for advanced user, but novice. I will try to be clear and explanatory as much s possible. Please let me know which places you need more clarification or I need to improve.
Powered by ScribeFire.
