Tuesday, 1 July 2014

How to use a firebug ?




What is Firebug?
Most of you who are not developers may not know about the firebug. Firebug is a extension or add-0ns for browsers. Using firebug you can select different elements and properties used in making  a webpage. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can download Firebug 2.0.1 for mozilla firefox and Firebug lite for google crome.

How to download it??
I m going to tell you how can you download firebug for mozilla,
1.Download firebug 2.0.1 add-on from here Firebug 2.0.1
2.It will just take some time to download and install.

Firebug :Hands On (Part 1)
1.After installing the Firebug , you can see a bug icon on the top-right corner of your browser.
Untitled

2.Now lets make a simple HTML document for testing the firebug. Make a HTML document index.html and type in the following  code :

<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
</head>
<body>
<p>Hello World!</p>
<p class="foo">Another paragraph, but this one has a class.</p>
<p><span>This is a span inside a paragraph.</span></p>
<p id="bar">Paragraph with an id.
<span class="foo">And this sentence is in a span.</span>
</p>
<script type="text/javascript"
src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>
</body>
</html>

3. Now go to your browser and click on firebug add-0n and now start typing the commands.
Untitled

4. To select all paragraph from the HTML document enter the command,
                                                                                       $("p");
Press Run or ctrl+enter to execute command. The following will be the output of the command,
                       Object[p, p.foo, p, p#bar]
ie. it has selected all the paragraph from the HTML document with class "foo" and with id "bar".


0 comments:

Post a Comment