Editable box model, multiple selection, Sublime Text keys + much more – Firefox Developer Tools Episode 31

A new set of the 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 31 release in July. This release brings new tools, editor improvements, console and inspector features:

Editable box model

The Box Model tab in the Inspector is now editable for easy experimentation. Double-click any of the margin, border, or padding values to change its value for the currently selected element. Enter any valid CSS <length> value and use the Up/Down keys to increment or decrement the value by 1. Alt-Up increments by 0.1 and Shift-Up increments by 10. (development notes)

Editing the box model


New to the color picker in the Inspector is an Eyedropper tool that grabs the color from any pixel on the page. Select the current color by clicking or pressing Enter. Abort the operation by pressing Esc. Use the Up/Down keys to move by one pixel, and Shift-Up/Shift-Down to move by 10 pixels.

Eyedropper tool

You can also use the eyedropper directly to copy a color to the clipboard by accessing it from Web Developer menu, or the toolbar icon that’s enabled by going to the settings panel and checking Available Toolbox Buttons > Grab a color from the page. (development notes)

Console stack traces

console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made. (development notes)

Stack trace in console.error() printout

Styled console logs

On parity with other browser developer tools, you can now add style to console logging with the %c directive.
(development notes)

Using %c in console.log() to format output

Copy as cURL

Replay any network request in the Network Monitor from the comfort of your own terminal. Right-click a request and select the copy as cURL menu item to copy a cURL command to the clipboard, including arguments for headers and data. (development notes)

Copy as cURL in Network tool

Editor – multiple selection, Sublime Text keys

The source editor used in the developer tools has been upgraded to Codemirror 4. With that brings:

Multiple selection. Hold down Ctrl/Cmd while selecting to get multiple selections.
* Rectangle selection. Hold down Alt to select a column-aligned block of text.
* Undo selection. Undo the last selection action with Ctrl-U/Cmd-U and redo with Alt-U/Shift-Cmd-U.
* Sublime Text keybindings. To enable, go to about:config in the url bar and set devtools.editor.keymap to sublime.

Multiple selection in action:

animation of multiple selection in the editor

development notes

Canvas Debugger

Debug animation frames in WebGL and 2d canvas contexts with the newly-landed canvas debugger. The canvas debugger is an experimental feature that has to be enabled in the setting panel. Multiple canvases are not yet supported (bug) as well as animations generated with setInterval (bug). The canvas debugger is described in more in this blog post.
(development notes)

Add-on Debugger

If you develop Firefox add-ons using the Add-on SDK, there’s now a much easier way to debug your add-on’s JavaScript modules. See the blog post for more details. (development notes)

Firefox 31: Add-on Debugger from Jordan Santell on Vimeo.

Other features

  • Expand descendants. Hold Alt while double-clicking a node in the Inspector to expand all of its children and descendants. (development notes)
  • Persist network logs. Check Enable persistent logs in the settings panel to keep Network panel logs across reloads and navigations. (development notes)
  • JS warnings on by default. JavaScript warnings now show up in the Console by default. (development notes)
  • Scratchpad View menu. The Scratchpad tool now has a View menu with options for changing font size, hiding line numbers, wrapping text, and highlighting trailing spaces. (development notes)

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

Questions or suggestions? Comment here or shoot feedback to @FirefoxDevTools on Twitter or our brand new feedback channel for Firefox Developer Tools. 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)

3 Keys To Making Giant Leaps In Web Product Development – Interview with Robert Hoekman, Jr

According to an article written by Robert Hoekman, Jr., user experience specialist, author and principal at there’s nothing wrong with improving an existing design. But if you’re interested in UX design and designing a truly innovative product, listen and read on.

In this 10 minute interview, I talk with Robert about the walk-aways for Web professionals including his thoughts on how to “stop making problem-solving your end goal. Don’t just solve the problem; solve it in a way that leaves your customers astounded and your competition dumbfounded.” I also talk to him about his heartfelt experiences as a Web professional rock star and his new book entitled “Big Deal: On Being Famous to Almost No One” that is available as an ebook at

Technology designers shout the famous Einstein quote with the same frequency and urgency that a puppy relieves itself on your favorite rug: “Everything should be made as simple as possible, but not simpler.” But how frequently do they actually achieve this noble ambition? Almost never.

Of course, the problem with Einstein’s quote is not in the words used to craft it, but in its application. Tech designers, almost as a rule, and without even thinking about it, use what they know now as the starting line for their designs. Good design, after all, comes from incremental improvements based on old standards. But there’s a catch: On rare occasions, a disruptive design comes along that establishes a paradigm so far beyond the current that competitors spend the next year with their jaws on the floor, struggling to catch up, and that kind of design doesn’t come from incremental improvement; it comes from an outright assault on the status quo. This is no time to be shy, or tame. If you want a great design, you have to go Samuel Jackson on the thing. “Part of the problem is that the tech has outpaced our thinking.”

