Tools

Tools we use

As 2017 draws to a close, we thought it might be helpful to discuss the tools we use for various activities. These tools are not directly used for web design and development; they help our overall processes. Web Professionals considering freelance work or those working in enterprises may find this list helpful. Obviously, these are the choices we have made; we are not endorsing these particular tools – they just work for us. Your mileage will (and should) vary. We also include a brief overview of why it is important to consider using a tool for a specific task.

  • Accounting – many prefer QuickBooks. Others prefer Freshbooks. Regardless of the tool you use, it is important to keep track of income and expenditures.
  • Advice – mentoring is particularly important when you are starting. Obviously, Web Professionals members are here to help. Additionally, you may wish to consider the Small Business Administration and SCORE. The latter provides free business mentoring.
  • File management – we often work across multiple computers (and need access to files in a variety of situations). We have come to rely on tools such as Google docs, One Drive, Dropbox and similar services.
  • Graphics and video – we have come to rely more and more on Adobe Spark. It is a free tool and provides the ability to rapidly create messages for social media and more.
  • Networking – we should not be working alone; it is important to network with peers. We often rely on Meetup to find local groups with similar interests. Our members also know we use Slack to enhance member to member communication.
  • Password vault – passwords should be long and complex and not reused on various sites. This is why a password vault is so handy these days. If you are not using one, you should be. Examples include DashlaneLastPass, or KeePass (there are other alternatives as well). You only need to remember one password to open the vault and can then copy and paste passwords for a specific site as needed. We also recommend using two factor authentication where possible (see below).
  • Portable Apps – when there is a need to use Windows computers in client locations (or you simply want to take your browser favorites/ bookmarks) with you from computer to computer, we have found PortableApps to be a reasonable solution.
  • Project management – we often use Trello (yes, there are many alternatives). Trello fits with our work flows. We find it easy to share boards, checklists and more with others as needed.
  • Screen capture – we typically rely on SnagIt. However, there are times when using computers while working with clients, we have used Greenshot. The latter also has a zip version (so we can take it with us on a USB drive) along with other portable apps (see above). Yes, you can use the snipping tool (and the Mac equivalent), but tools (such as SnagIt) provide greater control and the ability to rapidly crop and annotate the screen capture.
  • Sharing/ collaborating – we typically use Connect and Zoom. There are many alternatives as well, such as Join.me. The advantage of using these tools (in addition to collaboration) is that you can record your screen (with narration) and use these for training, demonstrations and more.
  • Time trackingToggl is what we use to keep track of time spent on various activities. It is important to measure how much time you are spending on various tasks and projects.
  • Two factor authentication – Passwords are no longer enough to provide access to sites. We recommend using two factor authentication where possible. Google Authenticator, Duo, and Microsoft Authenticator are examples. The SANS OUCH newsletter provided a timely overview of 2 factor authentication recently. Disclosure, I (Mark) am one of the reviewers of that newsletter.
  • WordPress site management – if you are running multiple WordPress sites (and roughly 1/4 of all sites in the U.S. these days are based on this technology), you might want to consider using ManageWP. This is a freemium service offered by GoDaddy. It has a number of useful features in the free version (and you can get site monitoring for a nominal amount per site per month). This can save you a lot of time updating plugins, dealing with SPAM and more.

This is our list of tools that we often use. What did we forget? What tools in the above list do you use? Do you have alternative tools you prefer? Why do you prefer those? We look forward to your comments and further discussions. Let us know if you would like to have a separate Slack channel devoted to tools as well.

Best always,

Mark DuBois

Community Evangelist and Executive Director

The post Tools we use appeared first on Web Professionals.

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

New Responsive Design Mode: RDM Lands in Firefox Dev Tools

Firefox Developer Tools now includes a completely redesigned Responsive Design Mode (RDM for short) that’s just landed in Firefox Developer Edition, thanks to hard work from the DevTools team.

In a mobile-first world, it’s essential to prioritize performance for low-bandwidth and offline mobile experiences and design progressive web apps that can deliver across a range of devices. We aim to design developer tools that prioritize empathy for users and developers. That’s why we’ve put so much effort into the Responsive Design Mode.

We want to make it easier for developers to build web experiences that load and respond on screens of all different sizes and support a multitude of browsers, platforms, and device types. RDM is a significant upgrade to the Firefox tools themselves, reflecting our commitment to people who build for the web.

