Episode

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)

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)

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

Eyedropper

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)

Box model highlighter, Web Console improvements, Firefox OS HUD + more – Firefox Developer Tools Episode 30

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

Inspector

One of our most requested features has been to highlight box model regions of elements on the page. We are happy to report that this feature has landed in Firefox 30. One of the great things is that the colors of the box model highlighter match the box model diagram found in the right pane of the inspector more clearly than before.

Check out the inspector documentation to read more about the new functionality, or just see the screenshot and short video below:

Inspector box model highlighter

There is a new font family tooltip to the CSS rule view. Hover over a font-family value to see an inline preview of the font. (development notes)

Inspector font family preview

Web Console

There are some big improvements in the web console to help view and navigate output.

Sample console output

Highlight and jump to nodes from console

Running the cd() command in the console switches the scope between iframes. Read more in the cd command documentation. (development notes)

Console cd() command

You can read more from Mihai about the ongoing changes to the web console. He has also been documenting the web console API for extension authors.

Firefox OS

The network monitor is now working with Firefox OS. (development notes)

There is now memory tracking (development notes) and jank tracking (development notes) in the Firefox OS Developer HUD. You can read much more about jank (aka “event loop lag”) in Paul’s Firefox OS: tracking reflows and event loop lags.

Firefox OS Developer HUD

Network Monitor

The Network Monitor has a new look to go along with some new features:

  • The design of the network timeline has been updated, which has actually improved scroll performance on the panel. (development notes)
  • Hovering over a request with an image response now shows a popup with the image. (development notes)
  • Network requests with an image response now display a thumbnail near the file name. (development notes)

Network Monitor Timeline UI

Network requests with a JSON-like response will show an object preview, even if the response type is plain text. (development notes)

JSON Response in Network Monitor

Toolbox

There is new behavior for console shortcut key (cmd+alt+k or ctrl+shift+k). It now focuses the input line in web console at all times, opening the toolbox if necessary but never closing it. There are more details about this change on robcee’s blog. (development notes)

To save some space on the top toolbar, there are now options to hide command buttons, like Scratchpad. The only buttons enabled by default now are Inspect Element, Split Console, and Responsive Mode. More information about this change on the devtools mailing list. (development notes). To enable Scratchpad, Paint Flashing, or Tilt, just click on the checkbox in the options panel.

Enabling Command Buttons on Toolbar

We would like to give a special thanks to all 46 people who contributed patches to DevTools this release! Here is a list of all DevTools bugs resolved for Firefox 30.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here or get in touch with the team at @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)

CSS source map support, network performance analysis & more – Firefox Developer Tools Episode 29

Firefox 29 was just uplifted to the Aurora release channel. This means that it is time to report some of the major changes that you can expect to see inside of the Developer Tools for this release.

Better Looking Tools

In addition to new features, we have been updating the look and feel of our dark and light themes. The light theme has been completely overhauled, and both themes feature a more consistent design throughout the toolbox. Your current theme can be changed from the Toolbox settings. (development notes)

Network Monitor

The Network Monitor now shows you how long it takes the browser to load different parts of your page. This will help measure the network performance of applications, both on first-run and with a primed cache. (development notes)

To open the performance analysis tool, click the stopwatch icon in the network panel. For more information, watch the screencast below or read more on MDN.

You can now copy an image request as a Data URI. Just right click on the image request, select the item from the context menu, and the Data URI will be on your clipboard. (development notes)

Inspector

We’ve updated the inspector highlighter behavior to bring the highlighting functionality more in line with other tools. (development notes)

CSS transform preview tooltips have been added to the CSS rule view. Now, if you hover over a CSS transform, you will get a tooltip with a visualization of the transform. Grab a download of Firefox Nightly or Aurora and try it out on some live CSS transfom examples. (development notes)

CSS rule view now supports pasting multiple CSS declarations at once, like background: #ccc; color: red. (development notes).

Just like in the network panel, you can now copy <img> elements as Data URIs. (development notes)

Style Editor

CSS source map support has been added to the Style Editor. (development notes), and CSS properties and values will now be autocompleted in the Style Editor. (development notes)

Keep an eye out for a post on Hacks in the very near future with more information about how to use the source maps feature.

Debugger

We have added a classic call stack list in the debugger next to the list of sources. (development notes)

There is a new ‘enable/disable all breakpoints’ button in the debugger. This will toggle the active state of all existing breakpoints at once, to allow switching between normal usage and debugging quickly. (development notes)