Smartphones, if you’ll recall, were downright awful until the iPhone set the new standard. Prior to that seismic event, the Motorola RAZR was the best-selling cell phone. Using the web on that thing was almost as confounding as making a phone call. The iPhone’s biggest innovation wasn’t in the aesthetic, the hardware, or even the introduction of the app model (though both certainly played a part). Its biggest innovation was its extreme degree of usability, plain and simple. The phone represented an advance in usability significant enough to be considered a re-imagining by customers and the media. The product was so much more usable by all accounts than others on the market that all Apple had to do to make it fly off the shelf was show a disembodied hand using it to do all the same things we struggled with on every other phone. It took the competition well over a year to produce something that even compared.

[As Hoekman points out, the real innovation starts at your 11th idea, not your first.]

Apple’s iOS devices may be among the most advanced pieces of engineering in history, but that isn’t their purpose. Their purpose is to be among the most usable pieces of personal tech in history. iOS is arguably the most approachable computing platform ever invented, and the extreme degree of usability it offers is the reason every parent in America right now has a story about a three-year-old who picked it up and intuited its use. And although Apple is certainly playing catch-up now on a variety of features (such as wireless delta updates, something other phones had for months prior to iOS 5), it set the bar, and that bar has made the company billions of dollars.

The lesson to be learned here: Good design may come from small steps, but important design comes from giant leaps.

So what’s stopping us?

Part of the problem is that the technology, which tech companies have more than proven can now handle impossible things, has outpaced our thinking. We’re still thinking in clicks when the tech is giving us gestures. We’re still tying our users to desktop computers when the tech enables us to go wherever our users go. What will push personal tech into the future now is figuring out how people will use all that computing power. Once and for all, we need to stop making technology usable and start making usable technology. The goal can no longer be merely to improve peoples’ experiences with technology; it must now be to use technology to change their experiences in life.

It’s the plainest message, the most explainable scope, the most intuitive usage model, the most appealing aesthetic, and the clearest purpose that compose a design of superior usability. It’s when these things are at their absolute finest and working in concert that a user’s experience is truly great. And it’s the person who becomes giddy in the face of such a challenge that stands the best shot at realizing a product, or even a feature, that matters as much.
“Design criteria help you envision a product that pushes the boundaries.”
If you’re such a person, here are a few mantras to consider tattooing on your forehead:
1. Stop designing solutions

Creating a Flickr knock-off to address users who want to organize photos is a solution. Creating Flickr in the first place? That wasn’t about solving a problem. That was about reinventing the act of photo-sharing to create something that had global reach and could be used by the masses.

Stop making problem-solving your end goal. Don’t just solve the problem; solve it in a way that leaves your customers astounded and your competition dumbfounded.

Achieving this means developing a strong product vision and making sure everyone knows it by heart, and writing up a set of design criteria–specific, actionable guidelines that describe the eventual experience of using the design–that help you envision a product that pushes the boundaries established by your competitors (and likely even yourself). Setting up those criteria isn’t about laying out what you know is possible, but laying out what you want. The proof will be in the execution, of course, but great execution starts here.

2. Start at number 11

Make incremental improvements and you get a design that’s incrementally better; make significant improvements and you get a design that’s important. Never accept the first idea you have–or even the tenth. Start with number 11. Whether done through back-of-the-napkin sketches, wireframes, blueprints, or engineering schematics, keep designing wilder ideas until you’ve reached so far into the abyss you’re not sure the thing is actually possible. Most of the time, it is–you just haven’t yet pushed your team far enough to discover they can accomplish it. Technology is no longer a serious limitation for most products. The only thing stopping you is your desire and willingness to push yourself and your team toward something more extreme than you previously thought possible.

3. Extreme usability is the goal

Usable products are those more convenient than the current alternatives (including your own), which is to say they’re more understandable, more approachable, more accessible, often (but certainly not always) cheaper, and frequently more beautiful. Touchscreens made using the web more convenient than on older smartphones. Contextual virtual keyboards made data entry (an email address, for example) more convenient than on a tactile keyboard. Video streaming made face-to-face meetings more convenient than driving to and from an office. These are not solutions; they’re the product of the pursuit of extreme convenience.

Regardless of whether you aim for advanced technology, make it a priority to aim for advanced usability. Your new end goal should be to design things more usable than anyone has ever imagined–than even you imagined. Don’t bother with anything less.

The best version of the same old thing isn’t the best version of anything. So forget what you know. Design like what you’re doing has never been done before and it’s up to you to become the person who sets the standard.

Look far enough and hard enough, and you just might.

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)