To access the RDM tool, make sure you’re running an up-to-date version of DevEdition. Next, open any web page to view  the Responsive Design Mode via Developer ? Responsive Design Mode.

There’s a lot in this new tool, and many new features still to come. Check out the video walk-through to see the tool in action with all of its features enumerated, including:

  • Popular device emulation
  • Network throttling
  • Touch-event emulation
  • Ability to set DPR (device pixel ratio) of devices
  • Screenshotting devices at certain sizes

Firefox Developer Tools already has a series of improvements planned for the next release of Responsive Design Mode, including:

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Optimizing JavaScript Performance With Firefox Dev Tools

The Performance tool in Firefox Developer Tools offers a great way to diagnose slow-running JavaScript and provides insight into the general responsiveness and layout performance of your web site.

In this video screencast, I’ll go through the process of how to diagnose issues with slow code and how to fix those issues in your code. Watch me fix for a 2d canvas demo that’s so slow it can barely update after a few seconds. By running a performance analysis, I’ll show you a simple code tweak that makes the demo run well at real-time rates.

Relevant Links

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Developer Edition 45 – Animations, Memory Tools and More

Firefox Developer Edition 45 has improvements to DevTools that will help you track down memory usage, dig into CSS animations, and more. In this post we’ll cover some of these changes – be sure to download the latest Developer Edition to try them yourself.

CSS animation tool++

demo of css animation tools

The animation tool has many additions:

  • When you click on an animation in the timeline, you’ll now see a list of the animated properties plus keyframes which show you the change in values over time.
  • If an animation is moving too fast for you to see what’s going on, you can now slow it down by changing the playback rate.
  • Animations running on the compositor thread have a lightning bolt icon next to them. This means that they will remain smooth even if the rest of the page is slow.

Learn more about using the animation tool in the latest episode of Patrick Brosset’s screencast series: “Using the Dev Tools to understand CSS”.

Beyond the animation improvements, the inspector’s search tool was also improved. It now matches results from all markup in the page and subframes.

What’s eating your memory?

We’ve improved the way you can inspect memory usage and find what is consuming memory. With snapshot diffing, you can inspect changes in the heap contents since a previous snapshot. And with snapshot filtering, you can show only memory allocated in a certain file or function, or show only the objects of a specific [[class]] type.

Read more about the Memory Tool and documentation about how to get started with it. We’ve also put together a quick gif that walks through the diffing process.

A bit of polish

We’ve also been working on polish and bug fixes across the toolbox – here are some of the highlights.

Console

If you’re working with WeakMap and WeakSet objects, you can now see their entries in the web console.

weakset

Also, logs coming from service workers show up by default in controlled tabs. There is still a lot of work coming to improve the service worker debugging experience, follow this tracking bug for more.

Network monitor

  • You’ll see markers showing when DOMContentLoaded and load events fire in the network timeline.
  • You can now filter out filenames based on a string match. Just use “-” in front of the string, which is a handy way to narrow down a big list of requests.

console

And a big thanks to contributors Albert Juhé and Tim Nguyen for their help in making the netmonitor table UI match the rest of the toolbox.

There are a lot of improvements in this version so download it now — it’s free!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Developer Edition 44: New visual editing and memory management tools

This month marks the one-year anniversary of Firefox Developer Edition. To celebrate, we’re excited to show you some new tools – and some improvements to existing tools – 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 more than ever experimenting with animation – 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.

DevTools Challenger

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 Rachel Nabors to create DevTools Challenger. 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!

Screenshot of the Devtools Challenger demo website

Animation & CSS Filter Tools

The Page Inspector’s animation panel 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.

animationtools

Once you’ve 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.

Screenshot of the visual cubic-bezier curve editor

We’ve also built a similar editor for CSS filters, allowing you to visually add, remove, re-order, and adjust filters with live feedback from the page.

filtereditor-cropped

Measurements & Colors

Firefox Developer Edition also features two brand new tools for fine-tuning layout: you can now enable pixel rulers along the page margins, or use our new measurement tool to drag-and-measure arbitrary regions of the page.

The Inspector now defaults to displaying CSS colors “as authored,” and shift-clicking on a color swatch cycles between authored styles and equivalent hex, rgb, and hsl values. There’s even an eyedropper tool to pick colors right from the page.

