مميزات بسيطة ولكن تثير الإهتمام لـ VS 2012

Simple but Interesting Features of VS2012

HTML5:نعمة أم نقمة ؟

HTML5: A blessing or a curse?

7 Lovely Things About HTML5 Markup سبعة اشياء جميلة في HTML5

http://www.elated.com/articles/7-lovely-things-about-html5-markup/

Seven deadly sins of Web design سبعة اخطاء قاتلة لتصميم المواقع

An eye-catching website is a must for every business, but many are still making rookie design mistakes that are easy to avoid. And that’s not something any business can afford.

“Your website is the single most important marketing element for your business today,” says Ezra Silverton, president of the Toronto Web design firm 9th Sphere, prioritizing it ahead of that increasingly archaic prop, the business card.

“You only have one chance to make a first impression,” he says. “In person, very few people will walk away within seconds if they get a bad impression – but on a website, they click away instantly.”

Here, Mr. Silverton and Doug Morneau, founder and chief executive officer of Rhino Marketing in Vancouver, share their seven deadliest Web design sins and how you can avoid them.

Putting design before content

Yes, good design is non-negotiable, says Mr. Silverton. But creating a design template and then trying to fit content into that design is a fatal flaw. “The most important reason people go to your site is to find the content,” he says.

“If you’re putting design before content, then you’re forced to adjust the content to comply with the design, and you really want it to be the other way around.”

Designing without strategy

“You need to know the goals of the site first, and then achieve those through design,” says Mr. Silverton.

“We emphasize strategy first, but I can’t even think of a single client who would think this way. They always come in and talk about the colours and images they want to use. They’re excited about the visual aspect, and they forget about strategy.”

It starts with understanding your audience, says Mr. Morneau. “You need to understand where and when they’re going to use the site,” he says, adding that often the goal of a business site is to support and drive sales.

He recommends visualizing how users are going to interact with your content. If, for instance, you’re in the business of selling washing machines, people will visit your site for three reasons: To research your product, to find out where it’s available and to actually purchase the item. “Before you rush to roll out a site, you need to know how people are going to use it,” he says.

Getting too creative – or not creative enough

Mr. Silverton cautions against getting too fancy with animated graphics and music. “People can go overboard and put a lot of flashy things on their site,’ he says. “If it’s a business about, say, plumbing, it may not be appropriate.”

Conversely, it may be tempting for new businesses to go with an out-of-the-box template design, but considering the consumer demand for websites, and what the competition is likely offering, it may not be the best choice. “If you’re going to set up a site, set up something that looks like you spent time on it,” says Mr. Morneau. “Otherwise, you may be better off without a site at all.”

Mr. Silverton agrees that sites that are quickly thrown together without care make a bad impression. “You can spot those right off the bat – and I’m not just talking about people in the Web design business. Customers can, too.”

Burying contact info

It sounds like a basic necessity, but many businesses make their contact information hard to find.

“It’s the most basic problem, but I’m surprised by how often it happens,” says Mr. Silverton. “I think it happens because businesses are so entrenched in their daily work, they overlook the basic stuff.” He sees it most often on sites that were clearly a do-it-yourself job. “When you work with a professional, we’ll ask the right questions.”

Simply providing a form, instead of an e-mail address, phone number and street address, leaves potential customers not knowing whether they’ll ever hear back from you, says Mr. Morneau, who recommends listing all three methods of contact prominently on the site and leaving it up to the customer to decide how they want to communicate with you.

Out-of-date information

“The easiest thing to do is keep your site up to date,” says Mr. Morneau, but, he adds, lots of businesses don’t bother. Once they’ve got a site up, they think they’re done. “It’s a lot like not doing regular maintenance on your car. It becomes out of date and irrelevant. Eventually, it stops working.”

“So often we’ll see sites where they have a news posting that’s over two years old on their homepage,” says Mr. Silverton. “Out-of-date material speaks to credibility, professionalism and a commitment to being better as a company. When you’re looking for a company to do business with, these things matter.”

Take stock of what you have on your site at least every two to three months, advises Mr. Morneau, to ensure the freshest news is placed front and centre.

Designing for you, not your audience

Mr. Silverton often sees companies basing site design decisions on what they like. “That’s the wrong question to ask,” he says. “What they should be asking is, does their target market like it? You need to design for your audience, not for you.”

