Network

Developer Edition 49: Network Request Stack Traces and more

This week marks the release of Firefox Developer Edition 49! This post covers some of the big changes that landed in this release.

Request stack traces in Network Monitor

The Network Monitor now has a new “Cause” column that shows how a given network request is initiated. The column shows the type of the request, includes a tooltip with the loading document, and, most importantly, if a JavaScript stack trace is available, you can see it in a popup bubble.

The JavaScript stack trace is most interesting for XHR requests, but is available also for any other request that is directly or indirectly initiated by a script, like when a script inserts a <script> or <img> element into the page.

This feature is useful if you want to figure out why and from where on the page a particular HTTP request is issued. (See bug 1134073.)

image00

Animation performance info in Inspector

You can use the Inspector panel to investigate details of your CSS and DOM animations. In Firefox 49, you can now get detailed performance information for your animations. If an animation property cannot be run on the compositor (i.e., cannot be hardware-accelerated), it is underlined in the expanded animation view, and an associated tooltip explains what’s going on.

In the example below, the transform and width properties cannot be accelerated at the same time. With this new tool in Inspector, you can now spot under-performing animations and learn what changes you need to make to accelerate them.

Read David Baron’s blog post if you want to learn more about how animations are optimized in Gecko. (See bug 1254408 for more detail.)

image05

Reorganized context menu in markup view

The Inspector has a context menu with many actions, which was becoming long and unwieldy. Contributor Moaaz Sidat reorganized the menu, dividing it into several sub-menus. (See bug 1211613.)

image03

Other improvements in the Inspector Panel

Firefox 49 adds support for #rrggbbaa and #rgba syntax for color values. The Inspector in developer tools now supports this syntax, too. (See bug 1271191.)

image07

In the CSS rule editor, autocomplete now displays more possible properties, in a scrollable list. As a result, it’s much easier to find the value that is relevant to you, or learn about new CSS properties that you were not familar with previously. (See bug 1260419.)

image06

In the markup view, self-closing tags like <br> are now displayed as <br></br> only if the doctype is XHTML. For normal HTML, the markup is now displayed in a more accurate and less verbose form. (See bug 820926.)

Links to MDN reference docs From Console JavaScript errors

When you see an unfamiliar error message in the Console, you no longer need to copy the message and search online for documentation. You can simply click on a direct link to the MDN reference page about the error that is a part of the message. Read a blog post by @floscholz and @mrrrgn to learn more about this feature and how you can contribute to make it better. (See bug 1179876.)

image01

New color scheme for syntax highlighting

We thought our syntax highlighting colors were looking a little dated, so we changed them up in both the light- and dark-themed versions of Developer Edition Firefox. The new colors are optimized for accessibility: they have better contrast and are easier to distinguish in all situations.

image04

image02

Accessibility improvements

We’ve made important accessibility improvements throughout this release. Most developer tools UI elements now have a clearly visible focus indicator, the UI is navigable using the keyboard, and accessibility semantics in the Inspector panel were improved. (See bugs 1242694, 1242715, and 1242851.).

Other notable changes

In addition to the improvements above, we have polished various areas throughout the developer tools, in particular:

  • The about:debugging page displays a warning when service workers are disabled, whether by private browsing mode or by a pref. (See bug 1266415.)
  • Step by step, the Storage Inspector is becoming more editable. In this release, we are adding a context menu option to delete an IndexedDB database. (See bug 1205123.)
  • Network Inspector now shows the exact number of bytes if the response size is smaller than 1KB. (See bug 1263945.)
  • Pressing the ‘h’ key in the Inspector panel, which is a shortcut to hide the selected element, now also grays out the element markup. (See bug 1127572.)

Thanks to everyone who has contributed to this Developer Edition release! Grab a copy of the latest Developer Edition now and let us know what you think.

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 40: Always active network monitoring, CSS rules filtering, and much more

Firefox 40 was just uplifted, and we have a lot of updates to share. This release took a major effort by Developer Tools contributors to address feedback we’ve heard directly from people using our tools. Grab a copy of the Developer Edition browser and check it out.

Experimental Multi-process Support: A Request

When you update to Developer Edition 40, you’ll be prompted to opt in to test multi-process Firefox. Please consider helping us test this new feature and providing feedback around any issues you see.

New in the Inspector

  • There is now a filter box in the CSS Rules view that lets you find rules that match a string. See the Filter Styles screencast or the screenshot below. (Development notes: 1120616 and 1157293.)