Memory Snapshots

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’ll like it, and we’ve got many more features and enhancements in the works!

Screenshot of the DevTools memory panel

WebSocket Debugging API

Lastly, we’re extremely excited to announce that Firefox now exposes an API for monitoring WebSocket frames (Bug 1203802), which is the first step on the path to a full-fledged WebSocket inspection tool. Developer Tools engineer Jan Odvarko has built an experimental add-on for inspecting WebSocket traffic. Install the add-on and give it a try, we’d love your feedback.

Screenshot of the experimental WebSocket Debugger add-on

Firefox Developer Edition is available at firefox.com/developer. Let us know what you think about these features by commenting below or following @FirefoxDevTools on Twitter!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Developer Edition 42: Wifi Debugging, Win10, Multiprocess Firefox, ReactJS tools, and more

Firefox 42 has arrived! In this release, we put a lot of effort into the quality and polish of the Developer Edition browser. Although many of the bugs resolved this release don’t feature in the Release Notes, these small fixes make the tools faster and more stable. But there’s still a lot to report, including a major change to how Firefox works.

Debugging over wifi

Now, with remote website debugging, you can debug Firefox for Android devices over wifi – no USB cable or ADB needed.

Multiprocess is enabled by default

Multiprocess Firefox (aka E10s) has been enabled by default in Developer Edition. When it’s enabled, Firefox renders and executes web-related content in a single background content process. If you experience any issues with addons after updating to Developer Edition 42, try disabling incompatible addons or reverting to a single process mode using about:preferences.

Windows 10 theme support

The Developer Edition theme has a new look in Windows 10 to match the OS styling. Take a look:

Screenshot of the dark Developer Edition theme in Windows 10

Dark Developer Edition theme – Windows 10

Screenshot of the light Developer Edition theme in Windows 10

Light Developer Edition theme – Windows 10

React Developer Tools support for Firefox

If you’re developing with ReactJS, you may have noticed that the React project recently released a beta for their developer tools extension, including initial support for Firefox. While there are no official builds yet of the Firefox version, the source is available on github.

Other notable changes

  • Asynchronous call stacks now allow you to follow the code flow through setTimeout, DOM event handlers, and Promise handlers. (Bug 981514)
  • There is a new configurable Firefox OS simulator page in WebIDE. From here, you can change a simulator to run with a custom profile and screen size, using a list of presets from reference devices. (Bug 1156834)
  • CSS filter presets are now available in the inspector. (Bug 1153184)
  • The MDN tooltip now uses syntax highlighting for code samples. (Bug 1154469)
  • When using the “copy” keyboard shortcut in the inspector, the outerHTML of the selected node is now copied onto the clipboard. (Bug 968241)
  • New UX improvements have landed in the style editor’s search feature. (Bug 1159001, Bug 1153474)
  • CSS variables are now treated as normal declarations in the inspector. (Bug 1142206)
  • CSS autocomplete popup now supports pressing ‘down’ to list all results in an empty value field (Bug 1142206)

Thanks to everyone who contributed time and energy to help the DevTools team in this release of Firefox Developer Edition 42! Each release takes a lot of effort from people writing patches, testing, documenting, reporting bugs, sending feedback, discussing features, etc. You can help set our priorities by sharing constructive feedback and letting us know what you’d like from Firefox Developer Tools.

You can download Firefox Developer Edition now, for free.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

New Performance Tools in Firefox Developer Edition 40

Today Mozilla is pleased to announce the availability of Firefox Developer Edition 40 (DE 40) featuring all-new performance tools! In this post we will cover some of DE 40’s new developer tools, fixes, and improvements made to existing tools. In addition, a couple of videos showcase some of these features.

Note: Many of the new features were introduced in May, in an earlier Mozilla Hacks post.

Introducing the new performance tools

Firefox Developer Edition features a new performance tool that gives developers a better understanding of what is happening from a performance standpoint within their applications. Web developers can use these tools to profile performance in any kind of website, app, or game; for a fun insight into how these tools can be used to optimize HTML5 games, check out our post about the “Power Surge” game right after you’re done here.

All performance tools can now be found grouped together under the Performance tab, for easier usage. Performance is all about timing, so you can view browser events in the context of a timeline, which in turn can be extended to include a number of detailed views based on the metrics you choose to monitor.

In the following video, Dan Callahan demonstrates how to use the new performance tools.


