神刀安全网

Revisiting Firefox’s DevTools

Revisiting Firefox’s DevTools

Advertisement

If you do any kind of development for the web, then you know how important tools are , and you like finding tools that make your life easier. Developing and testing new browser features, however, takes time. Between the time a useful tool first appears in an experimental nightly build and the time it’s available for everyone to use in Firefox, a while has passed.

That’s one of the reasons Mozilla released Firefox Developer Edition 41 27 1 in November 2014 as the recommended Firefox browser for developers. It gets new feature updates more quickly so that you can use the latest tools.

Of course, testing your websites in the standard Firefox release is still crucial. Thankfully, Developer Edition makes this easy by letting you run both programs side by side. Plus, Developer Edition comes with a slick new theme that matches its tools.

A Bit Of HistoryLink

How far back do we go? Way back in 2001, a debugger called “Venkmann” was available for Netscape Navigator version 7. The Netscape corporation had a system for UIs named XML User Interface Language (XUL). It also had a love of the movie “Ghostbusters” and its demonic character Zuul; so, Rob Ginder, who wrote that early debugger, had four options for naming his new debugger, and Venkmann beat out Stantz, Spengler and Zeddemore.

Revisiting Firefox’s DevTools 2

Venkmann, the JavaScript debugger. ( View large version 3 )

Venkmann was just a JavaScript debugger. It couldn’t inspect the DOM or show network traffic. Netscape had a built-in console, but that was it as far as debugging tools went.

The next piece of the puzzle was the DOM inspector , which was released around 2004 or 2005. It wasn’t friendly to web developers, and it was about debugging XUL as much as HTML.

Revisiting Firefox’s DevTools 4

DOM Inspector add-on. ( View large version 5 )

So, in early 2006 Firefox had three pieces of the puzzle: a built-in console, a debugger and a DOM inspector — each separate and not all built in.

In late 2006 Joe Hewitt, who worked on the early release of Firefox, released Firebug version 1.0. Firebug broke new ground in allowing developers to view the DOM and in providing a JavaScript console and debugger and DOM inspector all in the same tool.

Revisiting Firefox’s DevTools 6

Firebug, an all-in-one developer tool. ( View large version 7 )

But Firebug was never an official Mozilla project, and with Joe’s departure to Parakey and then Facebook, the development of Firebug was taken up by a group of volunteers led by John J. Barton. Mozilla contributed to the project, supporting Honza Odvarko, who led the project after John left.

In 2011 Mozilla decided that it needed to put more effort into its developer tools and start from a clean slate to build some next-generation tools, while continuing to support the maintenance of Firebug.

One of the challenges with developer tools is that they need to reach deep into the platform to understand how the system works. They need to be a part of the browser and can’t easily be made as add-ons.

So, as Firefox gets updated, keeping Firebug running as a separate add-on becomes harder and harder. Upgrading the debugger APIs, which Firebug needed to keep up with, was significant work, and when the initiative to have separate browser and content processes in Firefox was announced, Mozilla decided to rebuild Firebug on top of the built-in tools .

A Solid Set Of Standard FeaturesLink

Firefox’s DevTools have come a long way since their inception, quickly bridging the gaps between Firebug and other browsers’ developer tools. It now has all of the tools you’d expect from a browser. Let’s go through some of the main ones.

The page inspector 8 has a a box-model highlighter, a CSS rules editor, a viewer for computed styles, fonts and layout, support for pseudo-elements, and a search tool.

Revisiting Firefox’s DevTools 9

The page inspector. ( View large version 10 )

The web console 11 lists JavaScript, CSS, and network and security logs. It supports custom formatting, as well as previews and inspection of DOM nodes, objects and arrays, allowing you to search and filter them.

Revisiting Firefox’s DevTools 12

The web console. ( View large version 13 )

The JavaScript debugger 14 lets you halt the execution of scripts at any point, navigate the call stack and inspect variables. It supports source maps, pretty printing of minified sources, and black boxing of library files. And it supports dynamically evaluated scripts.

Revisiting Firefox’s DevTools 15

The JavaScript debugger. ( View large version 16 )

The network monitor 17 lists all requests that Firefox makes for a web page. It displays headers, responses and cookies, letting you search through them. It also shows a performance analysis of the page load.

Revisiting Firefox’s DevTools 18

The network monitor’s requests list. ( View large version 19 )

Revisiting Firefox’s DevTools 20

The network monitor’s performance analysis. ( View large version 21 )

The performance tools 22 give you insight into a website’s JavaScript and layout performance by recording browser activity over time and exposing frame-rate data, memory usage, JavaScript calls and browser-rendering events such as styling, layout and paints.

Revisiting Firefox’s DevTools 23

The performance tool’s waterfall graph. ( View large version 24 )

Revisiting Firefox’s DevTools 25

The performance tool’s JavaScript flame chart. ( View large version 26 )

Some Key DifferentiatorsLink

On top of the usual set of tools, Firefox has a number of neat features to make your life as a developer or designer easier. We’ll go over some of them now, but download Firefox Developer Edition 41 27 1 and try them out for yourself.

