There are four side panels in the HTML panel. These panels give you more information on the highlighted element. The second pane, on the right, is the Side Panels. To help you quickly find HTML elements, try the search feature towards the right of the HTML panel, which will, in Node View, highlight the matched text in gray. More often than not, I’m inspecting to see what CSS rules are being inherited. This is helpful for any CSS you have to write that needs to be more specific to prevent styling similar elements elsewhere on your site. When you click on an HTML element in Node View, it will show the element stacking order just above the pane. This can help you visualize margin/padding issues and float problems, for example. This is incredibly helpful functionality – it shows you exactly how the browser is handling your HTML elements and where that particular element is on the actual web page. When you mouse over the HTML markup in Node View, the browser actually highlights the element on the web page being inspected. Node View allows you to edit HTML elements/code on the web page and then see the result on the fly. Let’s briefly discuss these panes.įirstly, on the left, is the Node View pane displaying the generated source of the page you are currently on. This is the panel that will help you inspect and understand the web page’s HTML elements. Once Firebug is open, you’ll be in the HTML panel by default. The most common use of Firebug is inspection. It’s the most common question you’ll ask about a web page you’re developing: “Where’s the flaw?” (or “WTF” for short). Inspecting a Web Page’s Layout and Markup Next, we will talk about some useful Firebug features and techniques. This is perfect for big monitors or for multi-monitor computer set-ups.
Once you have Firebug open, feel free to break it out of the browser and into its own window by pressing the Open Firebug in New Window icon. Depending on your version of Firefox, it will be in the bottom status bar, or in the upper chrome to the right of the search bar. Firebug Icon You can also click on the Firebug icon to open the Firebug panel. Opening Firebug in the Browser’s Context Menu On any web page, right-click on the page or a particular HTML element (such as a hyperlink, a text heading, an image, a form button, etc.) and then choose Inspect Element from the context menu that appears. Opening Firebug Using a Keyboard Shortcut Press F12, which is the keyboard shortcut to toggle Firebug on and off (see other Firebug keyboard shortcuts).
When it’s open, it should look like the image below. There are several ways to open the Firebug panel. You can experiment with how it works just by playing around with it or you can take some time to read the official Firebug documentation (which is a wiki).
Once you’ve got the extension installed, you’re ready to start dissecting any website.
Then you also need to download and install Firebug. We’ll only focus on certain Firebug functionalities that are especially helpful for web designers.įirst, you’ll need to download and install Mozilla Firefox if you don’t already have it. Let’s take a closer look at how this indispensable browser extension can help web designers. Whether you’re building a web page, adding new CSS for a responsive web design, troubleshooting web layout issues, or inspecting how other websites are built, Firebug is going to be a valuable tool in your arsenal. This real-time coding tool reduces the guesswork out of debugging web pages, among many other things such web page layout inspection/testing and web performance profiling, to speed up your workflow. In fact, this browser extension (also available in other web browsers with limited functionality) is so useful and popular that it has browser extensions of its own. Firebug - an open source web development tool extension for the Mozilla Firefox web browser - is incredibly powerful, with a wide range of super useful and practical features that would benefit any web designer or developer.