“Quite often, companies build websites based on their own perspective instead of the users’ views,” says Mr. Morneau.

With the added benefit of traffic data, companies can constantly improve their site to give their customers what they want, he adds. He recommends businesses take the time to look at site traffic patterns to see where they can make improvements.

Forgetting about site structure and search engines

“Bad organization kills user experience,” says Mr. Silverton. “It doesn’t matter how beautiful your website is. You’re better off having great navigation and content and poor design than the other way around.”

Site structure comes back to strategy: What’s the point of your site? Once you’ve answered that question, organization becomes far easier. You may want to organize by sales process, by popularity of product, by profit margins. “It all depends on your goal,” says Mr. Silverton.

Search engine optimization (SEO) has its place too, experts agree. But what you don’t want is a site that is written entirely for that purpose. “Search engines don’t buy things, people do,” says Mr. Morneau. “You need to have the keywords that people are searching for, but you don’t need to repeat the fact that you’re a Vancouver design firm at every opportunity. As a user, that is annoying.”

Mr. Silverton agrees that SEO shouldn’t dictate design, but he suggests considering it in unison with design from the get-go. “Most companies believe SEO comes after site development, but then you’ll have to go back and make a lot of changes. It’s inefficient.

شبكة جوجل الإجتماعية… Google+

وأخيراً وبعد الكثير من النفي والتوقعات والتسريبات الإخبارية، كشفت جوجل عن شبكتها الإجتماعية والتي أطلقت عليها إسم Google+ والتي لن تتكون من مجموعة من الخدمات المنفصلة للمشاركة والمحادثة ومشاركة النشاطات ولكن أساس هذه الشبكة هو الدوائر التي هي أساس عمل هذه الشبكة.
الدوائر هو الإسم الذي إقترحته بعض الأخبار القديمة لشبكة جوجل الإجتماعية، ولكن جوجل تستخدم هذه الدوائر لتنظيم عملية المشاركة وغيرها من الأمر، حيث سيكون على كل مستخدم إنشاء دوائر مختلفة، مثلاً دائرة للعائلة وأخرى للأصدقاء وثانية لزملاء العمل وهكذا.


بعد أن تنتهي من إنشاء دوائر او مجموعات أصدقائك فإن جوجل توفر لك مجموعة من الأدوات الإجتماعية للتواصل بأشكال مختلفة، فمثلا لو كنت تريد مشاركة شيء ما او إرسال تحديث فبإمكانك إرسالها إلى دائرة أشخاص معينة، ولو أثارت مقالة ما إهتمامك او أردت الحصول على رأي أصدقائك في قطعة ما تريد شرائها فإن خدمة Sparks ستكون ملائمة جداً لك.
Hangouts خي جزء أخر من شبكة جوجل الإجتماعية وهي تسمح لك ببدأ محادثات فيديو بإستخدام الويبكام والتحادث مع أصدقائك من داخل المتصفح، كما أن جوجل تقدم خدمة أخرى مفيدة هي Huddle وهي عبارة عن خدمة رسائل جماعية بحيث ترسل رسالة واحدة تصل إلى مجموعة من الأصدقاء مرة واحدة دون الحاجة إلى أن ترسل نفس الرسالة إلى العديد من الأشخاص بالأسلوب القديم وهو مفيدة للأصدقاء الذين يريدون التواصل من أجل ترتيب إجازة نهاية الأسبوع أو حتى بين أعضاء فريق عمل واحد لمتابعة مايحدث.
جوجل ستضيف أيضا خاصية الرفع المباشرة للفيديو والصور التي تقوم بإلتقاطها إلى حسابك في Google+ وبإمكانك أن تختار الأشخاص الذي تود مشاركة هذه الصور معهم.
حتى الآن لاتبدو هذه الخدمة مشجعة، وعملية تقسيم الشبكة إلى خدماتك مختلفة تبدو غريبة، وعموما فإن جوجل لم تطلق هذه الخدمة بعد وهي متوفر لشريحة محدودة فقط وبإمكانك التسجيل من هنا للحصول على أي تنبيهات في حالة قامت جوجل بإطلاق الخدمة للجميع.

Some Web sites may not behave as expected in Internet Explorer

