At the Forge - Firebug
alert("value of x = '" + x + "'");
This month, we look at Firebug, so that we can debug, inspect and optimize modern Web pages. Firebug already has improved my ability to debug modern Web pages dramatically, and I wouldn't be surprised if this turns out to be the case for many other Web developers.
Firebug is distributed as an extension for the Firefox Web browser. It is most easily downloaded and installed from the Firebug site (www.getfirebug.com). To install it, click on the download Firebug button. If you already have told Firefox this is an allowed download site, you will be able to download and install this Mozilla extension. If not, you need to add getfirebug.com to your list of trusted download sites, and then repeat the download procedures. Once the extension is installed, restart Firefox.
Once you do this, your Web browser will look much the same as before, but with some small changes. First, there now will be an icon at the bottom of the screen in the status line. This icon will look like either a green V in a circle (to indicate that it is running) or a gray circle with a slash through it (to indicate that it is disabled). Firebug can be enabled all of the time, but you're probably interested in debugging only a small number of sites that you visit. Thus, it's useful that by clicking on the Firebug icon—or by going to Tools→Firebug in the Firefox menu—you can indicate the sites for which Firebug should be active.
You can add a new site to this list by selecting open Firebug from that same Tools→Firebug menu, or by adding it manually with the allowed sites dialog box from that same Firebug menu. In either case, the site you currently are visiting will be viewable in Firebug.
Now that we have started Firebug, what can we do with it? Let's have some fun by going to the Linux Journal site (www.linuxjournal.com). Activate Firebug for this site, and your browser window will be cut in half, with the top half still showing the Web page and the bottom half containing Firebug. I generally prefer to work with Firebug in this way, but if you prefer to keep your browser window separate from your debugging window, you might want to choose open Firebug in new window, rather than simply open Firebug.
The main menu for Firebug contains the Firebug icon, which offers most of the same menu options as the icon in the status line and Tools→Firebug menu, along with links to the Firebug documentation and home page. An Inspect button always sits next to that icon, and it lets you zoom in on a particular item on the page. The rest of that menu bar changes according to the context in which you are operating, which is determined by the second row of buttons, marked Console, HTML, CSS, Script, Dom and Net.
One of the first, and easiest, tasks to take on with Firebug is debugging HTML. Click on the HTML button and choose Inspect. You immediately will see the HTML source code for the current page highlighted in the Firebug window.
Now, here's where the magic begins: with HTML/Inspect selected in Firebug, move your cursor over the Web page (the upper frame). As you move the cursor, the HTML element over which it is passing is highlighted in blue. In the Firebug frame, the HTML source corresponding to that rendered content also is highlighted.
This functionality is particularly useful when I know something is going wrong with the rendering of my Web page, but I'm not quite sure which part of the HTML source is to blame. A few clicks of the mouse later, and you easily can know which part of the file you need to edit.
Firebug highlights the HTML source code that it displays, albeit using different colors than the View Source page that Web developers know and love. (I think that Firebug's color choices are better.) Moreover, Firebird displays the HTML source as a tree, including indentation. This, along with a display of all of the current element's parent tags (next to the edit button on the top row) provides a great sense of the current element's context in the document.
Inspecting the HTML certainly is useful and interesting, but it gets better. If you double-click on the text in the Firebug frame, you now can edit it. Obviously, your changes do not get saved back to the server, meaning you can return to the original content by refreshing the page. Nevertheless, it is quite useful (and fun!) to replace text on existing pages, right from your browser.
Replacing text in an HTML element is a good start, but what if we want to modify the markup itself, rather than only its text or attributes? Right-clicking on the tag (or any of the text within the tag) displays a pop-up menu, letting you copy the HTML, innerHTML or XPATH of the selected tag. You can ask for the selected tag to be displayed in the top frame, scrolling if necessary in order to reach it.
Finally, you can add new attributes to this element or ask to inspect the element in the DOM tab. And indeed, the DOM view provides another way of looking at the same document. While still inspecting one of the HTML elements, click on the DOM button in the second row of the Firebug frame. The frame changes its appearance, listing a large number of DOM attributes associated with the element. Thus, inspecting an image in the DOM tab shows that its type is IMG, while inspecting a link shows that it is of type A. As always, Firebug lets you edit any attribute you like by clicking on the value and replacing it.
|Designing Electronics with Linux||May 22, 2013|
|Dynamic DNS—an Object Lesson in Problem Solving||May 21, 2013|
|Using Salt Stack and Vagrant for Drupal Development||May 20, 2013|
|Making Linux and Android Get Along (It's Not as Hard as It Sounds)||May 16, 2013|
|Drupal Is a Framework: Why Everyone Needs to Understand This||May 15, 2013|
|Home, My Backup Data Center||May 13, 2013|
- Nice article, thanks for the
1 hour 19 min ago
- I once had a better way I
7 hours 5 min ago
- Not only you I too assumed
7 hours 23 min ago
- another very interesting
9 hours 16 min ago
- Reply to comment | Linux Journal
11 hours 9 min ago
- Reply to comment | Linux Journal
18 hours 3 min ago
- Reply to comment | Linux Journal
18 hours 19 min ago
- Favorite (and easily brute-forced) pw's
20 hours 11 min ago
- Have you tried Boxen? It's a
1 day 2 hours ago
- seo services in india
1 day 6 hours ago
Enter to Win an Adafruit Pi Cobbler Breakout Kit for Raspberry Pi
It's Raspberry Pi month at Linux Journal. Each week in May, Adafruit will be giving away a Pi-related prize to a lucky, randomly drawn LJ reader. Winners will be announced weekly.
Fill out the fields below to enter to win this week's prize-- a Pi Cobbler Breakout Kit for Raspberry Pi.
Congratulations to our winners so far:
- 5-8-13, Pi Starter Pack: Jack Davis
- 5-15-13, Pi Model B 512MB RAM: Patrick Dunn
- 5-21-13, Prototyping Pi Plate Kit: Philip Kirby
- Next winner announced on 5-27-13!
Free Webinar: Hadoop
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers
Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.
Some of key questions to be discussed are:
- What is the “typical” Hadoop cluster and what should be installed on the different machine types?
- Why should you consider the typical workload patterns when making your hardware decisions?
- Are all microservers created equal for Hadoop deployments?
- How do I plan for expansion if I require more compute, memory, storage or networking?