Inspector Filter Styles Screenshot

  • There is a new CSS documentation tooltip for CSS properties. Right click on any property in the CSS Rules view and select “Show MDN Docs” to see more information about that property. (Development notes.)

MDN Tooltip In Inspector Screenshot

  • Inspector search now includes results from iframes and also includes class / id results without the CSS prefix. (Development notes: 873443 and 1149346.)
  • There is a new CSS Filter Editor Tooltip added by Mahdi Dibaiee. Check out the CSS Filter Editor Tooltip screencast for a demo, or try it on the filter demos page in Developer Edition. (development notes)
  • The Animation Inspector has had some major updates. It now shows subtree animations, playback rate can be controlled, and it previews and highlights animated DOM nodes. (Development notes: 1155651, 1155653, and 1144615.)

There are too many changes to list in this post, but here are a few more interesting updates you may come across in the Inspector:

  • The Box Model view has legends for the regions and tooltips to show which CSS rule invoked the computed value. (Development notes: 1141571 and 1151956.)
  • shift+clicking a color swatch switches between color unit formats in place. (Development notes.)
  • New Scroll Into View, Open Link in New Tab, Copy Link, Open In Style Editor, and Open in Debugger context menu items in the Markup View. (Development notes: 901250, 921102, and 1158822.)

Network Monitor News

Cached network requests in Network Monitor Screenshot

Here’s a selection of other changes and improvements in this release:

  • New Copy Response, Copy URL parameters, and Copy Request/Response Headers context menu items on each request. (Development notes: 955933, 1150717, and 1150715.)
  • Search box to filter requests. (Development notes.)
  • IP address included in Domain tooltip for network monitor. (Development notes.)
  • Added access keys to the request context menu. (Development notes.)

Web Console

  • New console method: console.dirxml(). (Development notes.)
  • New filter options in the web console to show console messages from workers. (Development notes.)
  • Quotes in strings are no longer added if logged via console.log. Thanks to new contributor Dmitry Sagalovskiy for adding this feature! (Development notes.)

Debugger

General

Special thanks to all the people who contributed patches to Firefox Developer Tools this release! Here is a list of all the DevTools bugs resolved for Firefox 40. Kudos to the many contributors.

Do you have feedback, bug reports, feature requests, or questions? As always, you can comment here, get in touch with the team at @FirefoxDevTools, or share your constructive feedback and feature requests on our Firefox Dev Tools feedback channel.

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)

The Mozilla Developer Network has a New Face

Last summer the Mozilla Developer Network (MDN) underwent a massive platform change, moving from a hosted third-party solution to our own custom Django application code-named Kuma. That move laid the ground work for our latest major MDN upgrade: a complete front-end redesign, included many new features as well as usability and accessibility enhancements. Let me provide you with a quick overview of what you can expect to see on the new MDN and what features we’re cooking up for the future!

New MDN Features

Increased Commitment to Search

The majority of MDN users are looking to find documentation the moment they land on the MDN homepage, so we’ve placed search front and center:

We’ve also added search filters to the mix, allowing users to narrow down search results to their specific needs:

From a technical perspective, we’ve moved to Elasticsearch for search, allowing us to continue making indexing and filtering improvements, as well as add new search features at will. We anticipate fine-tuning search as we receive feedback so we’ll continue the push to get you to better documentation faster.

Ease in Navigation

Getting from document to document was a pain point in the previous design, so we’ve fixed that in two ways. The first was creating Content Zones, a method for creating navigation for a given topic. We’ve started with the most prominent parts of MDN, including App Center, Firefox, Firefox OS, Firefox Marketplace, Add-ons, and Persona:

Content Zones

MDN’s new Content Zones provide a complete collection of documentation about a given topic, encompassing the very basics of a topic to API details and advanced techniques. We’ll be kicking off with the following zones:

Firefox OS

Highlights of the Firefox OS zone include:

  • A detailed Platform Guide
  • Build and Install details
  • Hacking Firefox OS
  • App Design & Development
Firefox Marketplace

Highlights of this zone include:

  • App submission and review
  • App publishing and monetization
  • Marketplace API information
App Center

Highlights of the App Center zone include:

  • Quickstart Guide
  • Design and Build tips
  • App publishing guidelines
  • API references
Persona

Highlights of the Persona zone include:

  • Guide to using Persona on your site
  • Becoming an identify provider
  • Details on the Persona project
Firefox

Highlights of the Firefox zone include:

  • A complete Firefox Add-on overview
  • Information on Firefox internals
  • Detailed instructions for building Firefox and contributing
Add-ons

