CINXE.COM

<!doctype html> <html lang="en-US"> <head data-template-path="https://hacks.mozilla.org/wp-content/themes/Hax"> <base href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="w2ocEMd5yV9IsGCjhq-7ls67r4VH-Ob6oWdiZpqjN8U"> <meta name="title" content="Firebug lives on in Firefox DevTools – Mozilla Hacks - the Web developer blog"> <meta name="description" content="Firebug, the original browser developer tool, has been discontinued as a separate Firefox add-on, and will go forward as Firebug.next atop Firefox DevTools. The spirit of Firebug lives on in ..."> <meta property="og:site_name" content="Mozilla Hacks – the Web developer blog"> <meta property="og:url" content="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools"> <meta property="og:title" content="Firebug lives on in Firefox DevTools – Mozilla Hacks - the Web developer blog"> <meta property="og:description" content="Firebug, the original browser developer tool, has been discontinued as a separate Firefox add-on, and will go forward as Firebug.next atop Firefox DevTools. The spirit of Firebug lives on in ..."> <meta property="og:image" content="https://hacks.mozilla.org/wp-content/themes/Hax/img/hacks-meta-image.jpg"> <meta property="twitter:title" content="Firebug lives on in Firefox DevTools – Mozilla Hacks - the Web developer blog"> <meta property="twitter:description" content="Firebug, the original browser developer tool, has been discontinued as a separate Firefox add-on, and will go forward as Firebug.next atop Firefox DevTools. The spirit of Firebug lives on in ..."> <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:image" content="https://hacks.mozilla.org/wp-content/themes/Hax/img/hacks-meta-image.jpg"> <meta name="twitter:site" content="@mozhacks"> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/css/font-awesome.min.css"> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/style.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.6.0/styles/solarized_light.min.css"> <script type="text/javascript"> window.hacks = {}; // http://cfsimplicity.com/61/removing-analytics-clutter-from-campaign-urls var removeUtms = function(){ var l = window.location; if( l.hash.indexOf( "utm" ) != -1 ){ var anchor = l.hash.match(/#(?!utm)[^&]+/); anchor = anchor? anchor[0]: ''; if(!anchor && window.history.replaceState){ history.replaceState({},'', l.pathname + l.search); } else { l.hash = anchor; } }; }; var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35433268-8'], ['_setAllowAnchor', true]); _gaq.push (['_gat._anonymizeIp']); _gaq.push(['_trackPageview']); _gaq.push( removeUtms ); (function(d, k) { var ga = d.createElement(k); ga.type = 'text/javascript'; ga.async = true; ga.src = 'https://ssl.google-analytics.com/ga.js'; var s = d.getElementsByTagName(k)[0]; s.parentNode.insertBefore(ga, s); })(document, 'script'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5WVW12ST9K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5WVW12ST9K'); </script> <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> <title>Firebug lives on in Firefox DevTools - Mozilla Hacks - the Web developer blog</title> <link rel="canonical" href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/"> <meta name="twitter:label1" content="Written by"> <meta name="twitter:data1" content="Soledad Penadés, Jan Honza Odvarko, Patrick Brosset"> <meta name="twitter:label2" content="Est. reading time"> <meta name="twitter:data2" content="3 minutes"> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/","url":"https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/","name":"Firebug lives on in Firefox DevTools - Mozilla Hacks - the Web developer blog","isPartOf":{"@id":"https://hacks.mozilla.org/#website"},"datePublished":"2016-12-20T13:24:20+00:00","dateModified":"2016-12-20T13:24:20+00:00","author":{"@id":"https://hacks.mozilla.org/#/schema/person/3f8388e3c3c0481376940aef67624980"},"breadcrumb":{"@id":"https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/"]}]},{"@type":"BreadcrumbList","@id":"https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://hacks.mozilla.org/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https://hacks.mozilla.org/articles/"},{"@type":"ListItem","position":3,"name":"Firebug lives on in Firefox DevTools"}]},{"@type":"WebSite","@id":"https://hacks.mozilla.org/#website","url":"https://hacks.mozilla.org/","name":"Mozilla Hacks - the Web developer blog","description":"hacks.mozilla.org","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://hacks.mozilla.org/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https://hacks.mozilla.org/#/schema/person/3f8388e3c3c0481376940aef67624980","name":"Soledad Penadés","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://hacks.mozilla.org/#/schema/person/image/15105800a0270a384212262298083881","url":"https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96","contentUrl":"https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=96","caption":"Soledad Penadés"},"description":"Sole works at the Developer Tools team at Mozilla, helping people make amazing things on the Web, preferably real time. Find her on #devtools at irc.mozilla.org","sameAs":["https://soledadpenades.com","https://x.com/supersole"],"url":"https://hacks.mozilla.org/author/spenadesmozilla-com/"}]}</script> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Feed" href="https://hacks.mozilla.org/feed/"> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Comments Feed" href="https://hacks.mozilla.org/comments/feed/"> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Firebug lives on in Firefox DevTools Comments Feed" href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/feed/"> <link rel="stylesheet" id="wp-block-library-css" href="https://hacks.mozilla.org/wp-includes/css/dist/block-library/style.min.css?ver=6.6.1" type="text/css" media="all"> <style id="co-authors-plus-coauthors-style-inline-css" type="text/css"> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id="co-authors-plus-avatar-style-inline-css" type="text/css"> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id="co-authors-plus-image-style-inline-css" type="text/css"> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <link rel="stylesheet" id="prismatic-blocks-css" href="https://hacks.mozilla.org/wp-content/plugins/prismatic/css/styles-blocks.css?ver=6.6.1" type="text/css" media="all"> <style id="safe-svg-svg-icon-style-inline-css" type="text/css"> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <style id="classic-theme-styles-inline-css" type="text/css"> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id="global-styles-inline-css" type="text/css"> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-content/themes/Hax/js/analytics.js?ver=6.6.1" id="analytics-js"></script> <link rel="https://api.w.org/" href="https://hacks.mozilla.org/wp-json/"> <link rel="alternate" title="JSON" type="application/json" href="https://hacks.mozilla.org/wp-json/wp/v2/posts/30371"> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://hacks.mozilla.org/xmlrpc.php?rsd"> <link rel="shortlink" href="https://hacks.mozilla.org/?p=30371"> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://hacks.mozilla.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhacks.mozilla.org%2F2016%2F12%2Ffirebug-lives-on-in-firefox-devtools%2F"> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://hacks.mozilla.org/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fhacks.mozilla.org%2F2016%2F12%2Ffirebug-lives-on-in-firefox-devtools%2F&format=xml"> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="cs"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1hbgkFx4Qn8.O/am=DgY/d=1/rs=AN8SPfqlmAPxwfG457BPbRXwNq39oSMGHg/m=corsproxy" data-sourceurl="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1hbgkFx4Qn8.O/am=DgY/d=1/exm=corsproxy/ed=1/rs=AN8SPfqlmAPxwfG457BPbRXwNq39oSMGHg/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1hbgkFx4Qn8.O/am=DgY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfqlmAPxwfG457BPbRXwNq39oSMGHg/m=navigationui" data-environment="prod" data-proxy-url="https://hacks-mozilla-org.translate.goog" data-proxy-full-url="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB" data-source-url="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/" data-source-language="pl" data-target-language="cs" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/&anno=2" data-client="tr"></script> <div class="outer-wrapper"> <header class="section section--fullwidth header"> <div class="masthead row"> <div class="branding block block--3"> <h1><a href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB"> <img class="branding__logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/mdn-logo-mono.svg"> <img class="branding__wordmark" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/wordmark.svg" alt="Mozilla"> <span class="branding__title">Hac<span class="logo-askew">k</span>s</span> </a></h1> </div> <div class="search block block--2"> <form class="search__form" method="get" action="https://hacks.mozilla.org/"><input type="search" name="s" class="search__input" placeholder="Search Mozilla Hacks" value=""> <i class="fa fa-search search__badge"></i> </form> </div> <nav class="social"><a class="social__link youtube" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://www.youtube.com/user/mozhacks" title="YouTube"><i class="fa fa-youtube" aria-hidden="true"></i><span>Hacks on YouTube</span></a> <a class="social__link twitter" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://twitter.com/mozhacks" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span>@mozhacks on Twitter</span></a> <a class="social__link rss" href="https://hacks-mozilla-org.translate.goog/feed/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i><span>Hacks RSS Feed</span></a> <a class="fx-button" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://www.mozilla.org/firefox/download/thanks/?utm_source%3Dhacks.mozilla.org%26utm_medium%3Dreferral%26utm_campaign%3Dheader-download-button%26utm_content%3Dheader-download-button">Download Firefox</a> </nav> </div> </header> <div id="content-head" class="section"> <h1 class="post__title">Firebug lives on in Firefox DevTools</h1> <div class="byline"> <h3 class="post__author"><img alt="Avatar photo" src="https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=64" srcset="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s%3D128 2x" class="avatar avatar-64 photo" height="64" width="64" decoding="async"> By <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://soledadpenades.com" rel="external me">Soledad Penadés</a>, <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://www.softwareishard.com/" rel="external me">Jan Honza Odvarko</a>, <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://patrickbrosset.com" rel="external me">Patrick Brosset</a></h3> <div class="post__meta"> Posted on <abbr class="published" title="2016-12-20T05:24:20-08:00"> December 20, 2016 </abbr> <span class="entry-cat">in <a href="https://hacks-mozilla-org.translate.goog/category/developer-tools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB" rel="category tag" title="View all posts in Developer Tools">Developer Tools</a> and <a href="https://hacks-mozilla-org.translate.goog/category/firebug/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB" rel="category tag" title="View all posts in Firebug">Firebug</a> </span> <div class="socialshare" data-type="bubbles"></div> </div> </div> </div> <main id="content-main" class="section article"> <article class="post" role="article"> <p>As you <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://blog.getfirebug.com/2016/02/08/merging-firebug-into-the-built-in-firefox-developer-tools/">might have heard already</a>, Firebug has been discontinued as a separate Firefox add-on.</p> <p>The reason for this huge change is <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://wiki.mozilla.org/Electrolysis">Electrolysis</a>, Mozilla’s project name for a redesign of Firefox architecture to improve responsiveness, stability, and security. Electrolysis’s multiprocess architecture makes it possible for Firefox to run its user interface (things like the address bar, the tabs and menus) in one process while the content (websites) runs in other processes. With multiprocess architecture, if a website crashes, it doesn’t also crash the whole browser.</p> <p>Unfortunately, Firebug wasn’t designed with multiprocess in mind, and making it work in this new scenario would have required an extremely difficult and costly rewrite. The <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://getfirebug.com/wiki/index.php/Firebug_Working_Group">Firebug Working Group</a> agreed they didn’t have enough resources to implement such a massive architectural change. Additionally, Firefox’s built-in developer tools have been gaining speed, so it made sense to base the next version of Firebug on these tools instead.</p> <p>The decision was made that the next version of Firebug (codenamed <i>Firebug.next</i>) <a href="https://hacks-mozilla-org.translate.goog/2014/12/firebug-3-multiprocess-firefox-e10s/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB">would build on top of Firefox DevTools</a>, and Firebug would be merged into the built-in tools.</p> <p>And perhaps most importantly, <b>we joined forces to build the best developer tools together</b>, rather than compete with each other. Many of Firebug’s core developers are on the DevTools team, including <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://softwareishard.com/">Jan ‘Honza’ Odvarko</a> and <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://flailingmonkey.com/">Mike Ratcliffe</a>. Other Firebug Working Group members like <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://github.com/SebastianZ">Sebastian Zartner</a> and <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://github.com/fflorent">Florent Fayolle</a> are also active DevTools contributors.</p> <p>A huge <b>thank you</b> to them for bringing their expertise in browser developer tooling to the project!</p> <h3>In practical terms, what does it mean to merge Firebug into DevTools?</h3> <p>Several features have been absorbed: The <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Tools/DOM_Property_Viewer">DOM panel</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Tools/Settings%23Choose_DevTools_theme">the Firebug theme</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://developer.mozilla.org/cs/docs/Tools/Web_Console/Console_messages%23Server">Server-side log messages</a>, the HTTP inspector (aka XHR Spy), and various popular add-ons like <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://addons.mozilla.org/en-us/firefox/addon/firequery/">FireQuery</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://www.softwareishard.com/blog/har-export-trigger/">HAR export</a>, and <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/">PixelPerfect</a>. Also, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://mzl.la/2gNWrwz">over 40 bugs</a> were fixed to close the gap between DevTools and Firebug.</p> <p><i>For curious readers, a couple of articles on </i><a href="https://hacks-mozilla-org.translate.goog/2015/10/firebug-devtools-integration/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB"><i>hacks.mozilla.org</i></a><i> and on the </i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://blog.getfirebug.com/2016/02/08/merging-firebug-into-the-built-in-firefox-developer-tools/"><i>Firebug blog</i></a><i> go into more detail.</i></p> <p>If you are switching now from Firebug to Firefox DevTools, you will of course notice differences. This <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Tools/Migrating_from_Firebug">migration guide</a> can help you.</p> <p>We understand that disruption is never really welcome, but we are working hard to ensure developers have the best possible tools, and sometimes this means we need to refocus and use resources wisely.</p> <p>You can help: Tell us which features you need are missing. There are a few ways you can do this:</p> <ul> <li>Comment on <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://groups.google.com/forum/%23!topic/mozilla.dev.developer-tools/iGXTwn0xRaU">this thread</a> on <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://lists.mozilla.org/listinfo/dev-developer-tools">the Mozilla dev-developer-tools mailing list</a>.</li> <li>Share your feedback on <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://groups.google.com/forum/%23!topic/firebug/Q6eyvGt6hyI/discussion">this thread</a> on <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://groups.google.com/forum/%23!forum/firebug">the Firebug Google group</a>.</li> <li>Or, post to <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://twitter.com/FirefoxDevTools/status/800705364446629889">this discussion thread on Twitter</a>.</li> </ul> <p>We are already <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D991806">tracking missing features on this bug</a>, and so far you have told us that the most important are these:</p> <ul> <li>Break on XHR (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D821610">bug 821610</a>)</li> <li>Break on DOM mutations (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1004678">bug 1004678</a>)</li> <li>Better CSS auto-completion (like <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1106336">bug 1106336</a> and others)</li> <li>Various console auto-complete improvements: (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1267140">bug 1267140</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1270015">bug 1270015</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D672733">bug 672733</a>, and more)</li> <li>An events sidebar panel: (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1226640">bug 1226640</a>)</li> <li>Live previewing changes made in the inspector (when changing attributes or editing as HTML: <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D815464">bug 815464</a>)</li> <li>Improvements to the way console log messages are displayed: (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1032855">bug 1032855</a>, <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1165010">bug 1165010</a> and more)</li> <li>Validating CSS values and selectors as you type: (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1227054">bug 1227054</a>)</li> <li>A DOM properties sidebar panel (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D704094">bug 704094</a>)</li> <li>Font-size changes in the Firebug theme (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1319079">bug 1319079</a>)</li> <li>An option to add cookies: (<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1231451">bug 1231451</a> and<a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://bugzilla.mozilla.org/show_bug.cgi?id%3D1231452"> bug 1231452</a>)</li> </ul> <p>We thank you for your loyalty and hope you understand why we’ve made this difficult decision. The Firebug spirit lives on in all of the browser developer tools we build and use today.</p> <p><em>The Firefox DevTools and Firebug teams</em></p> <section class="about"> <h2 class="about__header">About <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://soledadpenades.com" rel="external me"> Soledad Penadés </a></h2> <p>Sole works at the Developer Tools team at Mozilla, helping people make amazing things on the Web, preferably real time. Find her on #devtools at irc.mozilla.org</p> <ul class="author-meta fa-ul"> <li><i class="fa-li fa fa-globe"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://soledadpenades.com" class="website" rel="me">https://soledadpenades.com</a></li> <li><i class="fa-li fa fa-twitter"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://twitter.com/supersole" class="twitter" rel="me">@supersole</a></li> </ul> <p><a class="url" href="https://hacks-mozilla-org.translate.goog/author/spenadesmozilla-com/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB">More articles by Soledad Penadés…</a></p> <h2 class="about__header">About <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://www.softwareishard.com/" rel="external me"> Jan Honza Odvarko </a></h2> <p>Honza is working on Firefox Developer Tools</p> <ul class="author-meta fa-ul"> <li><i class="fa-li fa fa-globe"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://www.softwareishard.com/" class="website" rel="me">www.softwareishard.com/</a></li> <li><i class="fa-li fa fa-twitter"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://twitter.com/janodvarko" class="twitter" rel="me">@janodvarko</a></li> </ul> <p><a class="url" href="https://hacks-mozilla-org.translate.goog/author/jodvarkomozilla-com/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB">More articles by Jan Honza Odvarko…</a></p> <h2 class="about__header">About <a class="url" href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://patrickbrosset.com" rel="external me"> Patrick Brosset </a></h2> <p>Patrick manages the DevTools engineering team at Mozilla</p> <ul class="author-meta fa-ul"> <li><i class="fa-li fa fa-globe"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://patrickbrosset.com" class="website" rel="me">patrickbrosset.com</a></li> <li><i class="fa-li fa fa-twitter"></i><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=http://twitter.com/patrickbrosset" class="twitter" rel="me">@patrickbrosset</a></li> </ul> <p><a class="url" href="https://hacks-mozilla-org.translate.goog/author/pbrossetmozilla-com/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB">More articles by Patrick Brosset…</a></p> </section> </article> <section class="promo"> <form id="newsletterForm" name="newsletter-form" class="newsletter block block--1 block--polite" action="https://www.mozilla.org/en-US/newsletter/" method="post"> <h2 class="heading">Discover great resources for web development</h2> <p class="newsletter__description">Sign up for the Mozilla Developer Newsletter:</p><input id="fmt" name="fmt" value="H" type="hidden"> <input id="newsletterNewslettersInput" name="newsletters" value="app-dev" type="hidden"> <div id="newsletterErrors" class="newsletter__errors"></div> <div id="newsletterEmail" class="form__row"><label for="newsletterEmailInput" class="offscreen">E-mail</label> <input id="newsletterEmailInput" name="email" class="newsletter__input" required placeholder="you@example.com" size="30" type="email"> </div> <div id="newsletterPrivacy" class="form__row form__fineprint"><input id="newsletterPrivacyInput" name="privacy" required type="checkbox"> <label for="newsletterPrivacyInput"> I'm okay with Mozilla handling my info as explained in this <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://www.mozilla.org/privacy/">Privacy Policy</a>. </label> </div><button id="newsletter-submit" type="submit" class="button positive">Sign up now</button> </form> <div id="newsletterThanks" class="newsletter newsletter--thanks block block--1 block--polite hidden"> <h2 class="heading">Thanks! Please check your inbox to confirm your subscription.</h2> <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p> </div> </section> <section class="discussion"> <hr class="dino"> <div class="comments"> <header class="comments__head"> <h3>11 comments</h3> </header> <ol class="comments__list"> <li id="comment-20422" class="comment even thread-even depth-1"><b class="comment__title vcard"> <cite class="author fn">Firefox User</cite> </b> <blockquote class="comment__body"> <p>Is this available now in Firefox 50.1.0?</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20422" rel="bookmark" title="Permanent link to this comment by Firefox User"><abbr class="published" title="2016-12-20">December 20th, 2016</abbr> at 07:15</a> <p class="comment__util"></p></li> <li id="comment-20423" class="comment odd alt thread-odd thread-alt depth-1"><b class="comment__title vcard"> <cite class="author fn">Lawrence San</cite> </b> <blockquote class="comment__body"> <p>Your list of “most important” items here doesn’t mention font color. That’s the single biggest annoyance for me. Right now the Console’s ordinary log text appears in red, and the alert/error text in black. Obviously it should be the other way around. I’m seeing this problem in all the themes, including the Firebug theme, so there’s probably some underlying issue that affects all of them.</p> <p>It’s very disconcerting to have to read ordinary log messages in red.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20423" rel="bookmark" title="Permanent link to this comment by Lawrence San"><abbr class="published" title="2016-12-20">December 20th, 2016</abbr> at 09:55</a> <p class="comment__util"></p> <ol class="children"> <li id="comment-20427" class="comment even depth-2"><b class="comment__title vcard"> <cite class="author fn">Mark Fischer, Jr.</cite> </b> <blockquote class="comment__body"> <p>How are you logging things in the console? You might be using the wrong function call, I’ve never seen normal logs printed in red in the firefox dev tools.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20427" rel="bookmark" title="Permanent link to this comment by Mark Fischer, Jr."><abbr class="published" title="2016-12-21">December 21st, 2016</abbr> at 08:32</a> <p class="comment__util"></p> <ol class="children"> <li id="comment-20440" class="comment odd alt depth-3"><b class="comment__title vcard"> <cite class="author fn">Lawrence San</cite> </b> <blockquote class="comment__body"> <p>Like this:</p> <p>console.log(“graphicSeriesScripts.js has loaded.”);</p> <p>That’s near the top of one of my separate JS files. How would you log it?</p> <p>In the Firebug theme, that message appears in red type. In the Light and Dark themes, it appears in a kind of muddy orange colored type. I can’t find anyplace where you can configure or adjust how it appears.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20440" rel="bookmark" title="Permanent link to this comment by Lawrence San"><abbr class="published" title="2016-12-23">December 23rd, 2016</abbr> at 10:36</a> <p class="comment__util"></p></li> </ol></li> </ol></li> <li id="comment-20424" class="comment even thread-even depth-1"><b class="comment__title vcard"> <cite class="author fn">YepHep</cite> </b> <blockquote class="comment__body"> <p>What about plugins such as FirePHP? Any chance that these could be shimmed to continue functioning under new DevTools? Otherwise we all be looking to migrate to <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://github.com/ccampbell/chromephp" rel="nofollow ugc">https://github.com/ccampbell/chromephp</a> I guess.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20424" rel="bookmark" title="Permanent link to this comment by YepHep"><abbr class="published" title="2016-12-20">December 20th, 2016</abbr> at 11:03</a> <p class="comment__util"></p> <ol class="children"> <li id="comment-20426" class="comment odd alt depth-2"><b class="comment__title vcard"> <cite class="author fn">FlyingHail</cite> </b> <blockquote class="comment__body"> <p><a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages" rel="nofollow ugc">https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages</a></p> <p>From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p> <p>It uses the Chrome Logger protocol.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20426" rel="bookmark" title="Permanent link to this comment by FlyingHail"><abbr class="published" title="2016-12-21">December 21st, 2016</abbr> at 03:49</a> <p class="comment__util"></p></li> </ol></li> <li id="comment-20425" class="comment even thread-odd thread-alt depth-1"><b class="comment__title vcard"> <cite class="author fn">Castle Snow</cite> </b> <blockquote class="comment__body"> <p>FireBug is an amazing tool, thank all of the developers of it a lot!</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20425" rel="bookmark" title="Permanent link to this comment by Castle Snow"><abbr class="published" title="2016-12-21">December 21st, 2016</abbr> at 01:21</a> <p class="comment__util"></p></li> <li id="comment-20430" class="comment odd alt thread-even depth-1"><b class="comment__title vcard"> <cite class="author fn">revyh</cite> </b> <blockquote class="comment__body"> <p>How does these tools relate to deburgger.html?</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20430" rel="bookmark" title="Permanent link to this comment by revyh"><abbr class="published" title="2016-12-21">December 21st, 2016</abbr> at 18:45</a> <p class="comment__util"></p> <ol class="children"> <li id="comment-20457" class="comment even depth-2"><b class="comment__title vcard"> <cite class="author fn">Patrick Brosset</cite> </b> <blockquote class="comment__body"> <p>The tools discussed in this post (the Firefox DevTools) contain a debugger panel.<br> This panel used to use XUL for its markup, and a bunch of Firefox-specific JavaScript code and APIs.</p> <p>debugger.html is a code name for a project: the goal of this project was to get rid of XUL and non-public JavaScript APIs, and have a debugger with only HTML and JS that can run in any browser.<br> The project lives here: <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://github.com/devtools-html/debugger.html/" rel="nofollow ugc">https://github.com/devtools-html/debugger.html/</a></p> <p>It can be used either standalone, or within Firefox DevTools since it replaces the old debugger panel that we used to have.</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20457" rel="bookmark" title="Permanent link to this comment by Patrick Brosset"><abbr class="published" title="2017-01-03">January 3rd, 2017</abbr> at 01:50</a> <p class="comment__util"></p></li> </ol></li> <li id="comment-20464" class="comment odd alt thread-odd thread-alt depth-1"><b class="comment__title vcard"> <cite class="author fn">Eagle</cite> </b> <blockquote class="comment__body"> <p>I’m missing watches and value hinting upon highlighting a variable in debugger :(</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20464" rel="bookmark" title="Permanent link to this comment by Eagle"><abbr class="published" title="2017-01-06">January 6th, 2017</abbr> at 02:20</a> <p class="comment__util"></p> <ol class="children"> <li id="comment-20999" class="comment even depth-2"><b class="comment__title vcard"> <cite class="author fn">Dan Callahan</cite> </b> <blockquote class="comment__body"> <p>Watches and value hints on hover have been added for <a href="https://hacks-mozilla-org.translate.goog/2017/03/developer-edition-54-new-inspector-and-debugger-features/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB">Firefox 54</a>, which is currently on the Developer Edition channel :)</p> </blockquote><a class="comment__meta" href="https://hacks-mozilla-org.translate.goog/2016/12/firebug-lives-on-in-firefox-devtools/?_x_tr_sl=pl&_x_tr_tl=cs&_x_tr_hl=en-GB#comment-20999" rel="bookmark" title="Permanent link to this comment by Dan Callahan"><abbr class="published" title="2017-03-31">March 31st, 2017</abbr> at 14:24</a> <p class="comment__util"></p></li> </ol></li> </ol> </div> <p class="comments__closed"><b>Comments are closed for this article.</b></p> <footer class="footer section section--fullwidth"> <div class="row"> <p class="block block--1">Except where otherwise noted, content on this site is licensed under the <a href="https://translate.google.com/website?sl=pl&tl=cs&hl=en-GB&u=https://creativecommons.org/licenses/by-sa/3.0/" rel="license external">Creative Commons Attribution Share-Alike License v3.0</a> or any later version.</p><img class="footer__logo" alt="the Mozilla dino logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/dino.svg"> </div> </footer> </section> </main> </div> <script> // External links should open in a new tab. (function () { var postLinks = document.querySelectorAll('#content-main a'); var origin = location.origin; for (var i = 0; i < postLinks.length; i++) { var link = postLinks[i]; if (link.origin !== origin && !link.getAttribute('target')) { link.setAttribute('target', '_blank'); } } })(); window.addEventListener('load', function () { if (document.querySelector('#newsletterForm')) { var script = document.createElement('script'); var path = document.head.getAttribute('data-template-path'); script.setAttribute('src', path + '/js/newsletter.js'); document.head.appendChild(script); } }); </script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'cs', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>