Work With AnimationsLink

CSS animations and transitions are a great way to improve the UX of a website, but they’re also hard to get right , and they can easily get in the way instead of guiding the user’s flow. If you want your animations to look and feel just right, then you’ll need to spend time finetuning those keyframes, durations and timing functions. Firefox comes with a set of tools to help with just that. Let’s go through a few.

Timing functionLink

The timing function 28 drives the way that an animation or transition progresses through time. Timing functions are often described with a cubic-bezier curve. Coming up with the perfect curve is not straightforward; so, Firefox’s DevTools comes with a tooltip that allows you to modify a curve visually or even choose from a list of presets.

CSS animations are described with a set of @keyframe rules 29 . Firefox displays these keyframe rules in the view for CSS rules when the selected element is animated, so that you can directly edit them there, where you’d expect. You can even edit keyframe properties while an animation is playing.

Animation inspectorLink

The animation inspector 30 allows you to view all individual animations on a page, detect when they get added or removed, as well as pause them at any point, slow them down or speed them up. It’s a powerful feature for looking at animations in detail.

Test on Multiple Devices, Browsers and ScreensLink

When it comes to making sure a website displays correctly for everyone, things are a lot more complex than they used to be. We now have to deal with many aspect ratios and pixel densities, as well as many browsers on all sorts of operating systems and devices. Thankfully, Firefox comes with tools just for this.

Responsive design viewLink

The responsive design view 31 makes it really easy to see how a website looks at different screen sizes. Either choose a size from the list of presets or adjust the size to anything you want by entering custom dimensions or dragging the viewport. The responsive design view can quickly be toggled from the keyboard (Command + Alt + M or Control + Shift + M) or by clicking the corresponding icon in the DevTools toolbar.

ValenceLink

Valence 32 is an add-on that comes preinstalled with Firefox’s WebIDE. WebIDE already allows you to connect Firefox’s DevTools to any website or app on Firefox OS and in Firefox for Android. Now, with Valence, you can also connect the tools to Chrome on Android and the desktop and to Safari on iOS and Mac OS X. Valence gives you pretty much all you need for multi-browser testing without having to leave the DevTools you’re used to.

Developer toolbarLink

The developer toolbar 33 has a handy media command 34 that’s useful for emulating any media type in the browser. It’s very useful for testing your website’s print CSS, for instance.

Discover, Use and Understand Complex CSS FeaturesLink

CSS can be complex. Some strings of syntax are hard to remember, some you might not even know about, and others, even ones you know of, have effects that are hard to predict. Firefox’s DevTools, being built into the browser, are ideally positioned to give you all of the information necessary to work with the syntax. Let’s see some examples.

CSS properties tooltipsLink

The CSS properties tooltips 35 help you remember the different values and syntax constructions that properties can have. Firefox makes it super-easy to get documentation for any CSS property directly in the tools where you need it. Right-click on any property’s name in the CSS rules editor to get documentation in a tooltip, with a list of possible values and documentation about them, too.

CSS transforms previewerLink

The CSS transforms previewer 36 helps you understand how a given set of transform functions have changed an element. The transform property is the sort of CSS property that is hard to get right just by looking at the code; a visual rendering of what has happened is usually much better. The CSS transform previewer highlights the element as it was before and after it got transformed, so that you can easily see the effect of the transformation.

CSS filter tooltipLink

Filters are a relatively new feature in CSS and really powerful. With them, you can blur, add shadow or rotate the colors of any element simply. Writing a valid CSS filter function isn’t the easiest thing in the world, and you can chain as many functions as you want, so Firefox’s DevTools has a handy tooltip that allows you to create filters 37 in a simple and visual way.

Miscellaneous Tips and TricksLink

Ever need to take a screenshot of all or part of a page? Capturing web pages or parts of web pages as images is a powerful way to show a design or a bug to other people. Doing this in Firefox is easy, either by right-clicking on any node in the page inspector or by using the full-page screenshot button in the toolbar (make sure it’s enabled in the options panel first).

Eyedropper toolLink

The eyedropper 38 tool is useful for sampling any color from a page. If you need to copy the color of any part of a web page or want to change the color on an element’s CSS property, then use the eyedropper. In the CSS rules view, with an element selected, click on the color swatch next to any color property’s value to change it. Or, in the developer menu bar, choose the eyedropper item to copy colors from the page.

Highlight all elements that match a selector by clicking on the selector icon in the CSS rules view.

CSS rules view search barLink

Filter styles using the CSS rules view search bar 39 . This might be helpful if you’re not sure which property has overridden another.

Closing WordsLink

Firefox’s DevTools have evolved quite rapidly in recent years, and feature-packed versions are now getting released every six weeks. The project is being driven by an active community 40 , which you can be a part of!

Feel free to download Firefox Developer Edition 41 27 1 to try out the latest version of the tools. And stay up to date on new features at Mozilla Hacks 42 .

(rb, jb, al)

原文  http://www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Revisiting Firefox’s DevTools

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