Internet Explorer 8 and Internet Explorer 9 include a Compatibility View feature that displays websites that were created for older browsers as they were designed to appear with Internet Explorer 7. You can enable Compatibility View in Internet Explorer or on the Web server.

• For general users and for advanced users
  
  
  Method 2: Enable Compatibility View for all websites in Internet Explorer
• For system administrators
  Method 1: Enable Compatibility View for multiple computers by using Group Policy settings
• For website content developers and for website administrators
  Method 1: Enable Compatibility View for your whole website or for specific website directories
  
  Method 2: Enable Compatibility View for specific webpages

Back to the top

For general users and for advanced users

Method 1: Enable Compatibility View for specific websites in Internet Explorer

To enable Compatibility View for specific websites that are not displayed correctly or that are not working correctly, follow these steps:

1. Open the website that is not displayed correctly or that does not work correctly in Internet Explorer 8 or in Internet Explorer 9.
2. Click the Compatibility View button that is located directly to the right side of the address bar next to the Refresh button.
   
   
   
   
   
   Or, on the Tools menu, click to select the option Compatibility View. If the Tools menu is not displayed, press ALT to display the Tools menu. 
   
   
   
   
   
   Note
   • If the Compatibility View button does not appear on the right side of the address bar, or if the command is not available under the Tools menu, you cannot use this method. You may be experiencing a different problem, or the network administrator may have used a Group Policy setting to configure the Compatibility View settings on your computer.
     • If you are using a home computer, see the "Similar problems and solutions and support information" section for alternative steps.
     • If you are using a computer in an enterprise environment, contact your administrator or the help desk.
3. If this method worked, you may have to repeat this method for each website that experiences these problems.

Note When you use this method to fix a website, Internet Explorer saves your Compatibility View setting for that website. Every time that you visit that site, Compatibility View will be used. To stop a website from running in Compatibility View, follow these steps:

1. Click Tools, and then click to select option Compatibility View.
   
   
   
2. You can also add or remove specific websites from Compatibility View without actually visiting each website.

If this method did not work, you are experiencing a different problem. See the "Similar problems and solutions and support information" section for alternative steps.

Method 2: Enable Compatibility View for all websites in Internet Explorer

You have tried Method 1 on some of these websites, and that method worked. However, you may want to enable Compatibility View for all websites. To do this, follow these steps:

1. Start Internet Explorer 8 or Internet Explorer 9.
2. On the Tools menu, click Compatibility View Settings. If the Tools menu is not displayed, press ALT to display the Tools menu. 
   
   
   
   
   
   If Compatibility View Settings is not available, the network administrator may have used a Group Policy setting to configure the options for you. Contact your administrator or the help desk.
3. Click to select the Display all websites in Compatibility View check box, and then clickClose. 
   
   
   
4. Visit several websites that were not displayed correctly or that were not working to see whether the problem is now resolved.

If this method did not work,you are experiencing a different problem. See the "Similar problems and solutions and support information" section for alternative steps.

For system administrators

Method 1: Enable Compatibility View for multiple computers by using Group Policy settings

To enable Compatibility View for multiple computers in an enterprise environment, administrators can use the following new Compatibility View Group Policy settings that are available for Internet Explorer 8 and for Internet Explorer 9:

• Turn on Internet Explorer 7 Standards Mode: This setting enables Compatibility View for all websites and prevents users from enabling or disabling Compatibility View for any websites.
• Turn off Compatibility View: This setting disables Compatibility View for all websites and prevents users from enabling or disabling Compatibility View for any websites.
• Turn on Internet Explorer Standards Mode for Local Intranet: This setting disables Compatibility View (enables Standards Mode) for all intranet websites.
• Use Policy List of Internet Explorer 7 sites: This setting lets administrators add specific sites that must be viewed in Compatibility View. Users can add or remove sites from the list. However, they cannot remove sites that are specified by the administrator.
• Turn off Compatibility View button: This setting prevents users from using the Compatibility View button to try to fix websites.

These settings are available for both Users and Computers in the following location for each site, domain, and organizational unit:

Administrative Templates/Windows Components/Internet Explorer/Compatibility View

For website content developers and for website administrators

The following information is intended for Web content developers and for website administrators. To give you time to transition your Web content to Internet Explorer 8 Standards mode, you can specify that your content should always be viewed in Compatibility View. To enable Compatibility View for your whole website, use Method 1. To enable Compatibility View for specific webpages, use Method 2.