You can now highlight and inspect DOM nodes from the debugger. If you hover a DOM node in the variables listing it will be highlighted on the page, and if you click on the inspect icon the node will be opened in the inspector tab. This feature is also available in the console output. (development notes)

Pretty printing now preserves code comments. We are using the open source pretty-fast pretty printer, so it should be pretty fast. If it isn’t, be sure to let us know. (development notes)

Console

console.trace improvements. The call stack is shown inline with other output, and includes links to access each line in the debugger. (development notes)

We’ve also improved console object output to show additional information based on the object type. (development notes)

Code Editor

The code editor can be seen throughout the tools in places like Scratchpad, Style Editor, and Debugger. Here are some of the updates you will see in this release:

  • Code folding in the editor. (development notes)
  • Emacs and VIM keybindings are now available in the code editor. To enable them, open about:config, and set “devtools.editor.keymap” to either “vim” or “emacs”, then restart DevTools. (development notes)
  • ES6 syntax highlighting support (development notes)

Big thanks to all of our DevTools contributors this release (43 people)! Here is a list of all DevTools bugs resolved for Firefox 29.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here or get in touch with the team at @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)

Split console, pretty-print minified JS and more – Firefox Developer Tools Episode 28

Just in time for the holidays, the Firefox Developer Tools teams has some excellent new surprises for you to enjoy as you hack on holiday projects! It’s a pretty long list, so let’s get started.

App Manager

The App Manager continues to be a priority for the Devtools team and with Firefox 28, in addition to many minor fixes and improvements the team has added two new major features to assist in mobile development. These two features consist of an additional manifest editor and an embedded toolbox.

The Manifest Editor allows a developer to edit their app manifest directly. Using this editor you can add, edit, or delete fields in your app’s manifest.webapp and save them back to disk. This feature provides the developer an integrated experience, as the user never has to leave the tools while debugging and improving an application.

Also new to the App Manager is the embedded toolbox. Now when you debug your app (either using the Simulator or on device) the toolbox will be opened in the App Manager in a separate vertical ‘tab’ that is easily distinguished by the app’s icon:

Web Console

The biggest change in the Web Console is a feature we call ‘split console’; the web console can now be summoned from any other tool. Using split console mode is easy – if you’re working with any other tool and need access to the console, simply hit the Escape key or click on the button to toggle the split console, as you can see in this short screencast:

This isn’t the only improvement to the console though. In addition to split console we’ve also made the following changes:

  • CSS warnings are off by default – CSS warnings can often add hundreds of messages to the console as a page loads.
  • The console will now offer autocomplete suggestions for the current scope the debugger is in.
  • Message timestamps can be toggled on/off (the default is off)
  • console.exception() and console.assert() have been added to the console api.
  • We added a dark theme for the console

Debugger

In the debugger we’ve added two key features that developers have been asking for. First off we’ve added the ability to pretty-print minified JS files:

This feature is particularly handy if you minify your JavaScript or need to step through a minified library served from a remote site – just click on the minification button (picture above) to get a much more nicely formatted version of the file.

In addition to this we’ve added a feature to the debugger that allows you to inspect the value of a variable while debugging. For any variable, simply hover over it or click on it to bring up a pop-up that displays the current value:

The pop-up allows you to inspect not only simple types like the boolean picture above, but also objects and DOM nodes:

Inspector

Following along from the addition of various tooltips to the Inspector in Firefox 27, we’ve added some additional features in the inspector:

  • A Color picker tooltip in the rule view
  • A CSS transform preview tooltip in the rule and computed views
  • We updated style the style of tooltips to better match the dark and light themes
  • The display timeout for tooltips was tuned based on your feedback

Here’s a screenshot to give you an idea what the color-picker tooltip looks like:

Wrapping up

That’s a huge list, but there were a couple of additional changes I’d like to call out as well:

  • The Network Monitor now has a clear button, which should be of particular use to developers creating apps that make heavy use of web APIs:

  • As a bonus for Add-on or Platform hackers, we’ve expanded the functionality of the Browser Debugger and re-named it the Browser Toolbox. When you open the toolbox you’ll see a full range of tools including not only the debugger but also the Console, Inspector, Style Editor, Profiler, Network Monitor and Scratchpad:

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)

Firefox Developer Tools: Episode 27 – Edit as HTML, Codemirror & more

Firefox 27 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Below are just some of the new features, you can also take a look at all bugs resolved in DevTools for this release).

JS Debugger: Break on DOM Events

You can now automatically break on a variety of DOM events, without needing to manually set a breakpoint. To do this, click on the “Expand Panes” button on the top right of the debugger panel (right next to the search box). Then flip over to the events tab. Click on an event name to automatically pause the next time it happens. This will only show events that currently have listeners bound from your code. If you click on one of the headings, like “Mouse” or “Keyboard”, then all of the relevant events will be selected.

