Category Archives: Windows Blog

Windows Blog

Announcing media capture functionality in Microsoft Edge

In the latest Windows 10 preview release, we added support for media capture APIs in Microsoft Edge for the first time. This feature is based on the Media Capture and Streams specification, developed jointly at the W3C by the Web Real-Time Communications Working Group and the Device APIs Working Group. It is known by some web developers simply as getUserMedia, which is the main interface that allows webpages to access media capture devices such as webcams and microphones. This feature can be toggled under the experimental features interface in Microsoft Edge, which can be found by navigating to about:flags.  To allow for early feedback from the web development community, we’ve set this feature to be “on” by default in the latest Windows Insider preview.

Media capture functionality in Microsoft Edge

The media capture functionality in Microsoft Edge is implemented based on the W3C Media Capture and Streams specification that recently reached the Working Group “Last Call” status. We are very excited that major websites such as Facebook share the same vision and have adopted standards-based interfaces to enable the best user experiences across browsers.

In this blog, we will share insights on some of our implementation decisions, and share details on what we have implemented today and what we are still working on for a future release. We will also suggest some best practices when using the media capture APIs.

A brief summary of the Media Capture and Streams APIs

The getUserMedia() method is a good starting point to understand the Media Capture APIs. The getUserMedia() call takes MediaStreamConstraints as an input argument, which defines the preferences and/or requirements for capture devices and captured media streams, such as camera facingMode, video resolution, and microphone volume. Through MediaStreamConstraints, you can also pick the specific captured device using its deviceId, which can be derived from the enumerateDevices() method. Once the user grants permission, the getUserMedia() call will return a promise with a MediaSteam object if the specific MediaStreamConstraints can be met.

The MediaStream object will have one or both of the following: one MediaStreamTrack for the captured video stream from a webcam, and one MediaStreamTrack for the captured audio stream from a microphone. The MediaStream object can be rendered on multiple rendering targets, for example, by setting it on the srcObject attribute of MediaElement (e.g. video or audio tags), or the source node of a Web Audio graph. The MediaStreamTracks can also be used by the ORTC API (which we are in the process of implementing) to enable real-time communications.

User permissions

While media capture functionality can enable a lot of exciting user and business scenarios, it also introduces security and privacy concerns. Therefore, user consent on streaming audio and video from the capture devices is a critical part of the feature. The W3C spec recommends some best practices and meanwhile also leaves some flexibility to each browser’s implementation. In order to balance security and privacy concerns and user experiences, the implementation in Microsoft Edge does the following:

  • If the webpage is from an HTTP origin, the user will be prompted for permission when a capture device is accessed through the getUserMedia() call. We will allow permission to persist for the specific capture device type until all capture devices of the specific type are released by the webpage.
  • For webpages from an HTTPS origin, when a user grants permission for a webpage to access a capture device, the permission will persist for the specific capture device type. If the user navigates away to another page, all permissions will be dismissed. Microsoft Edge does not store any permanent permissions for a page or domain.
  • When a webpage calls getUserMedia() from an iframe, we will manage the capture device permission separately based on its own URL. This provides protection to the user in cases where the iframe is from a different domain than its parent webpage.
Screenshot showing the permission prompt in Microsoft Edge in the Windows Insider Preview

Screenshot showing the permission prompt in Microsoft Edge in the Windows Insider Preview

Once a user grants permission for a webpage to access a media capture device, it is important to help the user to track which browser tab is actively using the capture device, especially when the user has navigated to a different tab. Microsoft Edge will use a “recording” badge in the tab title to indicate tabs streaming audio and/or video data from the capture devices. Note that this feature is not implemented in the current release.

Capture device selection and settings

The getUserMedia() interface allows a lot of flexibility in capture device selection and settings through MediaStreamConstraints. The W3C spec has very detailed descriptions on the Constrainable Pattern and corresponding decision process. We’d like to share more of our implementation details, especially regarding default expectations.

The following table summarizes the default setting we have internally on some of the constraints.

Constraints Default values *
width 640
height 360
aspectRatio 1.7777777778 (16:9)
frameRate 30
volume 1.0
sampleRate device default
sampleSize device default (16 or 32-bit)

When setting the constraints, please keep in mind that capture devices tend to have wide range of different capabilities. Unless your target scenario has any must-have requirement, you should allow flexibility as much as possible for the browser to make device selection and setting decisions for you. Our capture pipeline is currently limited to device default audio sample size and sample rate and doesn’t currently support setting a different sampleSize or sampleRate. Additionally,our capture pipeline currently relies on the global setting in the Windows audio device manager to determine the audio sampleRate of specific microphone devices.

If you plan to use the media capture streams jointly with ORTC in real-time communications, we suggest not setting the “volume” constraint. The Automatic Gain Control logic in the ORTC component will be invoked to handle the volume levels dynamically. The volume level can also be adjusted by Windows users through the audio device manager tool.

We don’t currently have any default or preferred facingMode mode for webcams. Instead, we encourage you to set the facingMode for your specific scenarios. Where not specified, we will try to pair up the webcam with the microphone in the device selection logic.

There is a known issue in the video capture pipeline which doesn’t allow setting webcam resolution in this preview release. We are working on a fix which we expect should be available in the next Insider build.

In case the deviceId or groupId is not explicitly set in the MediaStreamConstraints, we will go through the following logic to select the capture device. Here, let us assume we want to select one microphone and one webcam:

    • If there is one set of capture devices that satisfy the MediaStreamConstraints with the best match, we will choose those devices.
    • Otherwise, if multiple microphones and webcams match the MediaStreamConstraints equally well:
      • We first pick the system default microphone device for communications if it is on the list. We then pick the webcam that pairs with the microphone if there is one, or pick the first webcam on the webcam list.
      • If the system default microphone is not defined, we will enumerate through the capture devices to pair up the microphone and webcam based on its groupId. The first pair we find will be the one we select.
      • If the above fails, we will pick the first microphone and first webcam from the candidate device list.

A headset, when plugged in, provides the default microphone device and default audio rendering option for communications scenarios. Advanced Windows users can change their audio device settings manually for specific purposes through the audio devices manager.

Updates to Media Elements

We have updated our Media Elements (audio/video tags) implementation to enable using it as a rendering target for MediaStream objects. The W3C spec has a table with a very good summary of the changes to the Media Elements. As part of our implementation decision, we now internally handle all real-time media streams, either from local capture device or from a remote ORTC receiver object, using the Windows Media Foundation low-latency playback mode (i.e. the real-time mode). For video capture using built-in webcams, we also handle device rotation internally by setting the right property on video samples so the video tag can render video frames in the correct orientation.

