Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Always at your service

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Tweak CSS to perfection

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

Visualize CSS metrics

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.

What's New:

Console Panel

  • Added preference extensions.firebug.groupLogMessages to define whether to group console messages
  • Clicking the bracket of a logged array shows it inside the DOM Panel
  • Mutation Observers are listed when executing getEventListeners on an HTML element
  • console.count() doesn't care anymore what line it is called from</li> <li>Added menu option to control log message grouping</li> <li>Console API is now also available in web workers</li> <li>Log message counter was moved to the left</li> </ul> <p>Command Line</p> <ul> <li>The command history is now limited</li> <li>The Command Editor now has an auto-completion like the Command Line</li> <li>Switching to the Console panel now always focuses the Command Line</li> <li>Command Editor now has line numbers</li> <li>Added option to pretty-print the source</li> <li>Allowed to change the indention within the Command Editor</li> </ul> <p>HTML Panel</p> <ul> <li>All classes of an element are listed inside the Element Path</li> <li>Added Ctrl + E as shortcut for editing the selected element</li> <li>Changed Alt + double-click to Alt + click for editing the selected element</li> <li>Unnecessary tooltips were removed</li> <li>Clicking > allows adding a new attribute to an element</li> <li>Added search by CSS selector and XPath</li> <li>Added auto-completion for HTML attributes and SVG attributes</li> <li>Added auto-completion for CSS styles within the style attribute</li> <li>Hovering cropped attributes now displays their full value</li> <li>XPath can now be copied as relative and absolute path</li> <li>Edit Mode now has line numbers and syntax highlighting</li> <li>Added regular expressions search</li> </ul> <p>Events Side Panel * Integrated EventBug into Firebug by creating a new Events side panel within the HTML Panel</p> <p>Inspector</p> <ul> <li>Quick Info Box can be pinned</li> </ul> <p>CSS Panel</p> <ul> <li>Color values can now be displayed as authored</li> <li>Source Edit Mode now has line numbers and syntax highlighting</li> </ul> <p>Script Panel</p> <ul> <li>Notification is shown when the source cache got exceeded</li> <li>Added an option to only stop the script execution on uncaught exceptions</li> <li>Added syntax highlighting for the code</li> <li>Breakpoint condition editor auto-completion uses variables in scope</li> <li>JSD2 got adopted</li> <li>Added button for pretty-printing</li> <li>Allowed to inspect selected expression</li> </ul> <p>Watch Side Panel</p> <ul> <li>Added shortcut Alt + W for creating a watch expression from the current Script Panel selection</li> <li>Exceptions and return values of functions are shown and return values can even be modified</li> </ul> <p>DOM Panel</p> <ul> <li>Added context menu option to set a breakpoint on a function</li> </ul> <p>Net Panel</p> <ul> <li>Headers in net requests can be collapsed</li> <li>Improved JSON parsing</li> <li>It is now indicated that the panel is initially sorted by the timeline</li> </ul> <p>Cookies Panel</p> <ul> <li>Added option to copy cookies to the clipboard as JSON (hidden behind preference extensions.firebug.cookies.jsonClipboardExport)</li> <li>Cookies are now sorted alphabetically</li> </ul> <p>Search Field</p> <ul> <li>Current panel's name is displayed as placeholder</li> <li>Pressing the search field shortcut selects the previously entered text</li> <li>Search field and search options popup got redesigned</li> <li>Pressing Esc in search field clears it</li> </ul> <p>Start Button</p> <ul> <li>Clicking and hovering the error badge have different actions than the toolbar button</li> </ul> <p>API</p> <ul> <li>Added possibility to modify a panel's tab</li> <li>getContextMenuItems() now provides the mouse coordinates</li> </ul> <p>Miscellaneous</p> <ul> <li>Clear Activation List confirmation can be bypassed</li> <li>monospace is now used also on Mac OS instead of Monaco</li> <li>Improved ancestor path design</li> </ul> <p>You may also want to see the <a href="">complete list of enhancements of Firebug 2.0</a>.</p> </div> <div id="sim-soft" class="hidden ps-item similar-software"> Software that can be used as an alternative to <a href="/downloads/5445-firebug.html"><span style="font-weight:bold; color:#05408F; text-decoration: none;">Firebug</span></a>: <div class="downloads-list"> <ul class="downloads_list" id="downloads_list"> </ul> <br /> </div> </div> <div class="search-box"> <form action="" id="cse-search-box"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="200" align="center"> <h4>Search Downloads</h4> </td> <td> <input type="hidden" name="cx" id="cx" value="partner-pub-7395890353660701:71cus9-hn8f" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" id="q" class="text" size="30" /> </td> <td width="40"> <input type="submit" name="sa" value="Go" /> </td> </tr> </table> </form> </div> <input type="hidden" name="download_id" id="download_id" value="5445"> </div> </div> <!-- End Content Body --> </div><!-- End of Content Column --> <aside id="sidebar" class="right"> <div class="adblock"> <script type="text/javascript"> //<![CDATA[ ord = window.ord || Math.floor(Math.random()*1E16); document.write('<script type="text/javascript" src=";ppos=atf;kw=;tile=5;sz=300x250,336x280,300x600;ord=' + ord + '?"><\/script>'); //]]> </script> <noscript><a href=";ppos=atf;kw=;tile=5;sz=300x250,336x280,300x600;ord=123456789?" target="_blank" ><img src=";ppos=atf;kw=;tile=5;sz=300x250,336x280,300x600;ord=123456789?" border="0" alt="" /></a></noscript> </div> <h3 class="section-header purple"><a href="/downloads/">Downloads</a></h3> <ul class="download-list"> <li> <a href="/downloads/612-filezilla.html">FileZilla</a> <span> <a href="/downloads/best-apps/" target="_blank"><em class="editors-pick">Editor's Pick</em></a> in <a href="/downloads/ftp-utilities/">FTP Utilities</a> </span> </li> <li> <a href="/downloads/6018-shazam-for-android.html">Shazam for Android 5.3.4</a> <span> Filed in <a href="/downloads/audio-utilities/">Audio Utilities</a> </span> </li> <li> <a href="/downloads/5815-xmedia-recode.html">XMedia Recode</a> <span> Filed in <a href="/downloads/converters/">Converters</a> </span> </li> <li> <a href="/downloads/5753-skype-for-android.html">Skype for Android 5.4</a> <span> Filed in <a href="/downloads/instant-messaging/">Instant Messaging</a> </span> </li> <li> <a href="/downloads/5995-wechat.html">WeChat</a> <span> <a href="/downloads/popular/" target="_blank"><em class="popular">Popular app</em></a> in <a href="/downloads/instant-messaging/">Instant Messaging</a> </span> </li> </ul> <script type="text/javascript"> var newSidebarMarginTop = ( $('#download-product-col').height() + 70 ) * -1; $(" #sidebar").css("margin-top",newSidebarMarginTop); </script> <h3 class="section-header orange"><a href="/drivers/">Drivers</a></h3> <ul class="download-list"> <li> <a href="">Realtek HD Audio Codec Driver 2.78 for Windows Vista/7/8/10</a> </li> <li> <a href="">Apple Watch OS Update 1.0.1</a> </li> <li> <a href="">Nvidia Quadro Graphics Drivers 352.84 for Windows 10</a> </li> <li> <a href="">Netgear GS116Ev2 Switch Firmware Update</a> </li> <li> <a href="">Nvidia GeForce Graphics Driver 352.86</a> </li> </ul> <div class="adblock"> <script type="text/javascript"> //<![CDATA[ ord = window.ord || Math.floor(Math.random()*1E16); document.write('<script type="text/javascript" src=";ppos=btf;kw=;tile=7;sz=300x250;ord=' + ord + '?"><\/script>'); //]]> </script> <noscript><a href=";ppos=btf;kw=;tile=7;sz=300x250;ord=123456789?" target="_blank" ><img src=";ppos=btf;kw=;tile=7;sz=300x250;ord=123456789?" border="0" alt="" /></a></noscript> </div> </aside><!-- end of sidebar --> <div class="clearfix"></div> <div class="cta ad_block_leader2" style="padding:20px 0 35px;"><center> <div id='billboard_placeholder' style='width: 970px; margin: auto; text-align: center; min-height: 95px;'> <div id='billboard_ad' style='display: inline-block; min-width: 728px;'> <script type="text/javascript"> //<![CDATA[ ord = window.ord || Math.floor(Math.random()*1E16); document.write('<script type="text/javascript" src=";ppos=btf;kw=;tile=10;sz=728x90;ord=' + ord + '?"><\/script>'); //]]> </script> <noscript><a href=";ppos=btf;kw=;tile=10;sz=728x90;ord=123456789?" target="_blank" ><img src=";ppos=btf;kw=;tile=10;sz=728x90;ord=123456789?" border="0" alt="" /></a></noscript> </div> </div> </center></div> </div><!-- /.wrapper --> </section> <footer> <div class="wrapper"> <nav id="Main" class="menu"> <h3>Main Sections</h3> <ul> <li><a href="/">Technology News</a></li> <li><a href="/reviews/">Reviews</a></li> <li><a href="/features/">Features</a></li> <li><a href="/products/">Product Finder</a></li> <li><a href="/downloads/">Downloads</a></li> <li><a href="/drivers/">Drivers</a></li> </ul> </nav> <nav id="Comm" class="menu"> <h3>Community</h3> <ul> <li><a href="/community/">TechSpot Forums</a></li> <li><a href="/community/find-new/threads/">Recent Discussion</a></li> <li><a href="/community/forums/techspot-news-and-comments.51/">News Comments</a></li> <li><a href="/community/recent-activity/">Community Activity</a></li> </ul> </nav> <nav id="Usef" class="menu"> <h3>Useful Resources</h3> <ul> <li><a href="/trending/">Trending Now</a></li> <li><a href="">TechSpot Store</a></li> <li><a href="/category/techspot/">Featured on TechSpot</a></li> <li><a href="/features/must-reads/">Must-Reads</a></li> <li><a href="/downloads/best-apps/">Hot Downloads</a></li> </ul> </nav> <nav id="Abou" class="menu"> <h3>About TechSpot</h3> <ul> <li><a href="/about/">About Us</a></li> <li><a href="/advertising/">Advertising</a></li> <li><a href="/news/">News Archive</a></li> <li><a href="/feeds/">Social & Feeds</a></li> </ul> </nav> <div class="follow-subscribe desktop"> <nav class="menu"> <h3>Follow TechSpot</h3> <ul> <li class="facebook"><a href="" target="_blank">Facebook</a></li> <li class="twitter"><a href="" target="_blank">Twitter</a></li> <li class="google-plus"><a href="" target="_blank">Google Plus</a></li> <li class="youtube"><a href="" target="_blank">YouTube</a></li> <li class="rss"><a href="" target="_blank">RSS</a></li> </ul> </nav> <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <h3>Subscribe to the TechSpot Newsletter</h3> <div class="form-email"><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="email address"></div> <div class="form-submit"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" ></div> </form> </div> <div class="clearfix"></div> <a href="#" class="back-to-top">Back to Top</a> <input type="hidden" id="ts_section" value="download" /> </div> <div class="copyright"> <div class="wrapper"> <p>© 2015 TechSpot, Inc. All Rights Reserved.</p> <p>TechSpot is a registered trademark. <a href="/terms.html">Terms of Use</a> <a href="/privacy.html">Privacy Policy</a></p> </div> </div> </footer> </div><!-- /.wrapper --> </div><!-- /.GlobalWrapper --> <script type="text/javascript" src=""></script> <script type="text/javascript"> var vglnk = { api_url: '//', key: '552a35ca1eb1421626a0f973ac2a90af' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = ('https:' == document.location.protocol ? vglnk.api_url : '//') + '/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> </body> </html>