The Performance tab contains the new timeline, which includes: Waterfall view, Call Tree view and a Flame Chart view.

All of the views above provide details of application performance that can be correlated with a recorded timeline overview. The timeline displays a compressed view of the Waterfall, minimum, maximum, and average frame rates, and a graphical representation of the frame rate. Left-clicking on the view and dragging to the desired range allows you to zoom into this timeline. This also simultaneously updates all three new views to represent a particular selected range.

The recording view gives developers a quick way to zoom into areas where frame rate problems are occurring.
recording

The Waterfall view provides a graphical timeline of events occurring within the application. These events include markers for occurrences such as reflows, restyles, JavaScript calls, garbage collection, and paint operations. Using a simple filter button you can select the events you want to display in the Waterfall.

perffilter

You can use console commands like console.timeStamp() to indicate, with a marker on the Waterfall, when a specific event occurs. Also, you can graphically show timespans using the console.time() and console.timeEnd() functions.

consoletimestamp

The Call Tree view shows the results of the JavaScript profiler for the specified range. Using this view you can see the approximate time spent in a function. The table displays total time spent within a function call or the self-time that a particular function call is using. The total time encapsulates all time spent in the function and includes time spent in nested function calls. The self-time only includes time spent in the particular function, excluding nested calls. This view can be very helpful when trying to locate functions that are consuming a large portion of processing time. This view has been available in previous iterations of Firefox, and should be familiar to developers who have used the tool in the past.

calltreeexample
The Flame Chart view is similar to the Call Tree in that it graphically illustrates the call stack for a selected range. For example, in the screenshot below the drawCirc() function is taking over 25 milliseconds (ms) to complete, which is larger than the allotted time for frame generation to produce 60 frames per second.
flamechartexample

Performance profiles can be created, saved, imported, or deleted. In addition, multiple profiles can be opened at once to contrast and compare performance statistics between runs. Profiles can be created programmatically or using the console, by entering console.profile(“NameOfProfile”) to start a profile and console.profileEnd(“NameOfProfile”) to stop a profile. This allows you to fine-tune when profiling starts and stops within your code.
consoleprofile
You can find complete docs for the performance tools on MDN. These include a tour of the UI, reference pages for each of the main tools, and some examples in which we use the tools to diagnose performance problems in CSS animations and JavaScript-heavy pages.

Additional features and improvements

In addition to the new Performance tools we’ve also implemented many new convenience features — mostly inspired by direct feedback from developers via our UserVoice channel — and over ninety bug fixes, representing a ton of hard work over the last eight weeks from Firefox Developer Tools staff as well as many contributors. Please continue to submit your feedback.

This video from Matthew “Potch” Claypotch shows off some the most requested feature implementations for Developer Edition 40.

Network Monitor improvements

As seen in the video above, the Network Monitor includes many improvements such data collection when the Network Tab is not active, and the ability to see quickly when an asset is loaded from the cache as opposed to the network.
cached
It is now possible to copy post data, URL parameters, and Request and Response headers using the context menu when selecting a row entry.
postdata

CSS docs integration

Firefox Developer Tools now support integration with MDN documentation for CSS properties, providing more information for developers while they are debugging web app styling and layout. To access this feature, you can right-click (Ctrl + click on Mac) on CSS properties within the Inspector, and select “Show MDN Docs” from the context menu.
mdncsslink

Improved Inspector layout

In the Inspector, whitespace in text node layout is cleaned up, providing a better view of your markup.
whitespace

Additional fixes

Many additional fixes are also included, like improvements to the Animation Inspector, scroll into view context menu support and Inspector search improvements. To see all the bugs addressed in this release have a look at this big list in Bugzilla.

We’d like to send a gigantic special thank you to all the contributors and individuals who reported bugs, tested patches, and spent many hours working to make Firefox Developer Tools impressive.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Event listeners popup, @media sidebar, Cubic bezier editor + more – Firefox Developer Tools Episode 33

A new set of Firefox Developer Tools features has just been uplifted to the Aurora channel. These features are available right now in Aurora, and will be in the Firefox 33 release in October. This release brings many new additions, especially to the Inspector tool:

Event listeners popup

Any node with a JavaScript event listener attached to it will now have an “ev” icon next to it in the Inspector. Clicking the icon will open a list of all the event listeners attached to that element. Click the debugger pause icon to get taken to that function in the Debugger, where you can set breakpoints and debug it further. (development notes & UserVoice request)