In some other implementations of the feature, “srcObject” is not supported. Developers would need to convert a MediaStream object using the URL.createObjectURL() method and then set it on the “src” attribute of the Media Element. We do not currently support that legacy behavior, and instead follow the latest W3C spec. Both Chrome and Firefox currently have active tickets to track “srcObject” support.

Promises vs. callback patterns

Based on the W3C spec, we support both the promise-based getUserMedia() method and the callback-based getUserMedia() method. The callback-based method allows an easier transition if you have a webpage using the interface already (although it might be a vendor-prefixed version). We encourage web developers to use the promise-based approach to follow the industry trend for new interface design styles on the web.

Missing features

Our implementation does not currently support getting video resolutions not natively supported by the webcam.  This is largely due to a lack of a video DSP module in our media capture pipeline. We currently don’t have plans to address this in the near term.

We also currently don’t support echoCancellation in our MediaTrackConstraintSet. This is a limitation in our current media capture pipeline. We plan to support echo cancellation in our ORTC media stack for real-time communications in a future update.

Sample scenarios using media capture

Media capture is an essential step in many scenarios, including real-time audio and video communications, snapping a photo or capturing a barcode, or recording a voice message. Below we walk through a couple simple scenarios introducing you to how to use the Media Capture functionality.

Scenario #1: Capture photo from webcam

First, get a video stream from a webcam and put it in a video tag for preview. Let’s assume we have a video tag on the page and it is set to autoplay.

  navigator.mediaDevices.getUserMedia({
      video: {
          facingMode: "user"
  }}).then(function (stream) {
      var video = document.getElementById('videoTag');
      video.srcObject = stream;
  }).catch( function (error) {
      console.log(error.name + ": " + error.message);
  });

