At the Forge - Firebug
So far, we have seen how Firebug can help inspect and modify HTML. But, of course, HTML provides only the basic content and structure for a page; if you know what you're doing, you can inspect and modify the CSS definitions as well.
One of the many amazing and clever things about CSS is the way it handles inheritance. If you have set some attributes for <p> in css1.css and others in css2.css, both will apply to <p> tags in your file. Things can become more complicated than that, such as when you have a <p> tag with an id attribute, with conflicting style information. In these cases, the most specific style (that is, the id tag) applies.
On a large site with many different styles, it sometimes can become difficult to keep track of which styles are being applied. Fortunately, Firebug provides some wonderful capabilities for inspecting the CSS associated with a site, and even for editing it.
To use this functionality, click on the CSS button (next to the HTML button we were using earlier), and then on the Inspect button above it. Firebug continues to show its tree representation of the current document, but the right-hand frame displays all of the CSS styles that apply to whatever you're pointing to. Moreover, it indicates which CSS file, and which line of that file was applied. And, as if that isn't enough, it crosses out any styles that were overridden by more specific ones.
As with the HTML inspector, you easily can edit the CSS associated with any element by double-clicking on a style declaration. For example, if you want to change text from roman to italic type, you merely click on CSS/Inspect, then point to the text you want to change. If there already is a font-style property in the CSS, you can change it to read italic. If not, you can right-click on the CSS pane, choose new property, and add the property and its value.
Firebug knows what the legal property names are for CSS styles, so it is able to complete the style name automatically when you begin typing.
The right-hand frame offers more than merely a textual indication of styles. It also has a graphical representation of the CSS box model, showing the number of pixels used by the element, padding, border, margin and offset.
console.log("Now executing the 'foo' function.")
console.log("Username parameter was '" + username + "'")
Actually, Firebug makes it possible to do much better than this, with embedded, printf-like strings:
console.log("Username parameter was '%s'", username)
Firebug provides a set of logging functions, each of which produces output with a different warning level and color. These are:
The output from these methods appears in the Firebug console, which you can view by clicking on the Console button, right under the Firebug icon. Note that using these methods means your methods might be incompatible with browsers that lack Firebug.
|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|
|Non-Linux FOSS: Seashore||May 10, 2013|
|Trying to Tame the Tablet||May 08, 2013|
|Dart: a New Web Programming Experience||May 07, 2013|
- RSS Feeds
- Making Linux and Android Get Along (It's Not as Hard as It Sounds)
- New Products
- Drupal Is a Framework: Why Everyone Needs to Understand This
- A Topic for Discussion - Open Source Feature-Richness?
- Home, My Backup Data Center
- Validate an E-Mail Address with PHP, the Right Way
- New Products
- Tech Tip: Really Simple HTTP Server with Python
- Trying to Tame the Tablet
- git-annex assistant
2 hours 32 min ago
- direct cable connection
2 hours 55 min ago
- Agreed on AirDroid. With my
3 hours 5 min ago
- I just learned this
3 hours 9 min ago
3 hours 39 min ago
- not living upto the mobile revolution
6 hours 31 min ago
- Deceptive Advertising and
7 hours 6 min ago
- Let\'s declare that you have
7 hours 7 min ago
- Alterations in Contest Due
7 hours 8 min ago
- At a numbers mindset, your
7 hours 9 min ago
Enter to Win an Adafruit Prototyping Pi Plate 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 Prototyping Pi Plate 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
- Next winner announced on 5-21-13!
Free Webinar: Linux Backup and Recovery
Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.
In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.