Event listener popup screenshot

@media sidebar

There’s a new sidebar in the Style Editor which displays a list of shortcuts to every @media rule in the stylesheet you’re editing. Click an item to jump to that rule. The condition text of the rule is greyed-out if the media query doesn’t currently apply. This works well in conjunction with the Responsive Design View (Opt+Cmd+M / Ctrl+Shift+M) for creating and debugging mobile layouts. (development notes)

@media rules sidebar

Add rule

Right-click anywhere in the Rules section of the Inspector to get an “Add Rule” option. Selecting this will add a new CSS rule, pre-populated with a selector that matches the currently selected node. (development notes & UserVoice request)

Add rule screenshot

Edit keyframes

Any @keyframes rules associated with the currently selected element are now displayed in the Rules section of the Inspector, and are editable. This is the first step on the way to better debugging of CSS animations. (development notes)

Editing @keyframe rules

Cubic bezier editor

To aid in editing easing animations, there’s now a cubic bezier editor tooltip that appears when you click the icon next to an animation timing function in a CSS rule. This feature used open source code from Lea Verou’s cubic-bezier.com. (development notes)

Transform highlighter

There’s now an awesome way to visualize how an element has been transformed from its original position and shape. Hovering over a CSS transform property in the Inspector will show the original position of the element on the page and draw lines mapping the original points to their new positions. (development notes)

Transform highlighter screenshot

Persistent disable cache

You can disable the browser cache while you’re developing by checking Advanced Settings > Disable Cache in the Settings tab. Now this setting will persist the next time you open the devtools. As usual, caching is re-enabled for the tab when you close the tools. (development notes & UserVoice request)

New Commands

New commands have been added to the Developer Toolbar (Shift+F2):

inject
The new inject command lets you easily inject jQuery or other JavaScript libraries into your page. Use inject jQuery, inject underscore, or provide your own url with inject <url>. (development notes)
highlight
The highlight command takes a selector and highlights all the nodes on that page that match that selector. (video)(development notes)
folder
The folder command opens a directory in your system’s file explorer. Use folder openprofile to open your Firefox profile directory. (development notes)

Editor preferences

A host of editor preferences are now available in the Settings panel. From here you can change your indentation settings and change editor keybindings to Sublime Text, Vim, or Emacs. (development notes)

WebIDE

A big feature called WebIDE has landed, but is behind a preference for this release while it gets more testing. WebIDE is a tool for in-browser app development. See WebIDE lands in Nightly for more details.

Other features

Edit selectors
Click the selector of any CSS rule in the Inspector to edit it. (development notes)
Black boxed minified sources
JavaScript sources with “min.js” extensions are now automatically black boxed. You can turn this option off in the Debugger settings menu. (development notes)
Custom viewport dimensions
The dimensions in the Responsive Design View are now editable so you can input the exact size you want the content to be. (development notes)

Special thanks to the 33 contributors that added all the features and fixes in this release.

Three of the features from this release came from feedback on the Developer Tools feedback channel, so that’s a great way to suggest features. You can also comment here or shoot feedback to @FirefoxDevTools on Twitter. If you’d like to help out, check out the guide to getting involved.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Introducing the Web Audio Editor in Firefox Developer Tools

In Firefox 32, the Web Audio Editor joins the Shader Editor and Canvas Debugger in Firefox Developer Tools for debugging media-rich content on the web. When developing HTML5 games or fun synthesizers using web audio, the Web Audio Editor assists in visualizing and modifying all of the audio nodes within the web audio AudioContext.

Visualizing the Audio Context

When working with the Web Audio API‘s modular routing, it can be difficult to translate how all of the audio nodes are connected just by listening to the audio output. Often, it is challenging to debug our AudioContext just by listening to the output and looking at the imperative code that creates audio nodes. With the Web Audio Editor, all of the AudioNodes are rendered in a directed graph, illustrating the hierarchy and connections of all audio nodes. With the rendered graph, a developer can ensure that all of the nodes are connected in a way that they expect. This can be especially useful when the context becomes complex, with a network of nodes dedicated to manipulating audio and another for analyzing the data, and we’ve seen some pretty impressive uses of Web Audio resulting in such graphs!

