WebAssembly in Action

Author of the book "WebAssembly in Action"
Save 40% with the code: ggallantbl
The book's original source code can be downloaded from the Manning website and GitHub. The GitHub repository includes an updated-code branch that has been adjusted to work with the latest version of Emscripten (currently version 3.1.44).
Showing posts with label Internet Explorer. Show all posts
Showing posts with label Internet Explorer. Show all posts

Friday, March 4, 2011

Document Compatibility Modes in Internet Explorer 9

Document compatibility determines how Internet Explorer renders your web page and how the JavaScript will work.

IE 8 and later will first determine how to render a page based on the X-UA-Compatible header which I'll discuss in a moment.

If the X-UA-Compatible header is not present, IE then looks for the DocType directive to determine how to render the page.

If the DocType directive is missing or does not specify a standards-based document type then the web page is rendered in IE 5 mode (Quirks mode of IE 7).

The recommended DocType in IE 9 is the HTML 5 DocType which will cause IE 9 to use Standards mode:
<!DOCTYPE html>

In my reading on the DocType directive I ran across an MSDN article that indicated that IE will also switch on Standards mode if the DocType includes a URI.

In my testing, including the URI in a DocType does appear to cause IE 9 to use Standards mode. Being able to use Standards mode even if the HTML is not HTML 5 allows us to make use of the latest JavaScript functionality in IE 9.

The following is an example of an HTML 4 DocType that causes IE 9 to use Standards mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


If a web site does not work correctly in Standards mode it's recommended that the site be updated to use the most up-to-date features.

There are times, however, when you may want to force a web site to display using a specific document compatibility mode.

An example situation where you may want to force a web site to display using a specific document compatibility mode could be that perhaps you have a product that is live and you don't have time to upgrade it before people start using the latest IE browser.

Even when a web site's JavaScript has been written to do feature detection for W3C compliant features and only fall back to IE specific features if the W3C feature is not available, IE 9 still throws some curve balls.

One curve ball that IE 9 throws is that, even in Standards mode, an MSXML ActiveX object is returned rather than a DOMParser object when making an XMLHttpRequest. The resulting XML document is incompatible with any XML documents that are created using the DOMParser.

