{"id":22340,"date":"2014-11-11T23:01:01","date_gmt":"2014-11-11T15:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22340"},"modified":"2024-02-21T01:34:17","modified_gmt":"2024-02-20T17:34:17","slug":"firefox-developer-version","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/","title":{"rendered":"A Look Into: Firefox Developer Edition"},"content":{"rendered":"<p>After a brief <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/thenextweb.com\/dd\/2014\/11\/03\/mozilla-teases-new-firefox-browser-developers\/\">preview<\/a>, Mozilla has officially launched <strong>Firefox Developer Edition<\/strong>, a <strong>browser tailored specifically for web developers<\/strong>. Though not officially declared, it seems poised to replace Firefox Aurora eventually.<\/p>\n<p>The name, official statements, and the landing page suggest that <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/developer\/\">Firefox Developer Edition<\/a> is <strong>the first major browser designed with developers in mind<\/strong>, rather than merely accommodating them. It\u2019s packed with a variety of debugging tools and utilities and operates on its own profile, making it convenient to use alongside the standard Firefox browser. Let\u2019s explore its features.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/firefox-optimization-tips\/\" class=\"ref-block__link\" title=\"Read More: How to Optimize Firefox for Better Performance\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Optimize Firefox for Better Performance<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/firefox-optimization-tips.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-11149 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/firefox-optimization-tips.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Optimize Firefox for Better Performance<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tYour web browser of choice is truly the gateway into accessing the global Internet. The web has been...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>User Interface<\/h2>\n<p>The Developer Edition\u2019s interface signals a clear focus on developers. <strong>The toolbar is slimmer<\/strong> than those of Chrome and the standard Firefox, yet it includes more buttons by default.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg\" alt=\"Firefox Developer Edition Toolbar\" width=\"723\" height=\"130\"><\/figure>\n<p>The default dark theme is likely a strategic choice based on UI testing, emphasizing the importance of <strong>quickly locating tools during development<\/strong>. Even brief delays can accumulate over time. While I generally prefer lighter colors for everyday browsing, the dark theme proved effective in my initial tests.<\/p>\n<p>Should you prefer the standard look, switching off the Developer Edition theme is straightforward via the \u201cUse Firefox Developer Edition Theme\u201d button, accessible through <strong>Menu -> Customize<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/menu-customize.jpg\" alt=\"Customizing Firefox Developer Edition\" width=\"519\" height=\"476\"><\/figure>\n<p>However, <strong>some interface decisions leave me puzzled<\/strong>. Bookmarking, for instance, seems less crucial in this context, as most developers are familiar with the <span class=\"key\">Ctrl<\/span> \/ <span class=\"key\">Cmd<\/span> + <span class=\"key\">D<\/span> shortcut. Thus, the inclusion of a dedicated bookmarks button, alongside sections for downloads and even the Developer Edition start page, appears somewhat superfluous.<\/p>\n<h2>First Impressions<\/h2>\n<p><strong>Initially, the Developer Edition felt familiar<\/strong>, a sentiment echoed by Mozilla themselves on their landing page:<\/p>\n<p><em>\u201cIt\u2019s everything you\u2019re used to, only better.\u201d<\/em><\/p>\n<p>The developer tools function similarly to those in the standard Firefox version, with WebIDE and Valence already integrated. <strong>It\u2019s primarily the subtle design tweaks that distinguish the Developer Edition<\/strong>.<\/p>\n<p>Nevertheless, <strong>there\u2019s a palpable sense of potential and direction<\/strong>. Mozilla appears to have been gearing up for this edition, accumulating a wealth of developer tools and expertise. <strong>It feels as though they\u2019ve laid down a foundation for future innovations and testing<\/strong>.<\/p>\n<p>Put simply, the <strong>Developer Edition seems like an updated branch of Firefox<\/strong>, crafted with minor modifications. Going forward, it will likely evolve more distinctly, focusing on tools and features specifically for developers, setting it apart from the standard Firefox experience. This initiative aims to make it the preferred choice for developers.<\/p>\n<p><strong>A key indicator of Mozilla\u2019s strategy for the Developer Edition is the integration of Valence<\/strong>. Here\u2019s Mozilla\u2019s view on Valence:<\/p>\n<p><em>\u201cThe Adapter is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.\u201d<\/em><\/p>\n<p><strong>This suggests the Developer Edition will be the first to receive new tools<\/strong>. While Mozilla may not remove existing developer features from Firefox, new and innovative tools might be exclusive to the Developer Edition. This approach, aimed at minimizing unnecessary features in browsers, is something I wholeheartedly support.<\/p>\n<h2>WebIDE<\/h2>\n<p>WebIDE stands out as a key feature prominently showcased. Launched with Firefox 34, it serves as a successor to the App Manager \u2013 <strong>facilitating the editing, running, and debugging of Firefox OS applications either through the Firefox OS simulator or directly on a device<\/strong>, akin to what Xcode offers for iOS development.<\/p>\n<div class=\"su-youtube su-u-responsive-media-yes\"><div class=\"video-19by6\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/1R9_WdXwUsE?\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div><\/div>\n<h2>Valence<\/h2>\n<p>Valence, <strong>a tool for cross-browser debugging<\/strong>, enables developer tools to interface with various browsers effectively. Currently, it primarily supports Chrome on Android and Safari on iOS. For a clearer understanding of its capabilities, Mozilla has prepared a helpful video:<\/p>\n<div class=\"su-youtube su-u-responsive-media-yes\"><div class=\"video-19by6\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/eH0R10Ga4Hs?\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div><\/div>\n<h2>Developer Tools<\/h2>\n<p><strong>Those acquainted with Firefox\u2019s developer tools will find the Developer Edition\u2019s tools familiar<\/strong>. They can be accessed with <span class=\"key\">Ctrl<\/span> \/ <span class=\"key\">CMD<\/span> + <span class=\"key\">I<\/span> or by right-clicking on a webpage element and selecting \u201cInspect Element\u201d.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/developer-tools.jpg\" alt=\"Firefox Developer Edition Developer Tools\" width=\"921\" height=\"408\"><\/figure>\n<h2>Inspector<\/h2>\n<p><strong>The Inspector offers a detailed tree view of the webpage\u2019s DOM<\/strong>, highlighting elements on the page as you hover over them in the DOM view. This feature is incredibly useful for understanding element dimensions and placement.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/inspector.jpg\" alt=\"Inspecting elements with Firefox Developer Edition\" width=\"939\" height=\"636\"><\/figure>\n<p>Alternatively, activating the icon in the screenshot above lets you <strong>navigate through the page with your cursor highlighting elements<\/strong>, an efficient method for inspecting elements amidst overlapping ones.<\/p>\n<p>The Inspector also <strong>enables direct editing of element contents or properties<\/strong>. Useful tips include navigating the DOM with arrow keys, and using the delete key for removal and <span class=\"key\">Ctrl<\/span> \/ <span class=\"key\">Cmd<\/span> + <span class=\"key\">Z<\/span> for undoing deletions.<\/p>\n<p>Dragging within the DOM highlights a section, visually indicating its boundaries on the webpage \u2013 another excellent feature for visualizing HTML structures and CSS code. The CSS rules for any selected element are displayed in a sidebar, facilitating quick reviews and edits.<\/p>\n<h2>Console<\/h2>\n<p>The console acts as <strong>a comprehensive display for CSS, JS, Net, Security, and Logging information<\/strong>. Primarily utilized for JavaScript debugging and identifying missing resources, it also supports command execution, including through jQuery.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/console.jpg\" alt=\"Firefox Developer Edition Console\" width=\"609\" height=\"210\"><\/figure>\n<h2>Debugger<\/h2>\n<p>While the console is handy for simple script troubleshooting and verification, <strong>complex issue resolution necessitates the debugger<\/strong>.<\/p>\n<p>Setting breakpoints allows <strong>the pausing of JavaScript execution at specified points<\/strong>, enabling variable adjustments and execution path reviews before proceeding.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/debugger.jpg\" alt=\"Using the Debugger in Firefox Developer Edition\" width=\"753\" height=\"323\"><\/figure>\n<p>This tool is invaluable for bug identification and scenario testing, offering <strong>insightful complementarity to unit testing<\/strong>.<\/p>\n<h2>Style Editor<\/h2>\n<p>The style editor is <strong>ideal for crafting CSS and instantly viewing its impact<\/strong>. It permits selection, importation, and creation of stylesheets, with a straightforward saving mechanism for modifications.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/style-editor.jpg\" alt=\"Style Editor in Action\" width=\"540\" height=\"411\"><\/figure>\n<p>Although perfect for minor adjustments, <strong>it\u2019s less suited for complex setups involving preprocessors<\/strong>, where setting up a comparable environment with live reload capabilities might be equally burdensome.<\/p>\n<h2>Performance<\/h2>\n<p>Introduced in Firefox 34, the performance tool <strong>supersedes the JavaScript sampling profiler<\/strong>, facilitating the creation of detailed performance analyses, including the impact of reflows, paints, and the parsing of JavaScript and CSS.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/performance.jpg\" alt=\"Performance Analysis\" width=\"716\" height=\"413\"><\/figure>\n<p><strong>Profiles are easily managed<\/strong>, allowing for straightforward comparison and optimization efforts.<\/p>\n<h2>Timeline<\/h2>\n<p>Exclusive to the Developer Edition, the timeline tool <strong>visualizes browser engine activities<\/strong>, tracking reflows, restyles, paints, console, and DOM events.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/timeline.jpg\" alt=\"Browser Engine Timeline\" width=\"417\" height=\"371\"><\/figure>\n<h2>Network<\/h2>\n<p>The Network tab offers <strong>valuable insights into your website\u2019s requests during load time and user interaction<\/strong>. It showcases an array of resources, status codes, load durations, and timings.<\/p>\n<p>A filtering option at the bottom enables the examination of specific types of assets, notably useful for analyzing AJAX calls via the XHR filter.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/network.jpg\" alt=\"Network Insights\" width=\"753\" height=\"222\"><\/figure>\n<p>Selecting an asset reveals detailed information on response and request headers, cookies, parameters, and timings.<\/p>\n<p>An especially handy feature is <strong>the option to initiate a performance analysis directly from the context menu<\/strong>, resulting in comparative pie charts of cached and uncached loads.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/cache.jpg\" alt=\"Cache Performance Analysis\" width=\"517\" height=\"510\"><\/figure>\n<h2>Responsive Design Mode<\/h2>\n<p>The responsive design mode <strong>enables previewing your site across various screen sizes<\/strong>, though it\u2019s not an exact emulator, it\u2019s invaluable for testing media queries.<\/p>\n<p>In this mode, you can toggle between preset dimensions, manually adjust sizes, alter orientation, and simulate touch events.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/responsive-design-mode.jpg\" alt=\"Responsive Design Testing\" width=\"360\" height=\"529\"><\/figure>\n<p>While I typically adjust browser window width during development, <strong>using responsive design mode for final reviews and mid-breakpoint assessments has proven exceptionally beneficial<\/strong>.<\/p>\n<h2>Conclusion<\/h2>\n<p>To summarize: though the Firefox Developer Edition may not introduce groundbreaking features for those already familiar with Mozilla\u2019s offerings, <strong>its potential is evident<\/strong>. I\u2019m eager to see integration of tools specific to Coffeescript, Sass, Less, and more.<\/p>\n<p><strong>The addition of compilers and processing utilities could elevate the Firefox Developer Edition from a mere testing tool to a comprehensive development suite<\/strong>. As a developer with a toolkit for compiling scripts, building finals, automating tasks, checking errors, and live-reloading, a browser incorporating some of these functions could significantly expedite certain processes. I\u2019m keenly watching this development and recommend you do the same.<\/p>\n<p>Your insights or experiences with the Firefox Developer Edition are welcome in the comments.<\/p>\n<p><strong>Note:<\/strong> This article was originally published on November 11, 2014.<\/p>","protected":false},"excerpt":{"rendered":"<p>After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not officially declared, it seems poised to replace Firefox Aurora eventually. The name, official statements, and the landing page suggest that Firefox Developer Edition is the first major browser designed with developers in mind, rather than&hellip;<\/p>\n","protected":false},"author":143,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[2856,34,3414,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Look Into: Firefox Developer Edition - Hongkiat<\/title>\n<meta name=\"description\" content=\"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: Firefox Developer Edition\" \/>\n<meta property=\"og:description\" content=\"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-11T15:01:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T17:34:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg\" \/>\n<meta name=\"author\" content=\"Daniel Pataki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Pataki\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/\"},\"author\":{\"name\":\"Daniel Pataki\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\"},\"headline\":\"A Look Into: Firefox Developer Edition\",\"datePublished\":\"2014-11-11T15:01:01+00:00\",\"dateModified\":\"2024-02-20T17:34:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/\"},\"wordCount\":1304,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developer-version\\\/toolbar.jpg\",\"keywords\":[\"Dev Tools\",\"Firefox\",\"toolkit\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/\",\"name\":\"A Look Into: Firefox Developer Edition - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developer-version\\\/toolbar.jpg\",\"datePublished\":\"2014-11-11T15:01:01+00:00\",\"dateModified\":\"2024-02-20T17:34:17+00:00\",\"description\":\"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developer-version\\\/toolbar.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/firefox-developer-version\\\/toolbar.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/firefox-developer-version\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: Firefox Developer Edition\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/76d3b3baacd688e9a0d7bd24553519bc\",\"name\":\"Daniel Pataki\",\"description\":\"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.\",\"sameAs\":[\"http:\\\/\\\/danielpataki.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/danielpataki\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Look Into: Firefox Developer Edition - Hongkiat","description":"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: Firefox Developer Edition","og_description":"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not","og_url":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-11-11T15:01:01+00:00","article_modified_time":"2024-02-20T17:34:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg","type":"","width":"","height":""}],"author":"Daniel Pataki","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Daniel Pataki","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/"},"author":{"name":"Daniel Pataki","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc"},"headline":"A Look Into: Firefox Developer Edition","datePublished":"2014-11-11T15:01:01+00:00","dateModified":"2024-02-20T17:34:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/"},"wordCount":1304,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg","keywords":["Dev Tools","Firefox","toolkit","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/","url":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/","name":"A Look Into: Firefox Developer Edition - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg","datePublished":"2014-11-11T15:01:01+00:00","dateModified":"2024-02-20T17:34:17+00:00","description":"After a brief preview, Mozilla has officially launched Firefox Developer Edition, a browser tailored specifically for web developers. Though not","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/firefox-developer-version\/toolbar.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/firefox-developer-version\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: Firefox Developer Edition"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/76d3b3baacd688e9a0d7bd24553519bc","name":"Daniel Pataki","description":"Daniel is a writer for Hongkiat.com. When not coding or writing, you'll find him playing board games or running with his dog. You can drop him a line on Twitter or visit his personal website.","sameAs":["http:\/\/danielpataki.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/danielpataki\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Ok","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/143"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22340"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22340\/revisions"}],"predecessor-version":[{"id":71304,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22340\/revisions\/71304"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22340"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}