Inspector improvements

We’ve listened to feedback from web developers and made a number of enhancements to the Inspector:

Edit as HTML

Now in the inspector, you can right click on an element and open up an editor that allows you to set the outerHTML on an element.

Select default color format

You no have an option to select the default color format in the option panel:

Color swatch previews

The Developer Tools now offer color swatch previews that show up in the rule view:

Image previews for background image urls

Highly requested, we now offer image previews for background image URLs:

In addition to above improvements, Mutated DOM elements are now highlighted in the Inspector.

Keep an eye out for more tooltips coming soon, and feel free to chime in if you have any others you’d like to see!

Codemirror

Codemirror is a popular HTML5-based code editor component used on web sites. It is customizable and theme-able. The Firefox Devtools now use CodeMirror in various places: Style editor, Debugger, Inspector (Edit as HTML) and Scratchpad.

From the Option panel, the user can select which theme to use (dark or light).

WebConsole: Reflow Logging

When the layout is invalidated (CSS or DOM changes), gecko needs to re-compute the position of some nodes. This computation doesn’t happen immediatly. It’s triggered for various reasons. For example, if you do “node.clientTop”, gecko needs to do this computation. This computation is called a “reflow”. Reflows are expensive. Avoiding reflows is important for responsiveness.

To enable reflow logging, check the “Log” option under the “CSS” menu in the Console tab. Now, everytime a reflow happens, a log will be printed with the name of the JS function that triggered this reflow (if caused by JS).

That’s all for this time. Hope you like the new improvements!

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 Features in the Firefox Developer Tools: Episode 26

Firefox 26 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Here’s a summary of some of the most exciting new features.

Inspector: pseudo element support

To get more flexibility in the design of an element without using additional nodes, it’s very common to use CSS pseudo elements, eg (`:before/:after{content:””}`). In the Inspector it’s now possible to see the rules applied to pseudo elements.

Debugger: break on uncaught exceptions

It’s now possible to pause the debugger on uncaught exceptions. It makes debugging unexpected errors easier and prevents the developer from having to step over a barrage of exceptions which were handled by Try/Catch blocks.

Web Console: Better text selection

It used to be hard to select text from the web console. Fixing this bug needed a whole rewrite of the console output area. This will make copying/pasting logs much simpler and provides the ground-work for improved console output features landing soon.

Global UI improvements

It is now possible to zoom in and zoom out for the UI of all the developer tools. Do you prefer bigger fonts? Hit Ctrl +. Smaller? Ctrl -. (Cmd in Mac OS X).

The DOM view in the Inspector has also been improved. The selection is more obvious and it’s easier to expand nodes and very long attributes are now cropped.

Keyboard shortcuts improvements: It’s now easier to control the tools from the keyboard. We’ve created many new keyboard shortcuts and tried to be compatible with other browsers. All the available keyboard shortcuts for the Developer Tools are listed on MDN.

As an added bonus, we also moved the URL preview (the bar that pops out when hovering a link with the mouse) above the toolbox. It doesn’t cover the Web Console input or any other tool anymore.

Responsive Design View

The Responsive Design View comes with 3 new improvements:

  • Touch Event simulation (mouse events are translated to touch events)
  • Quick screenshot
  • Precise resize. Press Ctrl while moving the mouse for a more accurate resize

When can I use these features?

All of these features and more are available in the Firefox Aurora release channel. In another 12 weeks, these features will roll over into Firefox stable.

Have some feedback about devtools? Ping @FirefoxDevTools on Twitter, or swing by #devtools on irc.mozilla.org.

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 Features of Firefox Developer Tools: Episode 25

Firefox 25 was just uplifted to the Aurora release channel which means we are back to report about new features in Firefox Developer Tools.

Here’s a summary of some of the most exciting new features, and to get the whole picture you can check the complete list of resolved bugzilla tickets.

Black box libraries in the Debugger

In modern web development, we often rely on libraries like JQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. To alleviate this problem, we introduced black boxing: a feature where you can tell the debugger to ignore the details of selected sources.

To black box a source, you can either mark them one at a time by disabling the little eyeball next to it in the sources list:
eyeball

Or you can black box many sources at once by bringing up the developer toolbar with Shift+F2 and using the dbg blackbox command:

dbg blackbox --glob *-min.js[source]

When a source is black boxed:

  • Any breakpoints it may have are disabled.
  • When “pause on exceptions” is enabled, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.
  • The debugger will skip through black boxed sources when stepping.