To enable the Web Audio Editor, open up the options in the Developer Tools, and check the “Web Audio Editor” option. Once enabled, open up the tool and reload the page so that all web audio activity can be monitored by the tool. When new audio nodes are created, or when nodes are connected and disconnected from one another, the graph will update with the latest representation of the context.

Modifying AudioNode Properties

Once the graph is rendered, individual audio nodes can be inspected. Clicking on an AudioNode in the graph opens up the audio node inspector where AudioParam‘s and specific properties on the node can be viewed and modified.

Future Work

This is just our first shippable release of the Web Audio Editor, and we are looking forward to making this tool more powerful for all of our audio developers.

  • Visual feedback for nodes that are playing, and time/frequency domain visualizations.
  • Ability to create, connect and disconnect audio nodes from the editor.
  • Tools for debugging onaudioprocess events and audio glitches.
  • Display additional AudioContext information and support multiple contexts.
  • Modify more than just primitives in the node inspector, like adding an AudioBuffer.

We have many dream features and ideas that we’re excited about, and you can view all open bugs for the Web Audio Editor or submit new bugs. Be sure to check out the MDN documentation on the Web Audio Editor and we would also love feedback and thoughts at our UserVoice feedback channel and on Twitter @firefoxdevtools.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Toolbox, Inspector & Scratchpad improvements – Firefox Developer Tools Episode 32

Firefox 32 was just uplifted to the Aurora release channel, so let’s take a look at the most important Developer Tools changes in this release.

First, we would like to thank all 41 people who contributed patches to DevTools this release! Here is a list of all DevTools bugs resolved for Firefox 32.

Toolbox

We’ll start out the list with a couple of features that were requested on the new UserVoice feedback channel that we are trying out.

Node dimensions are now displayed in the box model infobar. Similar to how other tools work, you can easily refer to the dimensions of the highlighted node directly from the infobar. (development notes & UserVoice request)

Screenshot of node dimensions being shown in the infobar above the box model highlighter

The ‘pick an element from the page’ button is now closer to the inspector tab so it is quicker to jump between them. Protip: you can also use the Ctrl+Shift+C or Cmd+Opt+C keyboard shortcuts to do the same thing. (development notes & UserVoice request)

Screenshot of the new Inspect Element position on the left side of the toolbox

There is now a ‘full page screenshot’ command button. After enabling this button, just press it and a screenshot will appear in your downloads folder. (development notes)

Screenshot of taking a screenshot of the current page with DevTools

A demonstration of the screenshot can be seen in the animated gif below:

Animated gif of taking a screenshot of the current page with DevTools

New images are being used throughout the DevTools UI to support high pixel density displays (HiDPI), so the UI looks much sharper on these devices. Big thanks to our contributor Tim Nguyen for his hard work on these changes! (development notes)

Web Audio Editor

Joining the Shader Editor and Canvas Debugger, the Web Audio Editor is a new media tool that has landed in Firefox 32. After enabling it in the options panel, you can inspect the AudioContext graph and modify properties on AudioNodes. Stay tuned for another Hacks post very soon with more details.

Screenshot of the new web audio tool

Inspector

User agent styles can be shown in the Inspector. Since these default styles can interact with your page styles, it is handy to see them. This can be enabled from the options panel, and there is more documentation about this feature on MDN. (development notes & UserVoice request)

Screenshot of viewing user agent styles in the Inspector Panel

Animated gif of viewing user agent styles in the Inspector Panel

Hidden nodes are now displayed differently from visible nodes in the markup view. (development notes & UserVoice request)

Screenshot of hidden nodes being displayed differently in the Inspector panel

Web fonts are previewable within the font inspector tooltip. When hovering a font stack, you will see the currently applied font in the tooltip (including any web fonts). (development notes)

Screenshot of a web font being previewed in the Inspector panel

There is now a ‘Paste Outer HTML’ context menu entry for nodes in the markup view. (development notes & UserVoice request)

Scratchpad

There is now type-inference based code completion for JavaScript in Scratchpad. Open a list of suggestions at your current cursor position with Ctrl+Space and type information about the current symbol can be shown with Shift+Space. It is being powered by the excellent tern code-analysis engine. (development notes)

Screenshot of scratchpad showing an autocompletion list

Screenshot of scratchpad showing type information about a function

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, add/vote for ideas on UserVoice or get in touch with the team at @FirefoxDevTools on Twitter.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)