Note When you use either of these methods, Internet Explorer 8 displays your whole site or a specific page in the same manner that Internet Explorer 7 displays the website. Specifically, Internet Explorer will render pages either in Internet Explorer 7 Standards (Strict) mode or in Internet Explorer 5 (Quirks) mode, depending on the Doctype element declaration.

These methods should address most display and functionality issues. However, your browser detection code may also have to be updated on your site.

To learn more, visit the following Microsoft website:

http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/DevelopersExisting.htm

To verify that you have installed the tag correctly on your site, follow these steps:

1. If you do not have Internet Explorer 8 installed, you can download it by visiting the following Microsoft website:
   http://www.microsoft.com/windows/internet-explorer/download-ie.aspx
2. Browse your site in Internet Explorer 8 Standards mode, and verify that you do not encounter the issues that are described in the "Symptoms" section.

For more information about document compatibility, visit the following Microsoft websites:

http://msdn2.microsoft.com/en-us/library/cc288325(VS.85).aspx

For more information about Cascading Style Sheets Compatibility in Internet Explorer, visit the following Microsoft website:

http://msdn2.microsoft.com/en-us/library/cc351024(VS.85).aspx

Method 1: Enable Compatibility View for your whole website or for specific website directories

To enable Compatibility View for your whole website or for certain website directories, include the following custom HTTP header for all requests to your site or directory.

X-UA-Compatible: IE=EmulateIE7

To do this in Internet Information Services (IIS) on a Windows server-based Web server, you must either add a custom HTTP response header in IIS or configure the Web.config file for the appropriate directory.

Add the custom HTTP response header in IIS

To add a custom HTTP response header at the website level, at the folder level, or at the virtual directory level in IIS, follow the steps for the version of IIS that you are using.

IIS 7 on a Windows Server 2008-based Web server

1. Start IIS Manager. To do this, click Start, click Run, type inetmgr, and then click OK.
2. Under Connections, double-click the server that you want, and then double-click Sites.
3. Click the website, the folder, or the virtual directory where you want to add the custom HTTP response header.
4. Under <website name> Home, double-click HTTP Response Headers in the IIS section.
   
   Note The <website name> placeholder refers to the name of the website.
5. Under Actions, click Add.
6. In the Name box, type X-UA-Compatible.
7. In the Value box, type IE=EmulateIE7.
8. Click OK.

IIS 6 and earlier versions

1. Click Start, click Run, type inetmgr.exe in the Open box, and then click OK.
2. Expand the server that you want, and then expand Web Sites.
3. Right-click the Web site, the folder, or the virtual directory that you want, and then clickProperties.
4. On the HTTP Headers tab, click Add under Custom HTTP headers.
5. In the Custom header name box, type X-UA-Compatible.
6. In the Custom header valuebox, type IE=EmulateIE7.
7. Click OK two times.

Add the custom HTTP response header in the Web.config file 

To add this header to the Web.config file, create or revise the Web.config file as follows.

<?xml version="1.0" encoding="utf-8"?>
  <configuration>
     <system.webServer>
           <httpProtocol> 
               <customHeaders> 
                    <clear /> 
                    <add name="X-UA-Compatible" value="IE=EmulateIE7" /> 
               </customHeaders> 
           </httpProtocol> 
     </system.webServer> 
</configuration>

Note Add this new or revised Web.config file to each Web directory in which you want to use compatibility mode.

Method 2: Enable Compatibility View for specific webpages

Use the <Meta> tag

To enable Compatibility View for specific webpages, use the following <Meta> tag after the <Head> tag on the page.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This tag overrides any HTTP header declaration in the HTML for a particular webpage.

The following sample code shows how to use this Internet Explorer 7 compatibility mode tag on a per-page basis.

<html>
 <head>
 <!-- Use IE7 mode -->
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 <title>My Web Page</title>
 </head>
 <body>
 <p>Content goes here.</p>
 </body>
 </html> 

Important To make sure that the compatibility meta tag is used correctly, we recommend that the compatibility meta tag is positioned immediately after the <Head> tag and before any other metadata. Failure to correctly position the compatibility meta tag may cause Internet Explorer 8 to ignore the value and to continue to render in Internet Explorer 8 Standards mode.

