{"id":29409,"date":"2015-11-03T05:00:42","date_gmt":"2015-11-03T13:00:42","guid":{"rendered":"https:\/\/hacks.mozilla.org\/?p=29409"},"modified":"2015-11-03T18:17:21","modified_gmt":"2015-11-04T02:17:21","slug":"developer-edition-44-creative-tools-and-more","status":"publish","type":"post","link":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/","title":{"rendered":"Developer Edition 44: New visual editing and memory management tools"},"content":{"rendered":"<p>This month marks the one-year anniversary of <a href=\"https:\/\/firefox.com\/developer\" target=\"_blank\">Firefox Developer Edition<\/a>. To celebrate, we\u2019re excited to show you some new tools &#8211; and some improvements to existing tools &#8211; that let you work with the Web in a visual and intuitive way.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/g9k4IrtaPMs\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>As the Web becomes a more dynamic, interactive and mobile experience, visual designers are more than ever experimenting with animation &#8211; and the latest Firefox Developer Edition has tools to make working with animations faster and easier. Firefox Developer Edition now gives visual designers and animators a set of visual editing tools that work like they do. We are addressing the technically challenging aspects of animation with a set of visceral, powerful, interactive tools that are comfortable for designers to use. Visual editing tools should appeal to animators, not just to programmers.<\/p>\n<h2>DevTools Challenger<\/h2>\n<p>Reading about our new tools is great, but trying them out yourself is even better! To help you get started, we partnered with acclaimed Web animation engineer and advocate <a href=\"http:\/\/rachelnabors.com\/\" target=\"_blank\">Rachel Nabors<\/a> to create <a href=\"http:\/\/devtoolschallenger.com\/\" target=\"_blank\">DevTools Challenger<\/a>. Check out DevTools Challenger for hands-on exercises with all of our new visual design tools. Remember to keep scrolling until you get to the ocean floor!<\/p>\n<p><a href=\"http:\/\/devtoolschallenger.com\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29433 size-large\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger-500x409.png\" alt=\"Screenshot of the Devtools Challenger demo website\" width=\"500\" height=\"409\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger-500x409.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger-250x204.png 250w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger.png 2002w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>Animation &amp; CSS Filter Tools<\/h2>\n<p>The Page Inspector\u2019s <a href=\"https:\/\/developer.mozilla.org\/docs\/Tools\/Page_Inspector\/How_to\/Work_with_animations\" target=\"_blank\">animation panel<\/a> makes it easy to scrub, pause, and visualize each animation on a webpage. Thanks to its tight integration in the DOM inspector, you can switch between a global view of every animation, or drill down to just a few nodes.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/animationtools.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-29431\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/animationtools.png\" alt=\"animationtools\" width=\"2096\" height=\"1424\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/animationtools.png 2096w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/animationtools-250x170.png 250w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/animationtools-500x340.png 500w\" sizes=\"auto, (max-width: 2096px) 100vw, 2096px\" \/><\/a><\/p>\n<p>Once you\u2019ve found the animation you want, our visual cubic-bezier editor is just a click away. Packed with useful presets, the editor will ensure your animation moves perfectly.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/cubicbezier-cropped.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29427 size-large\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/cubicbezier-cropped-500x447.png\" alt=\"Screenshot of the visual cubic-bezier curve editor\" width=\"500\" height=\"447\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/cubicbezier-cropped-500x447.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/cubicbezier-cropped-250x223.png 250w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/cubicbezier-cropped.png 940w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>We\u2019ve also built a similar editor for <a href=\"https:\/\/developer.mozilla.org\/docs\/Tools\/Page_Inspector\/How_to\/Edit_CSS_filters\" target=\"_blank\">CSS filters<\/a>, allowing you to visually add, remove, re-order, and adjust filters with live feedback from the page.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/filtereditor-cropped.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29428 size-large\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/filtereditor-cropped-500x266.png\" alt=\"filtereditor-cropped\" width=\"500\" height=\"266\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/filtereditor-cropped-500x266.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/filtereditor-cropped-250x133.png 250w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/filtereditor-cropped.png 1140w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>Measurements &amp; Colors<\/h2>\n<p>Firefox Developer Edition also features two brand new tools for fine-tuning layout: you can now enable <a href=\"https:\/\/developer.mozilla.org\/docs\/Tools\/Rulers\" target=\"_blank\">pixel rulers<\/a> along the page margins, or use our new measurement tool to drag-and-measure arbitrary regions of the page.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/measuretools1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29432 size-large\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/measuretools1-500x344.png\" alt=\"\" width=\"500\" height=\"344\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/measuretools1-500x344.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/measuretools1-250x172.png 250w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>The Inspector now defaults to displaying CSS colors \u201cas authored,\u201d and shift-clicking on a color swatch cycles between authored styles and equivalent hex, rgb, and hsl values. There\u2019s even an <a href=\"https:\/\/developer.mozilla.org\/docs\/Tools\/Eyedropper\" target=\"_blank\">eyedropper tool<\/a> to pick colors right from the page.<\/p>\n<h2>Memory Snapshots<\/h2>\n<p>The new Memory tool helps front-end engineers better understand and optimize the way pages allocate and retain memory. The tool works by taking a snapshot of the heap, then allows you to drill down by retained object type, allocation stack, or internal representation. We think you\u2019ll like it, and we\u2019ve got many more features and enhancements in the works!<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/nyanparticles.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-29449 size-large\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/nyanparticles-500x304.png\" alt=\"Screenshot of the DevTools memory panel\" width=\"500\" height=\"304\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/nyanparticles-500x304.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/nyanparticles-250x152.png 250w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<h2>WebSocket Debugging API<\/h2>\n<p>Lastly, we\u2019re extremely excited to announce that Firefox now exposes an API for monitoring WebSocket frames (<a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1203802\" target=\"_blank\">Bug 1203802<\/a>), which is the first step on the path to a full-fledged WebSocket inspection tool. Developer Tools engineer Jan Odvarko has built <a href=\"https:\/\/github.com\/firebug\/websocket-monitor\/wiki\" target=\"_blank\">an experimental add-on<\/a> for inspecting WebSocket traffic. Install the add-on and give it a try, we&#8217;d love your feedback.<\/p>\n<p><a href=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/websocket-demo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-29450\" src=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/websocket-demo-500x202.png\" alt=\"Screenshot of the experimental WebSocket Debugger add-on\" width=\"500\" height=\"202\" srcset=\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/websocket-demo-500x202.png 500w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/websocket-demo-250x101.png 250w, https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/websocket-demo.png 737w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p>Firefox Developer Edition is available at <a href=\"https:\/\/firefox.com\/developer\">firefox.com\/developer<\/a>. Let us know what you think about these features by commenting below or following <a href=\"https:\/\/twitter.com\/FirefoxDevTools\" target=\"_blank\">@FirefoxDevTools<\/a> on Twitter!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This month marks the one-year anniversary of Firefox Developer Edition. To celebrate, we\u2019re excited to show you some new tools &#8211; and some improvements to existing tools &#8211; that let you work with the Web in a visual and intuitive way. As the Web becomes a more dynamic, interactive and mobile experience, visual designers are [&hellip;]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[297,7110,30,247],"tags":[],"coauthors":[264731,264758],"class_list":["post-29409","post","type-post","status-publish","format-standard","hentry","category-developer-tools","category-featured","category-firefox","category-firefox-releases"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Developer Edition 44: New visual editing and memory management tools - Mozilla Hacks - the Web developer blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dave Camp, Dan Callahan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/\",\"url\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/\",\"name\":\"Developer Edition 44: New visual editing and memory management tools - Mozilla Hacks - the Web developer blog\",\"isPartOf\":{\"@id\":\"https:\/\/hacks.mozilla.org\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger-500x409.png\",\"datePublished\":\"2015-11-03T13:00:42+00:00\",\"dateModified\":\"2015-11-04T02:17:21+00:00\",\"author\":{\"@id\":\"https:\/\/hacks.mozilla.org\/#\/schema\/person\/fa3209d02c3c870ad80922ab2c7c8b6b\"},\"breadcrumb\":{\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage\",\"url\":\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger.png\",\"contentUrl\":\"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger.png\",\"width\":2002,\"height\":1636,\"caption\":\"Screenshot of the DevTools Challenger demo website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hacks.mozilla.org\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Developer Edition 44: New visual editing and memory management tools\"}]},{\"@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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hacks.mozilla.org\/#\/schema\/person\/fa3209d02c3c870ad80922ab2c7c8b6b\",\"name\":\"Dave Camp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hacks.mozilla.org\/#\/schema\/person\/image\/9c7d9bb26d455a0c1184580ecf078148\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/614fbd3564bd3e7f787e7c4f2c3040e0c8c651c0339349b74a9e7fab6c5f8b13?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/614fbd3564bd3e7f787e7c4f2c3040e0c8c651c0339349b74a9e7fab6c5f8b13?s=96&d=mm&r=g\",\"caption\":\"Dave Camp\"},\"description\":\"Dave Camp is Director of Engineering for Firefox at Mozilla.\",\"sameAs\":[\"https:\/\/x.com\/campd\"],\"url\":\"https:\/\/hacks.mozilla.org\/author\/dcampmozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Developer Edition 44: New visual editing and memory management tools - Mozilla Hacks - the Web developer blog","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:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/","twitter_misc":{"Written by":"Dave Camp, Dan Callahan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/","url":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/","name":"Developer Edition 44: New visual editing and memory management tools - Mozilla Hacks - the Web developer blog","isPartOf":{"@id":"https:\/\/hacks.mozilla.org\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage"},"image":{"@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage"},"thumbnailUrl":"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger-500x409.png","datePublished":"2015-11-03T13:00:42+00:00","dateModified":"2015-11-04T02:17:21+00:00","author":{"@id":"https:\/\/hacks.mozilla.org\/#\/schema\/person\/fa3209d02c3c870ad80922ab2c7c8b6b"},"breadcrumb":{"@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#primaryimage","url":"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger.png","contentUrl":"https:\/\/hacks.mozilla.org\/wp-content\/uploads\/2015\/11\/challenger.png","width":2002,"height":1636,"caption":"Screenshot of the DevTools Challenger demo website"},{"@type":"BreadcrumbList","@id":"https:\/\/hacks.mozilla.org\/2015\/11\/developer-edition-44-creative-tools-and-more\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hacks.mozilla.org\/"},{"@type":"ListItem","position":2,"name":"Developer Edition 44: New visual editing and memory management tools"}]},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hacks.mozilla.org\/#\/schema\/person\/fa3209d02c3c870ad80922ab2c7c8b6b","name":"Dave Camp","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hacks.mozilla.org\/#\/schema\/person\/image\/9c7d9bb26d455a0c1184580ecf078148","url":"https:\/\/secure.gravatar.com\/avatar\/614fbd3564bd3e7f787e7c4f2c3040e0c8c651c0339349b74a9e7fab6c5f8b13?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/614fbd3564bd3e7f787e7c4f2c3040e0c8c651c0339349b74a9e7fab6c5f8b13?s=96&d=mm&r=g","caption":"Dave Camp"},"description":"Dave Camp is Director of Engineering for Firefox at Mozilla.","sameAs":["https:\/\/x.com\/campd"],"url":"https:\/\/hacks.mozilla.org\/author\/dcampmozilla-com\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/posts\/29409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/comments?post=29409"}],"version-history":[{"count":0,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/posts\/29409\/revisions"}],"wp:attachment":[{"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/media?parent=29409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/categories?post=29409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/tags?post=29409"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/hacks.mozilla.org\/wp-json\/wp\/v2\/coauthors?post=29409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}