Highlights of the Add-ons zone include:

  • XUL extension information
  • Best practice tips
  • Theming
  • Add-on publishing guidelines

“See Also” Links

We’ve also implemented “See Also” links which may appear in any wiki page, linking to documents which may be relevant based on the document you’re currently viewing.

Both the zone subnavigation and “See Also” link sidebar widgets are built from basic link lists in the wiki document, so adding links and shuffling navigation is easy for anyone looking to contribute to MDN. These link lists can also be built using MDN’s macro language, Kumascript, and our writing team has done a great job automating “See Also” links so that contributors can save on the manual labor of hunting down other relevant documents.

Top level navigation

In the top level navigation, you will have access to five distinct areas:

  • The above-mentioned Content Zones
  • Web Platform, including direct links to more information on technologies, references and guides
  • Developer Program – To be able to help developers and establish long-term relationships and channels, we have created the Mozilla Developer Program. We have a lot of plans and ideas for iteratively expanding the Program, and we want you involved as we do so! So, sign up! You will get a membership, be able to subscribe to our newsletter and get access to features over time as we roll them out.
  • Tools – more information on the Firefox Developer Tools and their features
  • Demos, being a direct link to the Demo Studio

Enhanced Kumascript Macro Features

Kumascript, MDN’s dynamic macro language, was also outfitted with the ability to read external RSS feeds. At present MDN is using the feed reader capability to pull forum posts from StackOverflow and blog posts from the Mozilla Hacks blog. Check out the MDN:Common macro to view the fetchJSONResource and fetchHTTPResource methods which aid in displaying feed content in wiki documents.

Future Features

This visual redesign is just the beginning of our push to make MDN more dynamic and usable. The MDN development and UX teams have plenty more coming in 2014. Here are a few peeks into what you can expect to see!

Dynamic Search Filtering

To improve the efficiency in user search, we plan to implement hashtag-prefixed text filtering which may be added in the initial search — doing so will prevent the need for additional filtering when the user lands on the search results page.

Holly Habstritt Gaal has detailed this query system in detail on her blog. Check out her blog post to see implementation details.

Docs Navigator

So you’ve completed a search and you click the first link you thought would be applicable, but you want to move onward and view other results. Instead of backing out to the search results page again, the wiki page (if the user came from search) will display a doc navigator to move to the next or previous result, or you can view the entire list of results from your original search:

image

Just another handy way of finding what you need faster!

Demo Studio and Dev Derby Redesign

A redesign to the MDN Demo Studio and Dev Derby will be coming shortly. We have an excellent design in review and we hope to roll that out in early 2014.

If you have a suggestion or find any bugs within the new MDN, please let us know.

Look forward to more from MDN in 2014 and beyond. The MDN platform promises to expand and improve the way we view, write, and experience documentation and web technologies!

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)

Network Monitor, now in Firefox Beta

The Firefox Developer Tools team is particularly proud announce that Firefox 23 (in Firefox Beta, to be released today) ships with an initial but very functional Network Monitor tool that not only provides similar functionality to other tool sets, but in many improves on them. This important step is the result of lots of hard work from the entire team, but in particular Victor Porof and Mihai Sucan.

Let’s get started

To give you the best idea of how the network monitor works, here’s a series of steps to follow:

  1. Download, install and run Firefox 23 beta if you haven’t already (or Firefox Aurora or Firefox Nightly – more on Firefox and the release channels).
  2. Open the Network Monitor tool:
    • from the menu: Tools => Web Developer => Network
    • from the keyboard: Ctrl + Alt + Q (Windows/Linux) or Cmd + Alt + Q (Mac OS X)
  3. Load an interesting site.

As Firefox loads the page you’ll see each individual request get added as a row, much as you would expect from other tools. In particular it is now very easy to visualize not just how quickly parts of the page load and in what order, but also where problems are: missing assets, slow web servers, buggy apis.

As you get used to using the Network Monitor, you’ll also notice that you don’t need to necessarily hit refresh on a page that is already loaded, once you open the network tool any subsequent requests that happen will be logged. For example, if you’re interested in xhr requests made by an app, just open the monitor and start clicking buttons – you should see any api calls logged as normal without needing to reload.

Status at a glance

One thing you should notice right away about the way the Network tool displays a page load is that we’ve taken care to provide both information and design cues to show you what is happening at a glance as the page loads:

We’ve tried to create a clean UI that delivers key aspects of how an entire page loads without creating too much visual clutter:

  • An error such as a 404 are colored dark red to make them stand out visually from the green successful or yellow cached requests.
  • The url is parsed out and only the file name and domain are shown.
  • By default the load is sorted in chronological order, but you can also sort by any of the top columns, for example by domain or filename.
  • You can easily see the type of request, whether it be html content, an image or an API request.
  • You can click on the column headers to sort requests by method, file name, domain, type or size.

It’s all in the details

Once all the page’s assets have been loaded, clicking on a single request opens up the sidebar view which provides detailed information about that request, broken down into panels that display different aspects of a given request: Headers, Cookies, Parameters, Response and Timings. Similar to how the Inspector tool works, this panel is responsive and will neatly pop down below the request list if you’ve docked the tools to the right side:

A quick tour

The Headers panel is particularly useful for debugging asset caching problems, and this panel provides parsed lists for both the request and response headers that also supports filtering based on either name or value:

The Timings panel gives you a detailed, visual breakdown of where time was spent for the selected request. Is it DNS? Is it the server itself?

If you’re debugging API requests or form posts, you’ll really like how we’ve parsed out the url parameters in the Params panel:

Are you using a lot of API calls to improve the responsiveness of your app? JSON responses are parsed and displayed as a navigable object in the Response panel to make it easy to check on the data coming back from the server. You can filter the data based on JSON values as well.

Next Steps

It’s great to deliver the Network Monitor to a much wider set of developers in Firefox 23 Beta but we haven’t stopped adding new features in the meantime. Firefox 24 ( now in the Aurora channel ) features several notable improvements that have landed in the last 6 weeks or so:

  • You can now filter requests based on the request ‘type’, including XHR, images, html.
  • POST request parameters are supported in the Params panel.
  • You can browse the list of requests via the Up/Down arrow keys.
  • Many more bug fixes and refinements!

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)

Ten Things Developers should know about the Mozilla Developer Network (MDN)

The Mozilla Developer Network (MDN) is one of the most popular resources for developers on the Web. Designed by developers for developers, MDN helps support Mozilla’s mission to promote openness and innovation on the Web.

As an open, community-driven wiki, MDN provides Web developers, designers, application developers, and extension and theme writers with access to the best documentation, tutorials and developer tools available. Anyone can add and edit content to make it even better. It’s used by developers building resources for a better Web, regardless of brand, browser or platform.

To give you a quick overview of what developers can get out of MDN we’ve put together this Top 10 list of things you should know about MDN and some tips on how to get involved.

Enjoy!

  1. One of the most popular resources for developers on the Web with over 4.5 million page views and 2 million visitors per month.

  2. One of the richest resources on the Web for documentation:

    49,748 documents and climbing
    9,185 contributors have made 272,134 edits to date

  3. An active developer community in the MDN IRC channels including: #mdn-dev, #devmo and #mdn.

  4. The only developer site to be localized in 15 languages. MDN offers translations in 15 languages for HTML docs, 13 for CSS, and 11 for JavaScript. All of these translations are created by a global community of volunteer localizers, who prioritize translation of topics based on local needs and interests. See where localization help is needed.

  5. The best destination for JavaScript reference documentation anywhere.

    “MDN is hands down the best resource for finding quality JavaScript documentation. It’s well organized allowing developers to quickly find the information they need without poring through multiple specs,” – jQuery core committers

  6. A great resource for developers looking for a wide variety of freshly updated content. MDN is maintained by the community of developers and technical writers and hosts literally thousands of documents on a wide variety of subjects such as: HTML5, JavaScript, CSS, Node.JS to name just a few.

    For Mobile Web developers, MDN provides documentation such as: How to build HTML5 mobile apps or build a mobile add-on or learn about location aware apps.

  7. Anyone can edit or add documents to the wiki, you just need to create an account and start. Don’t worry about asking for permission; don’t worry about making mistakes. On the other hand, if you are going to be working on the site it does help to get to know the MDN community – we’re friendly and here to help!

  8. Rich with community-submitted demos; over 500 and climbing. MDN introduced “Demo Studio” in 2011 – for web developers to share and show off their code.

  9. Each month, the Dev Derby provides a different challenge to developers – from offline apps to “no JavaScript” (the most popular Derby topic in 2012, with 71 entries). A panel of distinguished judges choose the prize-winning entries.

  10. A new HTML wiki was launched in August of 2012 – meaning developers don’t have to learn a new markup language to edit and write docs. The platform is open-source and based on Django, so developers can add new features and functionality to the wiki from Github. Also a new HTML5 WordPress plugin was launched that lets developers hotlink words on their blog to MDN.

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)