Use HTTP response headers

If you use ASP.NET themes, use an HTTP response header to enable Compatibility View. To enable Compatibility View for an entire site, use an HTTP response header in the Global.asax file. If your site uses the Single-File Page model or the Code-Behind Page model, use an HTTP response header on each page.

Sample code

• Global.asax
  
  

  void Application_BeginRequest() {
      Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7");
  

• Single-File Page model
  
  

  <html xmlns="http://www.w3.org/1999/xhtml">
      <% Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7"); %>
      ...
  </html>
  

• Code-Behind Page model
  
  

  protected void Page_Load(object sender, EventArgs e) {
      Response.AppendHeader("X-UA-Compatible", "IE=EmulateIE7");
  }
  

If you cannot use HTTP response headers in your environment, you can use code to move the <Meta> tags immediately after the <Head> tag. The following sample code shows how to do this in the Global.asax file or in an HTTP module.

void Application_PreRequestHandlerExecute() {
    var page = Context.Handler as Page;
    if (page != null) page.PreRenderComplete += delegate {
        var head = page.Header;
        if (head != null) {
            var q = from Control c in head.Controls where c is HtmlMeta select c;
            foreach (var c in q.ToArray().Reverse()) {
                head.Controls.Remove(c);
                head.Controls.AddAt(0, c);
            }
        }
    };
}

Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure. However, they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements.

For more information about how to define document compatibility in Internet Explorer, visit the following MSDN website:

http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

Discover the F12 developer tools in IE9

Katrien De Graeve, developer evangelist for Microsoft, explains how the F12 developer tools in Internet Explorer 9 make it a lot easier to hack your way through website issues

The developer tools that come with Internet Explorer 9 (F12 devtools as we call them affectionately) are a powerful aid to solving compatibility, network, script profiling and performance issues; debugging code; managing HTML and CSS; editing on the fly and validating markup; and last but not least inspecting HTML, CSS and JavaScript. Personally, the F12 devtools have already helped me a lot in understanding how some sites implement some of the new HTML5 features such as <canvas>, <video>, SVG and more.

Although the developer tools have been around in some form since Internet Explorer 7, with IE9 we get some real extra goodness. That includes things like the Network tab, which lets you see what is sent to the server, request headers, response body, response codes, inspect cookies, MIME types, Ajax and Activex calls, get information on the call initiator and much more. Other new additions are the Console tab and the User Agent string changer.

Enabling F12 developer tools

As you might expect, it’s as simple as pressing F12. Now that’s an easy one to start right? You may also use the Tools button and then choose 'F12 developer tools'. You can minimise to the bottom, pop out the window and use Windows 7 keys to align the IE9 and developer tools windows side by side (Windows key + left/right arrow).

Testing on multiple browsers

Every now and then we come across sites that seem to not be rendering well. Sometime it’s a site not optimised for IE9 standards mode, but sometimes it’s simply a site rendering badly in any browser. Here are a few tips on how F12 developer tools can help you test rendering in different IE versions and even act as another browser to the server.

User Agent string changer

When coming across any site issues that I suspect are related to compatibility, the UA string changer comes to my rescue. It’s one of my favourite features in the devtools I might say. UA string or Browser mode impacts the UA string that is sent to the web server. Therefore, IE9 can act as another browser and receive another set of HTML and CSS code from the server.

You can access it by choosing Browser Mode in the menu, or going to Tools > Change user agent string.

One of the sites I ran into that’s giving me a weird behaviour in IE9 is www.laredoute.be. Adding anything to the shopping cart returns a 500 error page from the server. This is not just rendering, something is really wrong here!

So, time to investigate with the UA string changer. For example I can force the server to send down content as if I was using IE7:

Or, maybe I can just check the same page as I was using Mozilla Firefox (or Google Chrome for that matter):

Sure enough, it’s not rendering causing the issue but really some kind of IE specific browser test that is failing. Reloaded the page set to Firefox UA string and now adding to the items to the cart is no problem any more!

Hint: find what is causing the issue on IE9 by checking the Console tab…

You’ll notice browser detection code is often the culprit: UA string changer will allow you to pinpoint and find a solution.

Adding a custom UA string

You might have noticed I have a “WP7 Emulator” UA string in my list. This is simply a custom UA string I have added to test some sites on how they will render in the Windows Phone 7 browser.

To add your own UA strings go to Tools > Change user agent string > Custom.

Document mode

You can also change the document mode, which controls whether IE9 should use the most recent behaviour for HTML, CSS, DOM and JavaScript.

Let’s take an example of a site using the <video> tag. What happens if the user has IE8? Document mode makes it easy to test. (Test it yourself and go to www.dailymotion.com/html5.)

Here's a page showing video in standards mode, taking advantage of the <video> tag:

Choosing IE8 document mode makes the browser use IE8 behaviour. Since IE8 does not support the <video> tag, it renders the fallback text. Notice how the doctype directive has been commented out automatically in this rendering mode.

  Note that document mode can also be enforced into IE7 or IE8 mode via a meta http-equiv attribute “X-UA-Compatible”.

You can learn more about the UXA compatibility tag here: msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx.

Inspecting and editing HTML and CSS

The HTML tab offers you capabilities to inspect HTML in the document, search through the elements, see applied CSS rules, edit and save back the file locally.

Selecting an HTML element is done by using the Select icon (or Ctrl + B), or by using the search box.

Notice I selected the <ul> that creates the list on the left. The element is selected in the DOM tree and its CSS Style rules applied to the current element are shown on the right. Here you can edit CSS rules directly, and check/uncheck the boxes to have rules enabled or disabled.

Trace styles shows an alphabetical list of CSS rules applied to the current object, taking into account CSS cascading. This is very useful in identifying why a certain rule is not being executed, for example due to a cascade of rules.

The Layout tool is extremely useful in viewing any settings related to padding, margins, offset for any element. Thanks to this, there are no more border pixels set in debug mode to help me with borders and margins!

The Attributes tool is useful for directly adding or editing the attributes of the selected element.

Finally, the CSS tab allows you to view all the CSS rule of all inline and linked style sheets. Here you can also search, edit, enable/disable styles and save back to a local file.

JavaScript and Profiling

The JavaScript tab gives you access to all the scripts loaded by the current page. You get tools like the Console for direct script input, Watch, Locals, Call Stack and Breakpoint. Let’s take a look using disneydigitalbooks.go.com/tron/ as an example.

View the desired script by choosing from the dropdown:

Tip: make minified script readable again by choosing Format JavaScript, a super helpful little tool.

You can add a breakpoint by right-clicking in the desired line of code. Run and debug by using the context toolbar that allows you to Run, Break, Step into, Step over and Step out of the code, just like you might be used in Visual Studio or other IDEs. Even the keyboard shortcuts are the same.

Tip: you can even add a breakpoint only to hit when a certain condition is true (conditional breakpoint). Right-click any breakpoint and choose Condition. Enter an expression; if evaluated to true, the breakpoint will hit.

Logging in the console, no more alert()

Who’s never used alert()for debugging a piece of script? I will admit using it a few times when no one was watching. Today, the logging API comes to rescue to capture messages in your code. Notice how the Tron website writes several messages to the console:

So you say performance is your thing?

Another not-to-be missed feature in the script section is the Profiling tool, which helps us identify and fix performance issues quickly. Click Start Profiling to record the session. After recording, the profile report can be viewed by Functions or Call Tree. Personally I prefer the Call Tree, which provides a hierarchical view of the calls and lets me drilldown further.

When you drilldown in the call tree, you can double-click loaded functions, which will jump you right into the correct code line on the original file. Pure goodness.

The Network tab

Last but not least, you can now inspect network traffic with the new Network tab. To capture network traffic for a specific page, including Ajax calls, press the Start Capturing button. By default, network capture is set to off to prevent extra resource consumption.

The Summary view gives you all requests made by the page including calls from JavaScript.

Double-click any of the requests to go into detailed view. Here you can analyse Request headers and body, Response headers and body (in this case, jQuery script), any Cookies for the request, Initiator and Timings.

Initiator deserves a special mention. It gives you more details as well as direct linking to the code line from which the request was initiated.

And that’s it for our glimpse at all the goodness in F12 devtools. Try out the tools yourself and discover more hidden features!

Resources:
You can learn more about the developer tools on MSDN: msdn.microsoft.com/en-us/library/dd565626(VS.85).aspx.