Firebug Tutorial – HTML Tab : Examples 11

Firebug Tutorial

Section 2 : HTML Tab – Examples

Example 1.1. How to inspect the HTML element or how to figure out the structure of the web design you like

Note: I’m *NOT* encouraging people to copy the other people creative work. I’m just showing how to learn other people’s creation. Don’t get me wrong. :) If you are working in small software company, you probably might wear the multiple hats, which means you have to do coding (of course), user requirement, system design, UI design and so on. As you are not a designer, you may have some problems in designing things and not very sure about how to make things looks better.. so, you probably need to check other web designs and you need to adopt those designs to create your own one. For this fact, Firebug is the best tool for you. So, remember that it is not about copying thing. :)

Scenario ~ Let’s say you think that the menu bar of iPod Touch webpage of apple is impressive. You wanna know how the toolbar is created.

  • Open IPod Touch webpage in Mozilla Firefox.
  • Click “Inspect” button from the toolbar of Firebug console.
  • Move your cursor on the menu of the website by using mouse.
  • Click the element (menuitem) that you wanna inspect ( Note: I suggested you to select the first item of menu because it is easy to find out about the main HTML element. (Let’s say we selected “Apple icon” ))

  • (In our example, we selected the first menuitem of menu in webpage so that the related HTML element <A> tag is highlighted in “View Source” HTML panel. Don’t forget to take a look the “Style” panel at the right-side. The CSS rule that are styling to that <A> tag are shown in that panel. Then, You can easily figure out that the DIV called “global header” is the main for this menu. )
  • Select the DIV “globalheader”
  • Right-click on the element and select “Copy HTML ” from content menu.
  • Create new HTML file and pasted it within <body> tag.
  • After that, Check the CSS rule in Style panel. (In our case, “#globalheader” and “html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input” are the CSS rule that are styling to that A link. The blue link “nav.css” shows the source CSS file. Plus, the inherited CSS rules from ipod.css and base.css are also shown in “Style” panel)
  • So, copy those CSS and pasted them in your html file.You can repeat this step to find the CSS rule for each HTML element. But it took some times to grasp all CSS rules since you have to go one HTML element after another.. So, the best way would be copying all CSS rules from the source.
  • In order to copy the whole CSS rules from the source file, click the blue link “nav.css” then it will take you to “Style” panel (not the one from HTML panel) as the picture below.

    The CSS rule that you selected in the “Style” subpanel of HTML panel will be highlighted.

  • Click “Edit” button on the toolbar of “Style” panel
  • Select all CSS rules and Copy
  • then, paste them in your HTML file.
  • Copy the inherited CSS rule for body tag from base.css and paste them in your HTML file.
  • Check the images path and copy those required images also.
  • Finally, you got the great menubar that you are looking for.

Let me know if you are not very clear about those steps.. I have uploaded the sample here. [link] You can download it if you wanna take a look the sample.

Screenshot

*****

Example 1.2. “Scroll into View” and “Searching” in HTML tab.

Searching feature of HTML is useful if you wanna find something in HTML Source. (The default search of Mozilla Firefox is for searching the text. not for searching the HTML source.) Searching feature is more helpful if you use “Scroll Into View” after search. If you found something you want in HTML tab then you can click “Scroll Into View” to scroll that thing into view.

Scenario : How to find your photo in 2kbloggers Photo Montage Page?

Let’s say you are one of members of 2kbloggers team. so, your photo will be included in Photo Montage page of 2kbloggers website. As there are too many photos in that page, it is not so easy to find yourself among those photos. The Firefox default search is useless for that case. Fortunately, The search feature of HTML panel of Firebug will help you to find your photo in very easy way.

Steps ~

  • Launch Firebug console in that page.
  • Go to HTML Console
  • Type your blog link (eg: http://michaelsync.net) in Search textbox. (note: please type a lit bit slow and wait)
  • After you finished typing, the Anchor element which is belong to your link will be highlighted in “View Source” panel.
  • Move your cursor on the src of image link. Firebug will show the photo that you are looking for.
  • Right-click on that element and click “Scroll into View”
  • Then, check the photo at the first line under toolbar of Mozilla Firefox. Your photo will be there at the first line..

That’s all. Don’t hesitate to contact me if you have any problem for those tutorials.

Thanks for reading.

11 thoughts on “Firebug Tutorial – HTML Tab : Examples

  1. Pingback: Firebug Tutorial : HTML tab - Playing with HTML DOM « Michael Sync

  2. Pingback: Michael Sync’s Firebug Tutorial @ Takealook

  3. Pingback: Continuamos con los tutoriales de Firebug

  4. Reply Peter Müller Sep 25,2007 10:25 am

    > Note: I’m encouraging people to copy the other people creative work

    Maybe you should put a big NOT in there somewhere?

    And many thanx for the tutorial.
    Peter

  5. Reply Michael Sync Sep 25,2007 12:43 pm

    :) ohhhh my god… i missed to put “NOT” in that sentence.. I have just updated.. Thanks a lot.. Peter… Thanks. :)

  6. Pingback: Michael Sync » Firebug Tutorial : HTML tab - Playing with HTML DOM

  7. Pingback: Michael Sync » Firebug Tutorial : Section 4 - Net, CSS and DOM tabs

  8. Reply bedbug Apr 7,2008 11:08 am

    Hi Michael, thanks for sharing alot of useful tips about firebug. I followed with great interest along section 2 “html tab examples” until I got stucked somewhere along copying css rules and pasting them inside the html file. Do we have to copy ‘all’ the css entries from nav.css, bass.css, ipod.css and also the images from apple’s website? I notice that the sample you provided only shows css entries from nav.css and the images referenced those from localhost host instead. Another question is that when I clicked on the Net tab(Section 4 tutorial), I dont get to see any entries in my firebug console??

  9. Reply steve Aug 6,2008 4:47 pm

    Hi! Great tutorials…I am trying to edit HTML and I right-click a node, then select “edit html…”. As soon as I begin typing, the changes begin to take effect, even before I finish. Then, the html window I’m editing changes back to the node view! It seems impossible to edit this way. There simply isn’t enough time. Does anyone know how to stop this from happening? Thanks!

  10. Reply Joe Seliya Dec 28,2009 9:25 am

    Thanks for the valuable tutorials. As a newbie in both javascript and web content I have a quick question if you dont mind.
    Can firebug be used to parse the javascript content that is displayed with an onclick statement? In otherwords I am trying to parse the url links that appear at the onclick statement and I cannot see in firebug thru the script content where the list of parameters are coming from?

  11. Reply Sachi Jul 8,2011 7:33 pm

    Great! . Very thankful for yours firebug tutorials .

Leave a Reply