Here is one example which accounts for the legacy srcObject approach before all browsers support the standards-based approach:

      var video = document.getElementById('videoTag');
      if (typeof(video.srcObject != "undefined") {
          video.srcObject = stream;
      }
      else {
          video.src = URL.createObjectURL(stream);
      }

Next, copy a video frame onto a canvas. Let’s assume we have set up the event listener so when you tap the video tag, we will invoke the following function:

  function capturePhoto()
  {
      var video = document.getElementById('videoTag');
      var canvas = document.getElementById('canvasTag');
      var videoWidth = video.videoWidth;
      var videoHeight = video.videoHeight;
      if (canvas.width !== videoWidth || canvas.height !== videoHeight)
      {
          canvas.width = videoWidth;
          canvas.height = videoHeight;
      }
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
  }

Finally, save the picture:

  function savePhoto()
  {
      var canvas = document.getElementById('canvasTag');
      var imgData = canvas.msToBlob("image/jpeg");
      navigator.msSaveBlob(imgData, "myPhoto.jpg");
  }

You can also change code here to upload the data blob to your web server.

Don’t forget to release the webcam device after you complete the task. Some earlier browser implementations have a stop() method on the MediaStream object. That is not supported by the W3C spec. Instead, you should call the stop() method on the MediaStreamTrack object to release the capture device. For example:

      var video = document.getElementById('videoTag');
      var videoTracks = mediaStream.getVideoTracks();
      video.srcObject = null;
      videoTracks[0].stop();

Once you know how to use one webcam, it should not be difficult to introduce a camera switching feature to your page to handle multiple webcams. You can check out our demo at the Microsoft Edge Dev site for more.

Scenario #2: Capture a voice message from microphone

Now let’s look at a simple example using the microphone.

First, get an audio stream from a microphone and set it as the source node of a web audio graph.

  var audioContext = new AudioContext();
 
  navigator.mediaDevices.getUserMedia({
      audio: true
  }).then(function (stream) {
      var sourceNode = audioContext.createMediaStreamSource(stream);
      var gainNode = audioContext.createGain();
      sourceNode.connect(gainNode);
      …
  }).catch( function (error) {
      console.log(error.name + ": " + error.message);
  });

Next, extract the audio data from a web audio ScriptProcessorNode. This is too lengthy to include here, but you can check out the actual demo code at the Microsoft Edge Dev site and GitHub repository, where you can also add some simple web audio DSP filters before the ScriptProcessorNode.

Finally, save the audio data into a wav file. Once we have the audio data, we can add a wav file header and save the data blob. Again, please check out the actual demo code at the Microsoft Edge Dev site.

We’ve only talked about a couple simple examples as starting points. Once you’ve gotten the captured video stream into a video tag and then canvas, and gotten captured audio into web audio, it’s easy to see many scenarios that start to light up with just a bit more work. We’re eager for your feedback so we can further improve our implementation, and meanwhile we are looking forward to seeing what you do with these new tools!

– Shijun Sun, Senior Program Manager, Microsoft Edge

Introducing Windows 10 Editions

Windows 10 is coming this summer in 190 countries and 111 languages. Today, we are excited to share more details on the Windows 10 Editions.

We designed Windows 10 to deliver a more personal computing experience across a range of devices. An experience optimized for each device type, but familiar to all. Windows 10 will power an incredibly broad range of devices – everything from PCs, tablets, phones, Xbox One, Microsoft HoloLens and Surface Hub. It will also power the world around us, core to devices making up the Internet of Things, everything from elevators to ATMs to heart rate monitors to wearables. No matter which Windows 10 device our customers use, the experience will feel comfortable, and there will be a single, universal Windows Store where they can find, try and buy Universal Windows apps.

Introducing Windows 10 Editions

As in the past, we will offer different Windows editions that are tailored for various device families and uses. These different editions address specific needs of our various customers, from consumers to small businesses to the largest enterprises.

Windows 10 Home is the consumer-focused desktop edition. It offers a familiar and personal experience for PCs, tablets and 2-in-1s. Windows 10 Home will help people do great things, both big and small. With it, they will be more productive and have more fun thanks to a long list of new innovations: Cortana, the world’s most personal digital assistant; the new Microsoft Edge web browser; Continuum tablet mode for touch-capable devices; Windows Hello face-recognition, iris and fingerprint login; and right out of the box, a broad range of universal Windows apps like Photos, Maps, Mail, Calendar, Music and Video*.

We are also bringing the Xbox gaming experience to Windows 10, giving games and gamers access to the Xbox Live gaming community, enabling the capture and share of gameplay and giving Xbox One owners the ability to play their Xbox One games from any Windows 10 PC in their home.

Windows 10 Mobile is designed to deliver the best user experience on smaller, mobile, touch-centric devices like smartphones and small tablets. It boasts the same, new universal Windows apps that are included in Windows 10 Home, as well as the new touch-optimized version of Office. Windows 10 Mobile offers great productivity, security and management capabilities for customers who use their personal devices at work. In addition, Windows 10 Mobile will enable some new devices to take advantage of Continuum for phone, so people can use their phone like a PC when connected to a larger screen.

Windows 10 Pro is a desktop edition for PCs, tablets and 2-in-1s. Building upon both the familiar and innovative features of Windows 10 Home, it has many extra features to meet the diverse needs of small businesses. Windows 10 Pro helps to effectively and efficiently manage their devices and apps, protect their sensitive business data, support remote and mobile productivity scenarios and take advantage of cloud technologies. Windows 10 Pro devices are a great choice for organizations supporting Choose Your Own Device (CYOD) programs and prosumer customers. Windows 10 Pro also lets customers take advantage of the new Windows Update for Business, which will reduce management costs, provide controls over update deployment, offer quicker access to security updates and provide access to the latest innovation from Microsoft on an ongoing basis.

As we announced earlier this year, for the first time ever, we are offering the full versions of Windows 10 Home, Windows 10 Mobile and Windows 10 Pro as a free and easy upgrade for qualifying Windows 7, Windows 8.1 and Windows Phone 8.1 devices that upgrade in the first year after launch.** Once you upgrade, you have Windows 10 for free on that device.

Windows 10 Enterprise builds on Windows 10 Pro, adding advanced features designed to meet the demands of medium and large sized organizations. It provides advanced capabilities to help protect against the ever-growing range of modern security threats targeted at devices, identities, applications and sensitive company information. Windows 10 Enterprise also supports the broadest range of options for operating system deployment and comprehensive device and app management. It will be available to our Volume Licensing customers, so they can take advantage of the latest innovation and security updates on an ongoing basis. At the same time, they will be able to choose the pace at which they adopt new technology, including the option to use the new Windows Update for Business. With Windows 10, Enterprise customers will also have access to the Long Term Servicing Branch as a deployment option for their mission critical devices and environments. And as with prior versions of Windows, Active Software Assurance customers in Volume Licensing can upgrade to Windows 10 Enterprise as part of their existing Software Assurance benefits.

Windows 10 Education builds on Windows 10 Enterprise, and is designed to meet the needs of schools – staff, administrators, teachers and students. This edition will be available through academic Volume Licensing, and there will be paths for schools and students using Windows 10 Home and Windows 10 Pro devices to upgrade to Windows 10 Education.

Windows 10 Mobile Enterprise is designed to deliver the best customer experience to business customers on smartphones and small tablets. It will be available to our Volume Licensing customers. It offers the great productivity, security and mobile device management capabilities that Windows 10 Mobile provides, and adds flexible ways for businesses to manage updates. In addition, Windows 10 Mobile Enterprise will incorporate the latest security and innovation features as soon as they are available.

There will also be versions of Windows 10 Enterprise and Windows 10 Mobile Enterprise for industry devices like ATMs, retail point of sale, handheld terminals and industrial robotics and Windows 10 IoT Core for small footprint, low cost devices like gateways.

Moving forward

We are making strong progress with Windows 10, and we are on track to make it available this summer. And because we have built Windows 10 to be delivered as a service, this milestone is just the beginning of the new generation of Windows. Starting this fall, customers can expect ongoing innovation and security updates for their Windows 10 devices, including more advanced security and management capabilities for businesses.

Customers will continue to help us create Windows 10 even after this summer’s initial release, thanks to the 3.9 million and growing Windows Insiders who are helping us build and test Windows 10. We are grateful for this invaluable feedback that is helping us offer the best Windows ever – for businesses and consumers – across all devices. You, too, can join the Windows Insider Program today and begin experiencing Windows 10.

We are incredibly excited about the innovation in Windows 10 that will be delivered through these editions. Please watch for more information at Windows.com as we move even closer to launch.

Tony

* Cortana will be available on Windows 10 at launch in select markets. Windows Hello requires a specialized, illuminated infrared camera for facial recognition or iris detection or a finger print reader which supports the Windows Biometric Framework. Apps and services may vary by market.

** More information about the free upgrade offer can be found at Windows.com.

The Marriott app for Windows Phone makes travel easy with mobile check-in, checkout and more

Travel just got easier with the updated Marriott app for Windows Phone. Now, the Marriott app gives you the freedom and ease of making your reservations, checking in and checking out 24/7 from just about anywhere with your Windows Phone. With this update you’ll enjoy the following features:

  • Mobile check-in and checkout are available at 12 brands across the world.
  • Enroll quickly in Marriott Rewards, save your preferences and enjoy exclusive benefits such as mobile Check-In and Checkout.
  • Make special requests for early check-in, extra pillows or towels, high or low floor, etc.
  • View upcoming reservations, add them to your calendar and make cancellations.
  • Available in English, French, Spanish, German, and Chinese.

Marriott app 1 Marriott app 2

With more than 4,000 hotels and resorts in 70 countries, Marriott puts lots of heads comfortably in bed every night, this also goes for 12 of their lodging brands around the world. For traveling peace of mind, Marriott is the easy, efficient way to rest assured when you’re away from home! Download the Marriott app today for free from the Windows Phone Store.

Bringing Node.js to Windows 10 IoT Core

This blog was written by Arunesh Chandra, Senior Program Manager, Chakra, and Gaurav Seth, Principal PM Manager, Chakra.

Microsoft is making big investments in the Internet of Things (IoT). Windows 10 IoT will power a range of intelligent, connected IoT devices. From small devices like gateways, to mobile point-of-sale to powerful industry devices like robotics and specialty medical devices. At the //build developer conference, we announced the availability of Windows 10 IoT Core Insider Preview with support for Raspberry Pi 2 and Intel’s Minnowboard Max, and talked about using Node.js for building IoT solutions on Window 10 IoT Core. There is an emerging trend of developers using Node.js for IoT scenarios, and we want to meet developers where they’re at and provide them the tools they need to be successful on the Windows 10 IoT Core platform.

Developers are currently unable to use Node.js on devices running Windows on ARM (WoA), which leaves a gap in their ability to target the entire family of Windows devices. We decided to fill this gap by allowing Node.js to take advantage of running with the Chakra JavaScript engine, which is part of the OS on Windows 10 and has been optimized to run efficiently on WoA devices since its inception. The use of built-in Chakra engine not only reduces the disk footprint impact when executing Node.js apps, but also enables us to bring first-class Universal Windows Platform (UWP) support to Node.js apps.

The project to bring this support to Windows 10 is in early stages of development. For now, the path we’ve chosen is to create a wrapper between the JSRT hosting APIs exposed by Chakra and the V8 hosting APIs that are currently used by Node.js (v0.12). The code for this wrapper is available publicly at github. These changes enable:

  • Node.js to run as a Classic Windows application on any device running Windows 10
  • Node.js to be hosted inside a Universal Windows application, which can run on all Windows10 devices
  • Full access to UWP APIs from Node.js applications
  • Visual Studio debugging of Node.js applications on Windows 10

We will be submitting a pull request to Node.js after stabilizing this code, fixing key gaps and responding to early community feedback.

The current set of changes not only enable developers to use Node.js on all devices running Windows 10, but also provide them an option to choose their preferred app model – Classic Windows v/s Universal Windows apps. Going forward, we plan to work closely with the Node Foundation, the Node.js Technical Committee(s), IO.js contributors and the community to discuss and participate in conversations around creating JavaScript engine agnostic hosting APIs for Node.js, which provide developers a choice of JavaScript engine that they would want to use in their Node.js workflow – all with the goal of making Node.js succeed across all platforms and devices.

Getting started with Node.js development on Windows IoT Core

The following section provides an overview of how to setup your development environment and pointers to sample code to help you get started with the changes to Node.js discussed above.

Setting up your development environment

Developing a Classic Windows application using Node.js

Classic Windows applications like a Win32 console application for Node.js are based on the typical Node.js programming model, which is known and familiar to Node.js developers today. This application model is probably the easiest way for current Node.js developers to try out Windows 10 IoT Core using their existing code.

Following is an example of a console application using Node.js to display memory usage of the system. The app uses a native addon to make low level system calls. While the details about building this sample can be found here, at a high level, it works just like any typical Node.js app.

Create a new file “server.js,” with the following content:

var addon = require("./MemoryStatusAddon");
 var http = require('http');
http.createServer(function (req, res) {
 var memObj = addon.GlobalMemoryStatusEx();
 res.writeHead(200, { 'Content-Type': 'text/plain' });
 res.write('*************************************************n');
 res.write('Percent of memory in use: ' + memObj.load + 'n');
 res.write('KB of physical memory: ' + memObj.physKb + 'n');
 res.write('KB of free physical memory: ' + memObj.freePhysKb + 'n');
 res.write('KB of paging file: ' + memObj.pageKb + 'n');
 res.write('KB of free paging file: ' + memObj.freePageKb + 'n');
 res.write('KB of virtual memory: ' + memObj.virtualKb + 'n');
 res.write('KB of free virtual memory: ' + memObj.freeVirtualKb + 'n');
 res.write('KB of free extended memory: ' + memObj.freeExtKb + 'n');
 res.end('*************************************************n');
 }).listen(1337);

Now on the remote PowerShell session run the following command:

Node1

The above command creates and starts an HTTP server on the device, which can be accessed over the network using a browser and the IP address of the device. The result looks like below:

Node2

Developing a Universal Windows application using Node.js

Universal Windows applications allow Windows developers to build an app once and target a large variety of Windows 10 devices including PCs, Tablets, Mobile Phones, XBox, HoloLens, IoT devices etc. NTVS IoT Extension Beta provides a Visual Studio template, which can be used to build Universal Windows apps using Node.js. This extension will also install the version of Node.js that uses the Chakra JavaScript engine and the uwp npm package.

Using this template developers can build, deploy and remotely run the app on an IoT device all from within Visual Studio.

Node3

More detailed instructions on how to create a basic Universal Windows webserver using Node.js are available in this sample.

Accessing Universal Windows Platform in Node.js applications

Universal Windows apps are incomplete without full access to underlying native UWP APIs that are a part of the Windows10 platform. By using the npm module called uwp, developers can use the ‘require’ pattern to enable access to UWP namespace from inside of Node.js. The NTVS IoT Extension Beta installs the uwp npm module by default, but the usual npm install syntax is sufficient to install the uwp module separately, if node.exe is using Chakra JS Engine.

The code below shows the use of UWP APIs inside a Node.js application to toggle the LEDs on or off with each request made to the server via the browser. Detailed instructions to setup the IoT device with breadboard and LEDs and see this code in action are available in the Blinky sample.

var http = require('http');
 var uwp = require("uwp");
 uwp.projectNamespace("Windows.Devices");
var gpioController = Windows.Devices.Gpio.GpioController.getDefault();
 var pin = gpioController.openPin(6);
 pin.setDriveMode(Windows.Devices.Gpio.GpioPinDriveMode.output)
 var currentValue = Windows.Devices.Gpio.GpioPinValue.high;
 pin.write(currentValue);
http.createServer(function (req, res) {
 if (currentValue == Windows.Devices.Gpio.GpioPinValue.high) {
 currentValue = Windows.Devices.Gpio.GpioPinValue.low;
 } else {
 currentValue = Windows.Devices.Gpio.GpioPinValue.high;
 }
 pin.write(currentValue);
 res.writeHead(200, { 'Content-Type': 'text/plain' });
 res.end('LED value: ' + currentValue + 'n');
 }).listen(1337);

The sample above uses uwp.projectNamespace(“Windows.Devices”) to include a scoped UWP namespace. If several namespaces need to be accessed in the same script, one can always use a higher level namespace like uwp.projectNamespace(“Windows”).

Visual Studio debugging support

One of main efforts for this project has been to bring the power of Visual Studio debugging to Node.js apps running with Chakra on Windows 10. With the work that has been done in Chakra, it’s as simple as ensuring –debug flag is set, setting break points in their Node.js script and start debugging in Visual Studio using F5. Once the breakpoint hits, developers have access to all the usual debug information like local variables, call stack etc. One of the key highlights of the support available is the remote debugging feature, which also works out of the box without any extra setup. Windows 10 IoT Core comes preconfigured to allow remote debugging using Visual Studio.

To remote debug, specify the IP address of your IoT device in the Visual Studio project settings pane:

Node4

Hit F5 to build / deploy / launch the app on the device with debugger attached:

Node5

What’s next?

We are excited to bring Node.js to Windows 10 IoT Core and eager get your feedback. Given that this is early work, certain things do not work as expected for now. Some known issues are related to incomplete support for VM module and npm packages like serialport, firmata etc. Also, developers have to go through multiple steps listed in the readme.md to setup the node environment to build from raw sources.

In coming weeks and months, we will continue to enable more Node.js scenarios and will be working towards higher npm package compatibility, smoothing out the developer workflow, improving performance, supporting io.js and working with the Technical Committee and community for a JavaScript engine agnostic interface for Node.js. We will be sharing more details on our ongoing efforts as they become available. We are excited to have embarked on this journey and are eager to listen and learn from the community. We are seeking feedback on this effort and are committed to drive towards making Node.js on Windows to be the best in class. You can share your feedback in the comments section below or open an issue at our repo on github. You can also connect with us on twitter at @wpdev and tell us what you think about #ChakraNode.

We can’t wait to see what you will make.

JavaScript moves forward in Microsoft Edge with ECMAScript 6 and beyond

ECMAScript is the official name for the JavaScript language we all know and love. The next version of ECMAScript, ES6 (henceforth referred to by its new name, ES2015), is nearing the end of its standards process journey. At this stage the latest draft is final and will not be receiving any further updates. In the coming weeks, ECMA will vote to officially recognize the final draft as the official ES2015 specification.

ES2015 is perhaps the largest update to JavaScript ever. Significant additions are made to the standard library, with nearly every built-in gaining additional capabilities, and a swath of new syntax additions as well. The syntax added runs the gamut from simple sugars, like default and rest parameters that make your code more understandable and easier to author and maintain, to huge new capabilities like iterators and generators.

We see a lot of excitement around ES2015 across a number of feedback channels. For example, ES2015 features have amassed thousands of votes on our UserVoice. We have been working on building comprehensive ES2015 support over the last year so you can use these great new features.

We’ve also been driving interoperability among implementations and compatibility with the web by carefully implementing new ES2015 features and bringing data about our implementation experience back to other implementers and the TC39 committee. We’ve also been working on test262 collateral to help all implementers create interoperable implementations of ES2015 more quickly. But we know that the excitement doesn’t stop at ES2015 – already proposals for ES2016 and beyond are gaining steam – so we’ve been doing some early investigations into these as well.

Microsoft Edge & ES2015

Screenshot showing Chakra's score of 81% leading the ES6 Compat Table

Chakra’s score on the ES6 Compat Chart

Microsoft Edge supports most ES2015 features and scores a best-in-class 81% on the ES6 Compat Table with experimental JavaScript features enabled via about:flags. Most of the ES2015 functionality in Microsoft Edge is ready for use and on by default without a flag. This includes arrow functions, enhanced object literals with concise methods and other syntactic shorthands, template strings, rest parameters, the spread operator, let and const bindings, proxies, symbols, iterators, new built-ins such as Typed Arrays, Map, Set, WeakMap, WeakSet, and a slew of new methods on existing prototypes for String, Array, Number, and new utility methods for Object and Math. This is not even a complete listing; see our roadmap on Microsoft Edge Platform Status for an always up-to-date view of what is enabled. It is also good to see other implementations gaining steam, which implies that the day when developers can use ES2015 directly in the latest version of popular browsers is rapidly approaching.

In the latest Windows 10 Insider Preview flight, we have shipped some more ES2015 features behind the experimental JavaScript flag: namely, generators, default parameters, and the RegExp sticky flag. Chakra had nearly completed support for classes as defined in earlier versions of the ES6 specification but significant changes were made to the specification rather late in the process. Until we update our implementation to the latest specification, classes have been moved behind the flag, but can be enabled by turning on experimental JavaScript features in about:flags.

Screenshot of experimental JavaScript features interface in about:flags

Default parameters is an often requested feature but were deceptively difficult to implement due to the special intermediate scope default parameter initializers run in (see figure 3). While default parameters are not too challenging to get working at a basic level, optimizing them is hard, and so the basic support for default is semantically mostly correct (with a notable exception, see figure 4) but doesn’t perform as well as we’d like and so remain behind the experimental flag for now.

Example complex default parameter scope case Chakra handles propertly

Example complex default parameter scope case Chakra handles propertly

Example complex default parameter scope that Chakra does not yet handle

Example complex default parameter scope that Chakra does not yet handle

Generators is another feature that has a huge amount of excitement behind it (I often talk about how generators can significantly improve your asynchronous code, for example). We have not had time to address late spec changes to generator semantics that added the return method to the iterator interface and the associated changes to the for-of loop and other language features to invoke return when finishing iteration. Because this might significantly impact compatibility with other generator implementations, we’ve opted to keep generators behind the experimental flag until we implement the return functionality.

While ES2015 support across browsers is rapidly gaining steam, many of you don’t have the luxury of only targeting the latest browsers. Thankfully transpilers have really taken off in a big way with tools like TypeScript, Babel, and Traceur supporting various ES2015 features as well (with Babel getting an impressive 76% on the ES6 Compat Chart). These tools are really exciting as they enable you to write your code in ES2015 and compile the ES2015 code to ES5/3 code before deploying to production. In the future when ES2015 support is available in the browsers you support you can drop the transpiler and deploy the ES2015 code directly.

What’s Next?

In addition to finalizing our experimental features and getting them enabled by default, we will be working on a number of other fronts as well over the coming months. With Microsoft Edge now evergreen, we will have a much more rapid and regular release cadence. Expect to see more ES2015 features come online, either enabled by default or behind the experimental flag, over the next few months. Going ahead, we plan to preview new features behind flags so you can try them out before they make it into the stable browser. You can stay on top of our progress by watching our platform roadmap published at Microsoft Edge Platform Status.

While the ES2015 specification is finished, work on ES2016 and future releases are ongoing in parallel. As the name implies, ES2016 is merely a year away! The ECMA TC39 committee has committed itself to yearly releases going forward under a process strongly supported by Chakra’s TC39 representatives. Under this new process, specs will be ratified yearly with any proposals that are ready to be included. Further, the process requires test262 collateral and multiple interoperable implementations before a feature is considered for inclusion in ECMAScript which is important to ensure that features are compatible with the web and actually implementable by runtimes. Chakra’s more rapid release cadence aligns nicely with this new process and you should see new JavaScript features enabled at a steadier pace going forward.

The Chakra team will also be contributing test collateral to ECMAScript’s official test suite Test262 to help ensure that all ES2015 implementations are interoperable. Test262 collateral is closely tracked by all the major implementers which makes it a very easy and powerful way to help implementers find bugs and ensure that developers don’t have to work around bugs in one implementation or another. We believe strongly that test262 is a force for good on the Web and will continue serving as the editor of the test suite going forward.

We’re excited to see what you’ll build with these new JavaScript language capabilities, both those present today in Microsoft Edge and those coming in future updates, and are eager to hear your feedback! Bugs in these new features can be filed on Connect. We’re also watching for feedback on UserVoice, and you can also reach out to us on twitter via @MSEdgeDev.

– Brian Terlson, Senior Program Manager, Chakra Team

Microsoft Edge: Building a safer browser

With Microsoft Edge, we want to fundamentally improve security over existing browsers and enable users to confidently experience the web from Windows. We have designed Microsoft Edge to defend users from increasingly sophisticated and prevalent attacks.

This post covers some of the advanced technologies used to protect Microsoft Edge, including industry leading sandboxing, compiler, and memory management techniques developed in close partnership with Windows.

Web Security Threats

While the web is predominantly a safe environment, some sites are designed to steal money and personal information. Thieves by nature don’t care about rules, and will use any means to take advantage of victims, most often using trickery or hacking:

  • Trickery: in real life, a “con man” will use tricks to take advantage of a victim, e.g. “got two 10s for a 5?” On the web, attackers will try to fool victims using things like “phishing” attacks that convince a user to enter their banking password into a web site that looks like their bank, but isn’t.
  • Hacking: in real life, a mugger might assault you and take your money, or a burglar might break into your home and steal your valuables. On the web, attackers present a victim’s browser with malformed content intended to exploit subtle flaws in your browser, or in various extensions your browser uses, such as video decoders. This lets the attacker run their code on the victim’s computer, taking over first their browsing session, and perhaps ultimately the entire computer.

These are threats faced by every browser. Let’s explore how Microsoft Edge addresses these threats and is helping make the web a safer experience.

Defend Users Against Trickery

A web browser can help defend a user against trickery by identifying and blocking known tricks, and by using strong security protocols to ensure that you are talking to the web site you think you are talking to. Here are some of the ways that Microsoft Edge helps achieve this.

Stronger, More Convenient Credentials

One of the most common ways to attack users is phishing: enticing the user into entering their password into a fake version of a web site that they trust. Attempts to uniquely identify legitimate web sites, such as through the original HTTPS lock symbol, and more recently with the EV Cert green bar, have met with only limited success: attackers are just too good at faking a legitimate experience to expect most users to notice the difference.

To really defend against this requires removing the need for users to enter plain-text passwords into web sites. Instead, Windows 10 provides Microsoft Passport technology with asymmetric cryptography to authenticate you to your web sites. Windows 10 will also offer the most convenient way to unlock your device and access your Microsoft Passport, providing a truly seamless experience that is more secure than today’s world of complicated passwords.

Defending Against Malicious Web Sites and Downloads

Microsoft SmartScreen, originally introduced in IE8, is supported in Microsoft Edge and by the Windows 10 Shell. SmartScreen defends users against phishing sites by performing a reputation check on sites the browser visits, blocking sites that are thought to be phishing sites. Similarly, SmartScreen in both the browser and the Windows Shell defends users against socially-engineered downloads of malicious software to users being tricked into installing malicious software.

Defending Against Fake Sites with Certificate Reputation

Users have learned to trust sites that use encrypted web traffic. Unfortunately, that trust can be undermined when malicious sites use improperly obtained or fraudulent certificates to impersonate legitimate sites. Last year we announced Certificate Reputation – recently we have extended this system by allowing web developers to use the Bing Webmaster Tools report directly to alert Microsoft to fraudulent certificates.

Web Standards

As we announced recently, Microsoft Edge hosts a new rendering engine, Microsoft EdgeHTML. This engine is focused on modern web standards, allowing web developers to build and maintain one consistent site that supports all modern browsers. This greatly simplifies the hard work of building first class web sites, allowing more time and energy for web developers to focus on reliability and security rather than the complexities of interoperability.

Microsoft EdgeHTML helps in defending against “con man” attacks using new security features in the W3C and IETF standards:

Defending the Browser Against Hacking

Microsoft Edge does more than facilitate standards compatibility and users with defenses against trickery. It also includes a major overhaul of the DOM representation in the browser’s memory, making the browser’s code more resistant to “burglar” attacks that attempt to subvert the browser.

But Microsoft Edge has done more than just re-write the rendering engine. Here we describe the security mitigations baked into the Microsoft Edge browser.

Moving to a more secure extension model

Microsoft introduced ActiveX in 1996, part of a wave of support for web browser extensions, enabling 3rd parties to experiment with various forms of alternate content on the web. However, browser extensions come at a cost of security and reliability: binary extensions bring code and data into the browser’s process, with no protection at all, and so anything that goes wrong or is vulnerable in the extension can also take down or compromise the browser itself. It is rather similar to building a sun porch onto your house without locking the door to the sunporch: it is all too easy for a burglar to break into the sun porch, and from there loot the rest of your house.

So to make browsers safer against attacks, and just more reliable, it is important to create an extension model that is safer, by sharing less state between the browser itself and the extensions. Thus Microsoft Edge provides no support for VML, VB Script, Toolbars, BHOs, or ActiveX. The need for such extensions is significantly reduced by the rich capabilities of HTML5, and using HTML5 results in sites that are interoperable across browsers.

To enable extensibility beyond what is provided by HTML5, we are working on plans for a modern, HTML/JS-based extension model. We look forward to sharing more details on these plans, including guidance on migrating your scenarios from ActiveX controls to modern standards and extensions in the coming months.

Microsoft Edge is an App

The largest change in Microsoft Edge security is that the new browser is a Universal Windows app. This fundamentally changes the process model, so that both the outer manager process, and the assorted content processes, all live within app container sandboxes. This provides the user and the platform with the confidence provided by other Windows store apps.

App Container Sandbox by Default

IE7 on Windows Vista was the first web browser to provide a browsing sandbox, called protected mode, where the part of the browser that renders the web content runs with less privilege than the browser controls (e.g. the back button) and the user do. This provides the user with a level of protection should a malicious web site exploit a bug in the browser or one of its plugins, in that the attacker is now stuck inside the sandbox and does not have full access to all of the user’s resources.

IE7’s protected mode was built on Vista’s mandatory integrity control, which provides a degree of protection, but is limited. IE10 introduced EPM (Enhanced Protected Mode) based on Windows 8’s app container sandbox. EPM provided a much stronger sandbox than protected mode, including for example deny-by-default and no-read-up semantics. EPM was on by default in the immersive browser, but was only an option on the desktop in IE10 and IE11 because some browser extensions are not compatible with EPM.

Microsoft Edge is rebooting our browser extension model, allowing it to run its content processes in app containers, not just as a default, but all the time. Thus every Internet page that Microsoft Edge visits will be rendered inside an app container, the latest and most secure client-side app sandbox in Windows.

64-bit By Default

Microsoft Edge is also 64-bit, not just by default, but at all times when running on a 64-bit processor. 64-bit processes in general, and browser processes in particular, get significant security advantages by making Windows ASLR (Address Space Layout Randomization) stronger.

Attackers want to inject malicious code into your browser process via a coding bug, and then execute their malicious code. ASLR makes that harder by randomizing the memory layout of the process, making it hard for attackers to hit precise memory locations to achieve their ends. In turn, 64-bit processes make ASLR much more effective by making the address space exponentially larger, making it much more difficult for attackers to find the sensitive memory components they need.

Defending Against Memory Corruption

Memory corruption is a class of vulnerability so common that it deserves special attention. It is endemic to applications written in C/C++, because the programming language does not provide type safety or buffer overflow protection. Broadly speaking, memory corruption attacks involve the attacker providing malformed input to a program that the program does not handle properly, resulting first in corruption of the program’s memory state, and subsequently in the attacker gaining control of the program. A broad variety of memory corruption mitigations have been devised since the mid-1990s, and in the 2000s Microsoft has lead the way with advances including ASLR, DEP, and SeHOP.

MemGC

As these mitigations have rolled out, attackers have adapted, inventing new forms of attack. Microsoft in turn has responded with new memory safety defenses that mitigate the most common new forms of attack, including and especially use-after-free vulnerabilities.

MemGC (Memory Garbage Collector) is a memory garbage collection system that seeks to defend the browser from UAF (Use-after-free) vulnerabilities by taking responsibility for freeing memory away from the programmer and instead automating it, only freeing memory when the automation has detected that there are no more references left pointing to a given block of memory.

Control Flow Guard

The end-game in memory-corruption is for the attacker to gain control of the CPU program counter, and jump to a code location of the attacker’s choice. CFG (Control Flow Guard) is a Microsoft Visual Studio technology that compiles checks around code that does indirect jumps based on a pointer, restricting these jumps to only jump to function entry points that have had their address taken. This makes attacker take-over of a program much more difficult by severely constraining where a memory corruption attack can jump to.

These new memory safety protections have been enabled and shipped out to Windows and IE users over the last year, and are on all the time in Microsoft Edge.

Bug Bounty

Despite all efforts, there will be security vulnerabilities in Microsoft Edge that we do not yet know about. To minimize customer impact, we will be offering a Windows 10 Technical Preview Browser Bug Bounty program, intended to incent security researchers to report browser vulnerabilities to Microsoft during the Technical Preview period rather than after Microsoft Edge ships as a general use product. Security researchers interested in the bounty program should look here for more information.

Security Is A Process, Not A Destination

Microsoft Edge is a brand new browser, with new goals and requirements. This has allowed us to include these security enhancements, both brand new security features, and moving older opt-in features to be always-on. For this reason, we believe Microsoft Edge will be the most secure web browser that Microsoft has ever shipped. As security is a process, not a destination, we will continue to work on browser security improvements. Let us know what you think in the comments below or @MSEdgeDev.

– Crispin Cowan, Senior Program Manager, Microsoft Edge

[Corrected on 5/11 at 5:35 PM to reflect that Protected Mode was introduced in IE7 on Windows Vista, not Windows 7.]

Dell shares the Next Generation of Vostro Notebooks Tailor-Made for Small Businesses

Dell has announced the next generation of its Vostro line of productivity notebooks, offered to meet the unique needs of small businesses, home offices, and mobile professionals. The Vostro 14 and 15 3000 Series business notebooks offer essential features in a refined design, ideal for small business owners and entrepreneurs who need an affordable device for work.

Dell image

The new 14″ and 15″ Vostro notebooks deliver the right balance of features and performance for working professionals who demand fast processing power and performance and no-nonsense business features to get their work done. Whether managing operations at a restaurant or freelancing from a home office, workers will maneuver through spreadsheets and presentations with ease, powered by the latest Intel Processors, available up to core i5 (5th generation processors). The Vostro 14 delivers up to 9 hours of battery life for everyday mobile productivity, while the Vostro 15 lasts up to 8 hours 42 minutes. For more demanding graphics-rich applications or uninterrupted multi-tasking, users can opt for built-in discrete graphics from NVIDIA with up to 2GB memory and up to 8GB of high-speed RAM.

  • The Vostro 14 3000 Series notebook is now available in the United States on Dell.com starting at $349.00
  • The Vostro 15 3000 Series notebook is now available in the United States on Dell.com starting at $349.00

The new Vostro 3000 Series notebooks are less than 1″ thin, slimmer than the previous generation for improved portability. Available in Solid Black, the micro-stripe textured cover enhances tactility, making the device less prone to scratches from everyday use and commutes.

To learn more about these new devices visit Dell’s Newsroom.

Building vorlon.JS with the help of the developer community and what’s next

Recently at //BUILD/ 2015 and in the Microsoft Edge Web Platform Summit, we have talked about how our focus on bringing our teams and the technologies behind our web platform closer to the broader community of developers. We’ve made it a priority to contribute to open source projects that improve web interoperability and help developers spend less time testing across browsers and devices.

One such project we recently announced is vorlon.JS – an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. vorlon.JS itself is a small web server you can run from your local machine or install on a server for your team to access, which serves the vorlon.JS dashboard (your command center) and communicates with remote devices. Installing the vorlon.JS client in your web site or app is as easy as adding a single script tag. It’s also extensible, so developers can write plug-ins that add features to both the client and the dashboard, such as feature detection, logging, and exception tracking.

It takes a village – in this case, it was a team of passionate evangelists, engineers, and &yet open source developers building together:

It’s also great to see some of the community responses like this:

We think so too. So we’d like to share a bit more about our upcoming roadmap, how vorlon.JS was made, and how you can contribute to the project too.

Our vorlon.JS roadmap

It’s been a week since we announced it and we’re already getting some great input in how to make it better. Here are our vorlon.JS plug-in priorities over the coming months:

  1. AngularJS – We know Angular is quite popular for building dynamic web apps. Both vorlon and Angular 2 are built on TypeScript so it’s a natural next step for our team.
  2. Web Audio API – It’s a powerful, high-level API for processing audio. But synthesizing and mixing are complex to debug across so device and browsers alike so we think developers building game or music web apps will particularly find vorlon.JS as a useful tool.
  3. Hosted vorlon.JS dashboard – Currently the dashboard can be accessed in your dev environment through localhost.

<script src="http://localhost:1337/vorlon.js"></script>

We can help save developers more time by making vorlon.JS accessible on any device through Azure.

Please share with us what you’d like to see in the next version on Twitter @MSEdgeDev!

Building vorlon.JS for extensibility

From the very beginning, we wanted to be sure that vorlon.JS remains as mobile-first and platform-agnostic as possible. So we decided to use open source tech that worked across the broader number of environments.

Our dev environment was Visual Studio Community, which you can get for free now or use something like Visual Studio Code on your Linux, Mac, or Windows device. We used the node.JS tools for Visual Studio and Azure for the back-end. Our front-end was JavaScript and TypeScript. If you’re not familiar with TypeScript, you can learn why we’ve built JS libraries with it here. But you don’t have to know it to use vorlon.JS or contribute.

Here’s a global schema of how it works:

Global schema of vorlon.JS

Here are the parts with built with:

  • A nodeJS server is hosting a dashboard page (served using express) and a service
  • The service is using socketIO to establish a direct connection with both the dashboard and the various devices
  • Devices have to reference a simple vorlon.js page served by the server. It contains all the plug-ins client code which interact with the client device and communicate with the dashboard through the server.

Every plug-in is split in two parts:

  • The client side, used to capture information and to interact with the device
  • The dashboard side, used to generate a command panel for the plugin inside the dashboard

For instance, the console plug-in works this way:

  • The client side generates a hook on top of log(), console.warn() or console.error() . This hook is used to send the parameters of these functions to the dashboard. It can also receive orders from the dashboard side that it will evaluate
  • The dashboard side gathers these parameters and display them on the dashboard

The result is simply a remote console:

Screenshot of vorlon.JS remote console

Share with us what you’d like to see next

We want to make the Web “just work” for your users and ours. If you’d like to see a new feature or have feedback – on Microsoft Edge, on the new Microsoft Edge Dev site, or on open source projects like vorlon.JS, just reach out to @MSEdgeDev and let us know!

David Catuhe, Principal Program Manager, Developer Experience

A look at new feedback-driven improvements to the network tool in our F12 Developer Tools

In January this year, we described new features and experiences for developers in the F12 developer tools that enable you to be more effective with a range of updates (e.g. new performance and network tools as well as Debugger enhancements and UI improvements.

The latest Windows 10 Insider Preview brings more improvements, including a refined network tool experience and an early look into the tooling support that will be available for Microsoft Edge.

Microsoft Edge F12 developer tools

To access the Microsoft Edge F12 developer tools, open the settings menu and select “F12 Developer tools,” which will launch the tools undocked.

Screenshot of F12 Developer Tools in Microsoft Edge menuScreenshot of undocked F12 Developer Tools

Network tool

We’ve heard feedback from developers regarding the network tool’s capabilities and ease of use. Some examples include the lack of auto-start capturing, export to JSON HAR, and filtering. To address this feedback, we’ve been working to redesign the network tool to provide a cleaner experience that makes you more productive when identifying and resolving network related issues.

Network issues can appear at any time from the initial page request, to loading and interacting with the app. It’s therefore important that the tool allows you to collect network HTTP-based traffic without the need to start a capturing session (e.g. issues might occur between page requests, loading and interacting with the page). Per your feedback, we also added the Start & Stop toolbar buttons to give you the flexibility to manage your session.

Screenshot of Start and Stop toolbar buttons

The toolbar gives you the power to zero-in quickly on specific types of traffic (for example, an image may not be displayed or you may not be getting the latest version of an image) by filtering out all unrelated content. The “Content type filter” toolbar button supports multiple filters that allow you to become more productive by skipping over dozens of unrelated network calls and only focusing on the relevant ones.

Screenshot of Content Type Filter in Network Tools

Once a filter is applied, the status bar at the bottom of the tool will reflect the captured network traffic currently displayed in the summary view. At a glance, it provides information about network errors (responses with 4xx or 5xx status codes), the number of requests, how much response data was transferred from the server, and how long it took to download. This is helpful when measuring how much data was consumed in a particular scenario or trying to better understand how long it might take to download certain resources.

Screenshot of Network Traffic summary view

There are cases where you might want to share your network traffic log with other developers or use tools like Fiddler to run a performance analysis session. For these, you can use the export button to export the captured network traffic into a JSON HAR file.

Screenshot of exporting network traffic

There are many other interesting features in the toolbar that provide capabilities to help diagnose issues:

  • Always refresh from server – This allows you to ensure you are testing against the latest version of a resource from the server instead of a potentially locally cached file that might be outdated.
  • Clear cache – This ensures the browser’s cache is clear before loading the page and ensures a clean network session.
  • Clear cookies –This provides you a shortcut for clearing the browser cookies, without having to open the browser’s settings.
  • Clear entries on navigate – This allows you to focus only on the resources that were loaded during the last page refresh or navigation. Alternatively, if you need to compare with a previous session, just turn this feature off and the previously captured log will not be removed after a page refresh.
  • Clear session – At any point, you can use the clear session button, to clear any network traffic information recorded during the session.

Summary view

The summary view in the network tool is very descriptive and we have described how you can filter its content. Each row has the following data about the captured traffic:

  • Name – The name and URL path of the resource being requested.
  • Protocol – The protocol used when requested this resource. For example: HTTP or HTTPS (HTTP/2 is coming).
  • Method – The HTTP method used on the request (e.g. GET, POST, PUT, etc).
  • Result – The response status code and text message as returned by the server. To highlight potential issues we colorize 4xx and 5xx status codes.
  • Content type – The MIME type of the response as returned by the server.
  • Received – The total size of the response payload as delivered by the server.
  • Time – How long it took to download the resource since the request was initially sent.
  • Timings – A graph that shows where network activity occurred over time. This graph or waterfall view, shows you when a resource was requested and when it finished

We also added some productivity enhancements to improve the visibility of important debugging details:

  • By default, the requests are sorted in chronological order, but they can be sorted differently by clicking on a different column header.
  • Requests fully served from the cache are marked as “(from cache)” in the Received column. This helps you understand if you are using the cache effectively, perhaps to save user bandwidth, or even if you are caching responses by mistake and providing the end-user of your application with outdated data.
  • Errors such as 4xx or 5xx are displayed in the Results column with a red status code as well as highlighted in the summary bar, bringing your attention to these potential issues that might need resolving.

Error highlighting in Network Tool

Details view

Details of a request are accessed by opening the summary view and by double clicking on a request. The details panel will open up to expose relevant details about that request and response.

Screenshot of Details Panel;

The details panel is divided into the following sections:

  • Headers – Provides visibility into the request and response headers as well as summarizes important aspects such as the URL, method and status code.
  • Body – Displays the request and response payload bodies as well as provides options to “pretty print” JSON, XML, HTML, CSS, JavaScript and TypeScript content which makes them easier to read.
  • Parameters – Breaks down the query string parameters into an easy-to-read format.
  • Cookie – Displays the data of the request and response cookies.
  • Timings – Displays the timing stages involved in acquiring the respective resource. Since redirects affect the time involved in downloading a resource, this tab also indicates if a resource was redirected from or was redirected to a different resource.

Screenshot of Timings section

The new network tool is available for developer tools in IE11 and Microsoft Edge on Windows 10. If you are a Visual Studio developer, you will also benefit from the same tooling experience that is now available in Visual Studios 2015, which allows you to debug your JavaScript, managed and native Windows and Windows Universal apps.

We are currently refining the experiences and we’ll provide more updates as changes roll out in preview builds. This is a preview, so you may notice some rough edges that will be addressed in future updates. In the meantime, we encourage you to continue providing suggestions, bugs, or requesting experiences you believe can make your daily development activities easier and more effective.

Let us know your thoughts about the features announced today by leaving a comment below, reaching out on Twitter, or visiting our User Voice site to express your opinion on what we should work on next!

— Ruben Rios, Program Manager, Internet Explorer

Build 2015 Session Recap

Now that we’ve recovered from the excitement of Build 2015 last week, with its many keynotes packed with important announcements and 200 sessions, there’s much to digest, and we wanted to make it easier for you to quickly find some of the most popular sessions, now posted on Channel 9.

This list is just a snapshot, and you’ll find ALL the sessions over on Channel 9 at the Build 2015 event page.

Let us know your favorite sessions in the comments or @wpdev. As always, get your hands dirty with Visual Studio and the Windows 10 tooling plus the Universal Windows Platform samples from Build 2015.

UWP Features

UX/Xaml/Graphics

Tooling

Bridges

Internet of Things

 Store