Why You Should Know Firebug

Using Firebug to better understand the webclick on images for full size.
Firebug is a plugin for Firefox that has revolutionized web development. For many it has come to replace the Web Developer plugin for Firefox. Someone who works in internet advertising/media or web development should understand how webpages work. This intro to Firebug will cover some basic and interesting features of the tool. There seems to be too much emphasis on link building plots and SEO gimmicks that make a website into a house of cards. Nothing beats good site design and understanding of the web.

Design with CSS and HTML

Click the inspect element button and hover over the CSS box model or element, when the element is active a blue border will surround it. While the inspect element button is depressed wherever you mouseover on the page will be shown in the code in the firebug window . Now look at the style tab on the right side of the console. You can edit the CSS by clicking on the style rules, there is an autocomplete feature similar to Dreamweaver, you can cycle through the variouse autocomplete suggestions by pressing tab. This is for editing existing style rules on the page. The change appears instantly. Creating a new style rule is a little less intuitive and feature rich. You have to first click on the CSS tab, then click the “edit” button. The css will now be editable similar to a simple text editor, without the autocomplete feature.

  • At the top of the Firebug window you will see the CSS heierachy, you can mouse over this to drill down to your specific element and have a visual of how your box models and div wrappers fit together.

  • Creating Mockups

    Firebug can be used with Dreamweaver and Photoshop in the design and layout of your page, pages can initialy be coded in Dreamweaver then tested and fine tuned in Firebug, so you can edit on the fly, with instant previews in your browser. It can also be used to gather inspiration from other websites, by exploring their design.
    Quick Custom Templates
    A) Find a template layout that you like.
    B) Replace the images to this template with your own images that you create in Photoshop,
    C) Change the HTML and CSS in Firebug untill you get your exact look, start with editing color values and your layout with relative positioning and floated divs.
    D) Return to step B untill fine tuned

    Network Load: Yslow and Net Tab

    Yslow is a plugin developed by Yahoo for Firebug, the plugin analyzes your site for 34 best practices (as decided by Yahoo) divided into 7 categories; the page is then given a grade from A to F. A website should load fast for both users and search engines and this plugin helps you optimize your page for speed. YSlow is a combination of a DOM tree crawler and a packet sniffer. The DOM tree contains all the elements that might make up a web page. YSlow has a built-in DOM crawler and also pulls data from the NET panel to monitor different network requests.

    Running YSlow.

    Go to the YSlow tab and click run test, you do not want Yslow to automatically run whenever a page opens because it is memory hog and can cause the browser to freeze Do not run it on more than one site at once and restart your browser after running a test, or your browser may end up running at 1,000,000 K. Once your site is graded you can click to for an explanation and solution on speeding up your site. You can also monitor your network load in detail with the network tab; here you see all the GET and POST requests and the HTTP status code for each one. You can also see the size of each request, how long each request took to load and the order in which they were processed. You can expand each request for a detailed look at each individual header. To see the total network usage from one content type you can sort the files by, CSS, Javascript, XHR, Images and Flash. By sorting you can tell if it is one kind of file that is causing problems. Another interactive features include being able to mouse over the status code and if the request is for an image you will see the image pop up.

    Pen Testing

    Firebug is a good program for pen testing. Here is a website for a television station that will only show you the content if you are from a specific country. Client side validation should only be used for end user convenience such as making fields required on forms. Sadly many programmers use client side validation for much more. Here is a way you can find if your javascript programmer slacked off rather then using server side validation with Ajax and post requests. If you insist on using client side validation, obscuring the code to make it hard to understand adds at least some layer of protection. Other client side issues inlcude using “display:none” to hide elements which simply be set to display:visible in firebug. Another Firefox plugin used in pen testing from a the POST/REQUEST angle is Tamper Data.

    Here is another example of bad client side validation. This site forces you to give up your email to view the content. This give uses the Built in javascript command line. Any javascript entered into the command line will run on the page, since javascript is weekly typed and runs one at a time, whatever you type will overright any previouse rules. This is a great way to debug your javascript.  you can also game sphinn like this,  the crappy SEO site where spammers hang out and stroke each others ego’s. another site where you can do this is Twibbs.com, the twitter directory. get yourself on the home page!

    One thought on “Why You Should Know Firebug

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s