To see this in action and learn more about the details, check out the black boxing screencast on YouTube.

Replay and edit requests in the Network Monitor

You can now debug a network request by modifying headers before resending it. Right-click on an existing request and select the “resend” context menu item:

resend request

Now you can tweak the HTTP method, URL, headers, and request body before sending the request off again:

tweak

CSS Autocompletion in the inspector

Writing CSS in the inspector is now much easier as we enabled autocompletion of CSS properties and values.

autocomplete

What’s more, it even works on inline style attributes

inline

Aside: this feature was implemented by contributors Girish Sharma and Mina Almasry. If you want to take your tools into your own hands too, check out our wiki page on how to get involved with developer tools.

Execute JS in the current paused frame

One request we’ve heard repeatedly is the ability to execute JS from the webconsole in the scope of the current paused frame in the debugger rather than the global scope. This is now possible. Using the webconsole to execute JS in the current frame can make it much easier to debug your apps.

Edit: The webconsole has actually been executing in the current frame since Firefox 23, in Firefox 25 the scratchpad will execute in the current frame as well.

Import and export profiled data in the Profiler

Hacking on a shared project and think you found a performance regression in some bit of code owned by one of your friends? Don’t just file a github issue with steps to reproduce the slowness, export and attach a profile of the code that shows exactly how much slowness there is, and where it occurs. Your friend will thank you when he or she is trying to reproduce and debug the regression. Click the “import” button next to the start profiling button to load a profile from disk, and hit “save” on an existing profile to export it.

profileimport

When can I use these features?

All of these features and more are available in the Aurora release channel. In another 12 weeks, these features will roll over into Firefox stable.

Have some feedback about devtools? Ping @FirefoxDevTools on Twitter, or swing by #devtools on irc.mozilla.org.

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 Features in Firefox Developer Tools: Episode 24

Releases have recently rolled, and there are a slew of new features coming to the developer tools in Firefox 24. Firefox 24 is currently in our alpha channel Firefox Aurora, and will hit the main release channel on September 17th, 2013.

A little alitteration leads to lots of cool features coming this release. I’m only touching on a few highlights here; to see a comprehensive list of all the new changes to developer tools, check out the full list of bugs fixed since last release.

Console Clean Ups

An oft-requested feature, the console will now clear all of the existing logs when you refresh the page. If you need logs to persist across reloads, don’t worry: this behavior is toggle-able in the options panel. Here’s to less clutter!

Users were also reporting that the “clear” button was confusing. It wasn’t obvious whether it was clearing the logs or the the filter text because the button as adjacent to the filtering search box. We moved it to so that this won’t happen anymore!

New position of the clear button

Source Map Sourcery

Source maps are now enabled by default. If you need to debug the JavaScript generated by your tool or compiler rather than the original source, you can still toggle them on and off in the debugger options.

Furthermore, because of issues with Internet Explorer, the source map specification was updated so that you link a source map to its script with //#
sourceMappingURL=...
rather than the deprecated //@ sourceMappingURL=.... We will still respect the old style, but will warn you that it is deprecated. Here is a summary of the why this change was made.

Finally, we will load the text of a source mapped source from its source map’s sourcesContent property, if it exists. This property was added to source maps to enable dynamic source map creation, and to bundle your sources into the source map so that you don’t need to juggle extra files on your server.

Debugger Developments

Frozen, sealed, and non-extensible objects are now visually distinguished in the debugger’s variables view.

Frozen, sealed, and non-extensible objects

Also, when stepping out of a stack frame in the debugger, you will now see either the return value or the exception thrown (depending on why you are exiting the frame) in the variables view labeled <return> and <exception> respectively.

A stack frame's return value

A stack frame's exception

JavaScript-Free Fun

Need to see how your web page gracefully degrades when JavaScript is disabled? Head on over to the options panel and you can quickly disable JavaScript for the current tab. This persists until either you close the tab or the developer tools.

Network Monitor Magic

You can now filter by types of requests in the network monitor. Want to see only requests for stylesheets? Or maybe only XHRs? We’ve got your back. On top of that, there are now total number of requests, file sizes, and response times listed in the bottom that update with you filters, so you can see just how many KBs (or even MBs) of images you are requesting on every page load.

Filtering only images

Profiler Pleasantries

You can now control the profiler from your web app’s code base via console.profile() to start a new profile, and console.profileEnd() to end it. No more trimming your sample range, start and stop profiling in the exact places you want to from your code!

That’s it for this episode. Keep on hacking the free web!

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)