The workaround is to return XML as text and turn the responseText value into an XML document object by using the DOMParser (the following MSDN article explains this process a bit more: http://blogs.msdn.com/b/ie/archive/2010/10/15/domparser-and-xmlserializer-in-ie9-beta.aspx).

There are several options available to cause IE to use a document compatibility mode other than IE 9 Standards mode.


Compatibility View button

The first option for changing the document compatibility mode is that an end user can click the Compatibility View button which will cause IE 9 to switch to IE 7 Standards mode.

(click to view the image full size)


The web site is listed in a Compatibility View list until the user removes the web site from the list by either clicking the Compatibility View button again or uses the Compatibility View Settings dialog.

You can find the Compatibility View Settings dialog by pressing Alt on your keyboard to show the menu bar and then select the Tools, Compatibility View settings menu item.

The Compatibility View Settings dialog allows the user to cause all Intranet sites, as well as all web sites, to use the Compatibility View setting by means of two checkboxes at the bottom of the dialog.

(click to view the image full size)

If the Compatibility View Settings checkboxes are checked, and you are viewing one of the respective types of web sites, you will not see the Compatibility View button in the address bar.


IE 9 Developer Tools

A temporary way to change the document compatibility mode of the browser is through the IE 9 Developer Tools.

You can display the Developer Tools by pressing F12.

Changing the selection of the Browser Mode or Document Mode drop-downs causes the web page to refresh and render according to the selected modes:

(click to view the image full size)

This technique is helpful if a developer wants to test how a web page renders in IE 9, IE 8, and IE 7 without having to switch to another computer since you can't install Internet Explorer versions side-by-side.

This saves a lot of time when trying to debug why something suddenly started breaking in IE 9 that didn't break in IE 8 for example.

In my testing so far, these settings appear to cause IE 9 to behave as expected but it's not a replacement to testing with the actual IE 7 and IE 8 browsers.


X-UA-Compatible meta tag

As a web developer you may decide that a page needs to be rendered using a certain document compatibility mode but only certain pages have this requirement.

You can include an X-UA-Compatible meta tag on one or more pages within the web site to tell IE how to render the page.

The meta tag needs to be the first tag in the Head section of a page following only the Title tag as in the following example:
<head>
<title>The Page Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</head>

Available values for the X-UA-Compatible setting are:
  • 5 (renders as if IE 7 in Quirks mode which is very similar to how content was rendered in IE 5)
  • 7, 8, and 9 (these ignore the DocType if present and display as if in Standards mode of the browser specified)
  • EmulateIE7, EmulateIE8, EmulateIE9 (these take the DocType into consideration and displays using Standards mode or Quirks mode of the browser specified)
  • Edge (this tells the browser to use the highest mode available and is not recommended in production environments)


The X-UA-Compatible value as an HTTP Response Header

For a small web site simply dropping in the X-UA-Compatible meta tag is not a large task but if you have a web site with hundreds of pages, adding and maintaining the meta tags would be quite the task.

The better approach if you need to include the X-UA-Compatible value for an entire web site is to include the value as an HTTP Response Header


In conclusion

It is recommended that you always try to make sure your web pages work correctly in the latest versions of IE.

There are times, however, when you may need to temporarily tell Internet Explorer to display a page or website in a document mode used by a previous version of the browser which makes being able to specify the document compatibility modes a handy feature to have.

The following is a link to an MSDN article on Defining Document Compatibility if you would like to read more on the subject:http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx
Posted by Anonymous at 12:04 PM 2 comments
Labels: , , , , , , , , ,

Thursday, July 22, 2010

HTML 5 - Web Storage


To avoid any confusion, HTML 5 Web Storage is not the IndexedDB API which is also an HTML 5 related feature that most browsers now support.

HTML 5 Web Storage is a form of browser storage that is similar to cookies but with several advantages.


Storage Size

Cookies allow you to store a small amount of data (maximum of 4 KB per cookie) in the browser. For most web sites this is more than enough room and not enough reason to switch storage mechanisms. If your web site/web application has a need for more than 4 KB of space for storage in the browser then web storage might be an option for you.

The W3C specification for web storage allows each browser to determine how much storage space to allow by default but suggests a minimum of 5 MB. The specification also indicates that the browser is permitted to prompt the user to increase the storage space if more is needed.

Web storage in Internet Explorer is reported to be 10 MB while other browsers, like Firefox and Opera, have the size set to 5 MB.


Network Latency

Another downside to cookies is that they are passed back-and-forth with every web request. Having this data available on the server-side is sometimes handy but one can work around not having this data using other means (URL/Post parameters, AJAX request, etc).

For the most part, cookies are passed back-and-forth between the browser and the server and are never even used by the server-side code. They simply add to the bandwidth needed and cause the web requests to slow down because they need to transmit more data.

Web storage, on the other hand, is local to the browser and is not passed back-and-forth to the server. This results in faster web requests because less data needs to be passed around.


Browser Support

One of the nicest things about web storage is that it is already available in most browsers including Internet Explorer 8.

For the most part, the functionality, of the web storage objects, is very similar in all browsers with the exception of the storage event in Internet Explorer compared to the other major browsers. The storage event is discussed later in this post.


Web Storage Object Types

There are two types of web storage objects that sit within the window object called sessionStorage and localStorage.

The web storage objects are basically a list of key/value pairs.


Test for browser features

Before we dig too far into web storage it is important to remember that even though web storage is included in the latest release of all major browsers, it is not necessarily in older browsers that might be used when visiting your site or using your web application.

When using a feature that is not in older browsers, it is very important to test if the feature exists first before trying to use it. Otherwise, someone visiting your web site might not have a very pleasant time due to JavaScript errors or things just not working.

Testing to see if the web storage objects exist will tell you if the browser supports that particular functionality. In this case, since there are two different storage objects, it's best to test for their existence separately as in the following example:

// Check if the sessionStorage object exists
if (window.sessionStorage) {
g_bBrowserSupportsSessionStorage = true;
}

// Check if the localStorage object exists
if (window.localStorage) {
g_bBrowserSupportsLocalStorage = true;
}


Differences between sessionStorage and localStorage

Each window/tab gets its own copy of a sessionStorage object which allows for the storage of key/value pairs that are specific to the current window.

One thing to note about sessionStorage objects is that if you open a window from the current window, the sessionStorage object that is created for the new window is a clone of the sessionStorage object of the window that opened it. The sessionStorage objects are no longer in sync after the new window has been opened but this is something to be mindful of if you find values in the new window's sessionStorage object that you were not expecting.

With localStorage, each origin (SomeFreeWebSiteHost.com for example) gets a single copy of a localStorage object that is shared by all windows/tabs from that origin. This has the advantage that multiple windows of your web site/web application can easily share data but that ease of sharing could result in security concerns if you are not aware of how this object is shared.

The sessionStorage key/value pairs exist only while the browser is open. The moment you close the browser, the sessionStorage key/value pairs for your window are cleared.

With localStorage, the key/value pairs stick around even if the browser is closed and re-opened.


Web Storage Object - Methods and Properties

Both types of web storage share the same functions and properties:
  • setItem(Key, Value)
  • getItem(Key)
  • removeItem(Key)
  • clear()
  • key(iIndex)
  • length

setItem adds the key/value pair to the storage object if the key doesn't already exist in the storage object. If the key already exists in the storage object, the value is simply updated.

getItem returns the value from the storage object for the key specified. If the key does not exist in the storage object, null is returned.

removeItem removes the item specified from the storage object.

clear removes all items from the storage object

key returns the name of the item at the zero-based index specified. Returns null if the index doesn't exist.

length returns a number indicating how many key/value pairs are in the storage object


Shorthand methods

Since web storage is implemented in JavaScript, there are shorthand methods that can be used instead of calling setItem or getItem directly.

The following examples are all using the sessionStorage object but you can swap that for localStorage and they will still work.

The following examples are different ways that one could call setItem on the sessionStorage object:

// The method outlined in the W3C spec
window.sessionStorage.setItem("OurKey", "Some Value");

// Using array notation
window.sessionStorage["OurKey"] = "Some Value";

// Using dot notation
window.sessionStorage.OurKey = "Some Value";

The following examples are different ways that one could call getItem on the sessionStorage object:

// The method outlined in the W3C spec
var sValue = window.sessionStorage.getItem("OurKey");

// Using array notation
var sValue = window.sessionStorage["OurKey"];

// Using dot notation
var sValue = window.sessionStorage.OurKey;

The following are examples of ways to remove items from the sessionStorage object:

// Remove a single item using the method outlined in the W3C spec
window.sessionStorage.removeItem("OurKey");

// Remove a single item using the delete keyword (same as above, just
// with a different syntax)
delete window.sessionStorage["OurKey"];

// Remove all items
window.sessionStorage.clear();


Storage Events

According to the W3C specification on web storage, whenever a storage object is modified (setItem, removeItem for example) a 'storage' event is to be passed to all windows that the modification applies to.

The storage event does not bubble and cannot be canceled.

When you modify the sessionStorage object, the modification only applies to the current window. The weird thing is that only Internet Explorer 8 (and IE 9 Preview 3) receives a storage event call when the sessionStorage object is modified.

When you modify the localStorage object, the modification applies to all windows/tabs of that window's origin and as a result, other windows that happen to be open from the same origin will receive the event too.


Attaching to the Storage Event

Internet Explorer 8 implements the storage event differently than all other browsers, including IE 9 Preview 3, in that the event is passed to the document object rather than the window object. This difference might be due to the fact that the Web Storage specification is still a work in progress and Internet Explorer may have implemented the feature only to have the specification change to the window object (this is just a guess as to what might have happened - I really don't know but I'm giving Microsoft the benefit of the doubt here).

Getting around the Internet Explorer 8 storage event issue described above isn't too hard since Internet Explorer 9 Preview 3 now supports addEventListener. The following is an example of attaching to the 'storage' event that will also work with IE 8:

// Add the event listener (W3C browsers, including IE 9,
// use addEventListener)
if (window.addEventListener) {
// Listen for the storage event (triggered when the storage is
// modified - setItem, removeItem, clear)
window.addEventListener("storage", OurStorageListener, true);
}
else if (window.attachEvent) { // IE 8 and previous...
// Listen for the storage event on the DOM object
document.attachEvent("onstorage", OurStorageListener);
}

The above example might not be the best approach if other, non-IE browsers, also have the attachEvent method.


Receiving the Storage Event

Receiving the storage event is quite straightforward once you've attached to the event. All you need is a function that receives the event parameter as in the following example:

function OurStorageListener(e) {
// Take the event details and put it into a string
var sValue = ("Key: " + e.key +
" ...New Value: " + e.newValue +
" ...Old Value: " + e.oldValue +
" ...URL: " + e.url +
" ...Storage Area: " + e.storageArea);

// Display the event details to the screen
document.getElementById("divResults2").innerHTML = sValue;
}

This event will be called by all browsers that implement the 'storage' event when the storage object is modified if that object also applies to the window that has registered for the event.

I mentioned this earlier but I'll mention this again just in case, modifications to the sessionStorage object currently only trigger the storage event in Internet Explorer 8 and 9 Preview 3. The event is not currently triggered by any other browser from what I can tell even though the W3C specification seems to indicate that it should be triggered even for the sessionStorage object.

One thing to note about the above example is that not all browsers that support the storage event actually support all the storage event properties. Internet Explorer 8, for example, only supports the url property.

In the browsers that do support the storage event properties the following properties are available:

key is the key being changed. In our examples above this would be 'OurKey'. This will be null if the event was a result of the clear function being called on the storage object.

newValue is the value specified if a setItem call was made. If a removeItem call was made, this value will be null. This property will also be null if the clear function was called on the storage object.

oldValue is the old value if the key already existed when setItem was called. If setItem was called and the item did not already exist, this value will be null. This property will also be null if the clear function was called on the storage object.

url is the address of the document who's storage object was affected

storageArea represents the storage object that was affected (a reference to the storage object that was modified to give you easier access to the values within the object as well as the ability to modify items if need be). This way you don't have to guess if it was a session or a local storage object that was modified since you have direct access to the object that was modified.


Some closing thoughts on Web Storage

According to the W3C specification on web storage, there is a suggestion that web browsers can optionally have the web storage functionality turned off (perhaps as a security feature and only on for white listed sites). If you try to access a storage object when web storage is off, an exception could be raised.

There is also the possibility, if your web site/web application is storing a large amount of data that you will exceed the limit given by the browser for your window/origin. This limit is quite high (5 MB in most cases and 10 MB for Internet Explorer) but, if it is hit, it may result in an exception being thrown as well.

For more detailed information on the HTML 5 Web Storage specification you can view it by clicking on the following link:
http://www.w3.org/TR/webstorage/

Posted by Anonymous at 4:44 AM 0 comments
Labels: , , , , , , , ,

Friday, July 16, 2010

Microsoft Project Server 2010


Overview

Microsoft Project Server 2010 is a project management application that sits within Microsoft's SharePoint Server 2010.

You can connect to Project Server 2010 using Project Professional or your Internet Explorer browser.

You can only use Internet Explorer to connect to Project Server 2010. If you try a different browser you will see a page indicating that you have been denied access. Another thing to note is that you must be using Internet Explorer 7.0 or higher.

The following screen shot is what you see if you use a non-Internet Explorer browser to connect to Project Server 2010. In this case Firefox was used.

(click to view the image full size)


Project 2007 Compatibility Mode

When connecting to Project Server using Project Professional it is usually the case that you would need to use the same version of Project Professional as the instance of Project Server that you are connecting to.

For Project Server 2010, if you upgraded from Project Server 2007, you can use Project Professional 2007 to connect by default. This is because when you upgrade from Project Server 2007 to Project Server 2010 a compatibility mode flag is turned on by default.

While the Project 2007 Compatibility Mode setting is on none of the new features of Project Server 2010 will be available.

Once all of your managers are using Project Server 2010 and all of your applications, that run on top of Project Server, are Project Server 2010 compliant, you can turn off the Project 2007 Compatibility Mode setting in order to enable the new Project Server 2010 features.

To turn off the Project 2007 Compatibility Mode setting, log into Project Server 2010 and click the 'Server Settings' link which is on the left-hand menu. Under the Operational Policies section click the 'Additional Server Settings' link. You will want to uncheck the checkbox for the 'Enable Project 2007 Compatibility Mode' item to turn off Project 2007 Compatibility Mode.


In previous versions of Project Server you could do some tasks using the browser but for the most part you needed to use Project Professional. This is no longer the case in Project Server 2010 as many tasks can be done using only the browser. In fact, this entire discussion will use only the browser.

When you first log into Project Server 2010, you will see a page similar to the following screen shot:

(click to view the image full size)


Resource Center

One of the things that you will need in your Project Server database is resources.

To add a resource, click the 'Resource Center' link in the left-hand menu.

When you arrive in the Resource Center you will have a ribbon bar at the top of the view. On the ribbon bar is a 'New Resource' button. Clicking the 'New Resource' button will bring you to a view allowing you to specify details about the resource.

(click to view the image full size)

If you simply wish to edit a resource, check the checkbox next to the item in the grid and then click the Edit Resource button.

Resources do not have to be employees but, in this case, we want employees. A resource can be set up to have the ability to log into Project Server and the security access, for each resource, can be configured to only the items that resource should have access to.


Project Center

To create a project, navigate to the Project Center by clicking on the 'Project Center' link in the left-hand menu. When you arrive to the Project Center you will see a ribbon bar as well as a grid of existing projects.

(click to view the image full size)

To create a new project using only the browser (there is an option to create the project using Project Professional if you would prefer that approach), click New and from the drop-down select 'Basic Project Plan'.

(click to view the image full size)

When you create a new project you are first brought to a view where you enter the project's name, an optional description, the project's start date, and the project's owner. Click the 'Save' button on the ribbon bar when you're satisfied with the project's information.

(click to view the image full size)


Editing the project information for an existing project...

The project information can be changed later, if need be, by selecting the project row in the grid of the Project Center, clicking the 'Open' button on the ribbon bar and selecting the 'In Project Web App for Editing' menu item.

If you simply click on the project's link in the grid of the Project Center, the project will be opened read-only and you will need to click the 'Edit' button on the Ribbon bar in order to edit the details.

Once the project is open, you can click on the 'Project Information' link on the left-hand menu to edit the project's details.

(click to view the image full size)

Once the project has saved, you will be taken to the 'Schedule Tools' portion of the project

(click to view the image full size)

To create tasks it's just a matter of clicking in the Task Name cell, of a blank row, and type in the task's name. When done press Enter, Tab or click off the row.

(click to view the image full size)

Once you have all the task rows created you can indent one or more of the rows if you would like some tasks to be sub-tasks of a previous task.

To create a sub task, simply select one or more rows and click the Indent button (or press Alt + Shift + Right arrow).

(click to view the image full size)

Now that we have the basic structure of the project, we need to specify how much work each task is expected to take in order to complete it. This is simply a matter of typing in an hour value in the Work column of each row.

By default each task is set to Manually Schedule mode. It is generally easier to let Project Server handle determining the start and finish dates by using the Auto Schedule mode.

To switch to the Auto Schedule mode, select all rows that you wish to be auto scheduled and then click the Auto Schedule button on the ribbon bar.

(click to view the image full size)


Changing the default scheduling behavior of new tasks...

Rather than having to adjust each row of each project you create to do Auto Scheduling rather than the default Manual Scheduling, you can actually change the default scheduling setting for new tasks.

To change the default scheduling setting for new tasks, click on the 'Server Settings' link on the left-hand menu.

Under the Operational Policies section click on the 'Additional Server Settings' link. There will be a section on the page called 'Task Mode Settings' that allows the default to be changed for new tasks from 'Manually Scheduled' to 'Automatically Scheduled'.


Now that we have the list of tasks created, it is generally a good idea to specify if a task is dependent on another task (to only start when the previous task finishes).

This way, if one task finishes earlier than expected or takes longer than expected, the start date of the tasks that follow will be adjusted accordingly.

To cause a task to be dependent on another task, you link them together by selecting the task rows in the order you want the tasks to be linked and then you click the link button on the ribbon bar.

(click to view the image full size)

One thing you may notice when using Internet Explorer compared to Project Professional is that some changes only show themselves after a save (things are not automatic in some cases which might simply be a bug in the implementation of the web based solution).

Now that we have our project and tasks created, it would be nice to assign some resources to the tasks. Clicking in the Resource Names cell, however, has no effect at this point.

Even though we do have resources in the system, the reason why they don't show up in the Resource Names cell, when we click in the cell, is because we don't yet have a team built.


If you've been following along building your own project, save your changes before we go any further.


Teams

Each project maintains a team of resources that will be working on the tasks within the project.

If a resource is not part of the team, for the project, the resource will not show up when assigning resources to the project's tasks.

To create a team click on the Project tab of the ribbon bar and then click the 'Build Team' button.

(click to view the image full size)

The Team view allows you to assign resources to the team that will be working on the current project.

Select the resources from the list on the left and click the 'Add' button to assign them to the project's team.

When you're satisfied with the changes to the team, click 'Save & Close' on the ribbon bar to be taken back to the Schedule Tools section of the project.

(click to view the image full size)

Once we're back in the Schedule Tools section of the project, we can go to the Resource Name column and click in the cells of the grid.

Now a drop-down of all resources, that are part of this project's team list, will be displayed and we can choose one or more resources per task.

(click to view the image full size)

Now that we have our project created and resources assigned we need to make the project public by publishing it.

To publish the project all you have to do is click the 'Publish' button (next to the Save button) on the ribbon bar.


Close the Project

When dealing with Project Professional, closing a project comes naturally when you close the application. With the web based Project Server solution, that is not an obvious need.

If you don't close the project, the project will remain checked out to you. An administrator could force the check in but that's a lot more hassle than it's worth. It's better to just close and check in the project when you finish working with it.

To close and check in the project switch over to the Project tab of the ribbon bar and click the Close button. When prompted you can choose if the project is to be checked in or not.

(click to view the image full size)



In Closing

So that gives a basic run through the process of creating resources and projects within Project Server 2010 using nothing but the Internet Explorer browser.

There is much more to Project Server 2010 than what I went over in this post but I hope this helps you get started.
Posted by Anonymous at 7:32 AM 0 comments
Labels: , , , , , , ,

Sunday, June 20, 2010

JavaScript Debugging with Internet Explorer 8

Sometimes having access to the Visual Studio IDE is not possible for debugging JavaScript in a web application.

One scenario could be that an issue is only presenting itself on a client machine and you're unable to reproduce the steps locally. Perhaps your JavaScript code is being dynamically generated preventing you from setting a breakpoint in your source JavaScript.

In the cases where the Visual Studio IDE is not an option for the debugging of JavaScript, being able to debug the JavaScript code directly in the browser is very helpful.


Internet Explorer 8 - Developer Tools

Internet Explorer 6 and 7 had access to an add-on toolbar known as the 'Internet Explorer Developer Toolbar.' The add-on toolbar allowed one to view HTML markup, CSS, inspect the DOM, and more.

As of Internet Explorer 8, the add-on toolbar's functionality is now built right into the browser and is now known as the 'Internet Explorer Developer Tools.'

To access the Developer Tools you can either click on the 'Tools, Developer Tools' menu item or you can press F12.

The F12 key is important to know when you need to inspect a pop-up window that does not have a menu bar.


For the purpose of this discussion we're only going to focus on the JavaScript debugging aspect of the Developer Tools but I recommend looking into the other features that are available because they can prove to be useful in your day-to-day web development efforts.

When you first launch the developer tools you will see a window displayed similar to this:

(click to view the image full size)


Since we wish to do JavaScript debugging, we need to switch to the Script tab:

(click to view the image full size)

By default, the information displayed is the markup of the page itself.

If you are following best practices for web development your JavaScript code should be located in a separate file.

To the right of the 'Start Debugging' button is a drop-down that lists all JavaScript files that are currently loaded. Select the JavaScript file, from the list, that contains the code you wish to debug.

(click to view the image full size)


Modern JavaScript files are no longer just a few lines and having the ability to search for a specific item in a file is very important. After a bit of searching, I realized the answer was right before my eyes. You will find a search box on the tab bar at the far right:

(click to view the image full size)


Once you find the code that you wish to debug you can set a breakpoint by clicking in the margin. You can also set the breakpoint by placing the cursor on a specific line and then pressing F9 or by right-clicking on a line and selecting the 'Insert Breakpoint' context menu item.

(click to view the image full size)

Now that you have the breakpoint set, you need to tell the Developer Tools that you wish to start debugging. You do this by clicking on the 'Start Debugging' button on the toolbar.


Once you start debugging, the next time your breakpoint is hit, the developer tools will bring you to that point allowing you to inspect variables and step through the code.

The toolbar contains some buttons to help with the stepping into, over, and out of code. You can also use keyboard shortcuts rather than the toolbar buttons (Step Into is F11, Step Over is F10, and Step Out is Shift + F11).

(click to view the image full size)


In order to view the contents of a value you can either switch to the Locals window or you can add the object to the Watch window.

You can switch to the Locals or Watch window by clicking desired button on the right-hand pane's toolbar

(click to view the image full size)

With the Watch window you can either click into the grid to add a new item by typing in the object's name or you can right-click an object in the JavaScript code and choose 'Add Watch' from the context menu.

(click to view the image full size)

You can tweak the values contained in the Watch window by double-clicking in the Value column as shown in the following screen shot:

(click to view the image full size)


And there you have it. Debugging JavaScript using Internet Explorer 8's built-in Developer Tools.
Posted by Anonymous at 9:11 PM 0 comments
Labels: , , ,
Subscribe to: Posts (Atom)