Assignment NO: 2

Muhammad Usman
BS(ECE)-121-8A

Reg# Fa11-

Faraz ahmed noor

BS(ECE)-005-8A

Reg# Fa11-

Subject

Web Enginnering

Submitted To:
Mumtaz
Date

Sir Majid
12-04-15

Web Development tools in FireFox

Main Over View of Web Development tools In FireFox:

Exploring and debugging

Examine, explore, and debug websites and web apps.
Web Console
See messages logged a web page, and interact with the page using JavaScript.
Page Inspector
View and modify the page HTML and CSS.
JavaScript Debugger
Stop, step through, examine and modify the JavaScript running in a page.
Network Monitor
See the network requests made when a page is loaded.
Developer Toolbar
A command-line interface for the developer tools.

Debugging the browser

By default, the developer tools are attached to a web page or web app. But you can also connect
them to the browser as a whole. This is useful for browser and add-on development.
Browser Console
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's
scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

How to Run Fire Bugs For Java script

Web Development Tools in Internet

Explorer
Introduction:-

Great tools play a critical role in developer productivity, and while many web development tools
exist, they likely don't meet your needs in all tasks. For example, you may want to quickly debug
JScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new
design or try solutions to a problem. In order to improve developer productivity in these and
similar scenarios, Internet Explorer 8 includes powerful, yet easy-to-use tools that have a few
important characteristics:

Integrated and simple to use: An instance of the Developer Tools

comes with every installation of Internet Explorer 8. This enables
debugging on any machine running Internet Explorer 8. In addition, the
tools only load when needed to limit the impact of the tools on browser
performance. Using the Developer Tools, you can do on-the-fly script
debugging for only the current Internet Explorer process rather than
enabling debugging for all of Internet Explorer.

Provide a visual interface to the platform: Instead of reverse

engineering how your site works or modifying your site to output
debug information, the Developer Tools let you look into Internet
Explorer to view its representation of your site. This reduces the time
you spend debugging dynamic sites where source inspection isn't
useful or investigating a behavior specific to Internet Explorer where a
generic authoring tool cannot help.

Enable fast experimentation: When prototyping a new design or

testing fixes in previous versions of Internet Explorer, you likely edit
your source, save it, refresh your page in the browser, and repeat. The
Internet Explorer 8 Developer Tools streamline this scenario by letting

you edit your site within the browser and see changes take effect
immediately.

Optimize application performance: Identifying and fixing

performance issues is usually an iterative approach done by focusing
on one scenario at a time. With the Internet Explorer 8 Developer Tools
script Profiler, you can collect statistics like execution time and number
of times a JScript function was called as you test your application and
use the profile report to quickly identify and fix performance
bottlenecks.

With these characteristics, the features of the Developer Tools will

dramatically improve your productivity when developing in Internet Explorer.
The rest of this article explains many of these and other features in more
detail.
Getting Started

Getting started with the tools is simple: press F12 or click Developer Tools from the Tools
menu.
Once open, the tools exist in their own window, each one connected to a single tab in Internet
Explorer. If you prefer to decrease the number of open windows, pin the tools to a tab by clicking
the Pin button or pressing CTRL+P.
Some features of the tools do not need the complete tools interface. In that case, click the
Minimize button or press CTRL+M when the tools are pinned. The tools become a row at the
bottom of the window, providing access to just the Command Menu bar.
Debugging HTML and CSS:-

The tools give you visibility into the browser so you can inspect your site's HTML and
Cascading Style Sheets (CSS) as they exist inside Internet Explorer instead of just the original
source. This is particularly helpful with dynamic sites, complex sites, and sites that use
frameworks like Active Server Pages (ASP) or PHP.
The Primary Content Pane in the tools displays the site's Document Object Model (DOM) tree,
which reflects the one maintained by Internet Explorer to represent the site in memory. You can
navigate the tree with the mouse or the keyboard. The quickest way to find the node for a
specific element on the page is to use the Select Element by Click feature. Use this feature to
select an element on the page and the tools will automatically select the corresponding tree node.
An alternative method is to use the Search box.

Inspecting HTML Elements

Once you selected an element in the DOM tree, the Properties Pane on the right exposes more
information about the element in the following ways:

Style: The Style command improves CSS debugging by providing a list of all
rules that apply to the selected element. The rules display in precedence
order so those that apply last appear at the bottom and any property
overridden by another is struck through, allowing you to quickly understand
how CSS rules affect the current element without manually matching
selectors. You may quickly turn a CSS rule on or off by toggling the checkbox
next to the rule and the action will take effect immediately on your page.

Trace Style: This command contains the same information as Style except it
group styles by property. If you are looking for information about a specific
property, switch to Trace Styles command. Simply find the property that
interests you, click the plus (+) icon, and view a list of all rules that set that
property, again in precedence order.

Layout: The Layoutcommand provide box model information such as the

element's offset, height, and padding. Use this command when debugging an
element's positioning.

Attributes: The Attributes command allows you to inspect all defined

attributes of the selected element. This command also allows you to edit, add
or remove attributes from the selected element.

To further inspect CSS, switch to the CSS tab for a list of all CSS files for the current site.
Inspecting CSS Properties

Switching to the CSS tab gives you access to all external CSS files to inspect. Select a style sheet
by clicking on the Style Sheet Chooser button. Clicking on a style property name or value
allows you to change it and see it take effect immediately.
Editing Sources On-The-Fly

After using the tools to inspect and gather the information you needed, you may want to take
action on your findings right away. To edit any HTML attributes or CSS properties, just click it,
type the new value, and press ENTER. The change takes effect immediately so you can quickly
test changes. In HTML, you can also press the Edit button to make the entire tree editable and
then add, remove, or edit complete elements. In either case, the Developer Tools enable quick
editing without modifying your source. Once you get everything to where you want it, you can
save your changes.
Saving Changes

All changes made in the tools only exist in Internet Explorer's internal representation of the site.
Therefore, refreshing the page or navigating away brings back the original site. However, in

some cases you may want to save the changes. In the HTML and CSS tabs, click the Save button
to save the current HTML or CSS, respectively, to a file. Remember that not only will the areas
of your site that you modified differ from your source, but other parts may also differ since the
tools display your site as it exists in Internet Explorer rather than in your source. To prevent
accidentally overwriting source, the tools save the output as text and add a leading comment to
the file.
For more information on HTML and CSS, read the article Debugging HTML and CSS with the
Developer Tools.
Debugging JavaScript:-

While CSS makes it easier to build dynamic sites without JavaScript, most complex sites still
need at least some script. And as with any programming language, a good debugger is critical to
being productive and the Developer Tools provide just that.
Starting and Stopping the Debugger

Debugging JavaScript in Internet Explorer 8 is simple. On any site you want to debug, open the
Developer Tools and switch to the Script tab, then click Start Debugging. When starting the
debugging process, the Developer Tools will Refresh the page and Unpin the tools if it is
pinned.
Once started, you have all the functionality you expect from a debugger. Once you are done,
click the button again to Stop Debugging. While the debugger is started, the Developer Tools
offer powerful control and insights into your scripts.
Controlling Execution

You can pause execution at a specified place by setting breakpoints. Click a line number or rightclick the source and choose Insert Breakpoint. You can set breakpoints within inline functions
or event handlers. In addition, Conditional Breakpoints can also be set.
If you're not sure where to set a breakpoint, click Break All to pause execution before the next
JavaScript statement runs or Break On Error to pause execution when Internet Explorer
encounters a script error. After pausing execution, step through script, including anonymous
functions, with Step Into, Step Over, and Step Out commands.
Inspecting Variables

As you step through code, it is helpful to inspect the current state of variables. Within the Script
tab, use the Locals pane to view local variables and the Watch pane to monitor a custom list of
variables. You can add variables to this list by right-clicking in the source and clicking Add
Watch or typing the variable name in the Watch pane.

Inspecting Call Stack

As you debug your application by stepping through the JavaScript code, you can view the
functions in the current call stack. Clicking on a function from the call stack list displays the
source code in the Primary Content Pane.
Using the Debugger Console

Instead of editing your source to test a statement, with the Developer Tools you simply type the
JavaScript statements in the Console pane to execute it. Click Multi Line Mode to enter
multiple lines of to be executed at a time. Internet Explorer executes the code immediately so
you can test the outcome of adding that code at the same location as the current breakpoint. You
can use Console even when you are not debugging. To make it easy for you to fix errors on your
page, Console also logs all the script error messages through the use of console.log. More
information on this can be found at Debugging Script with the Developer Tools under the "Using
Console to Execute Code Statements" section.
For more indepth information on script debugging, read the article Debugging Script with the
Developer Tools.
Profiling JavaScript Performance

Debugging JavaScript helps perfect the behavior of your site, but the JavaScript Profiler can
help take your site to the next level by improving its performance. The Profiler gives you data
on the amount of time spent in each of your site's JavaScript methods and even built-in
JavaScript functions like string concatenation. Since you can start and stop the
JavaScript Profiler at any time during application execution, you can collect multiple profile
data for the specific scenario that interests you.
Starting and Stopping Profiler

As with the debugger, getting started is simple: open the Profiler tab and click Start Profiling to
begin a session. Perform the scenario you want to profile and then click Stop Profiling. The
resulting data can then be examined immediately.
Viewing Data

By default, the data appears in a function view which lists all the functions used. Click the
Current View dropdown menu and select Call Tree to view a tree representing the order of calls
made so you can walk through the code path and find hot spots. In both views, you can add,
remove, arrange, and sort the columns to find the information you're looking for.
The profile report gives you information on the URL and line number of the function to help you
locate the code in your application. Click the function name to bring up the source code for the
function in the Primary Content Pane of the Script tab.

Note Line number maping to source codes functionality only available when script debugging is
enabled. More information about script debugging can be found at: Debugging Script with the
Developer Tools.
Profiling Multiple Sessions and Exporting Data

Click Start Profiling again to begin a new profiling session. When you click Stop Profiling, the
new data displays. To view the data from previous profiled sessions, click the file drop-down list
and choose another report. The profile report persists for the current Internet Explorer process,
but you can save the profile data in CSV format by clicking the Export button and use any other
application for later investigations.
For more information about profiling, read the article Profiling Script with the Developer Tools.
Searching for Content

The Developer Tools offers a suite of tools to inspect and modify your sources to test things out
on the fly. When you have a lot of sources to look through, wouldn't it be nice to be able to find
things quickly? It is possible and you can do it with the Search box provided in the Developer
Tools. The Search box is context sensitive to the Mode tab you are currently on. For example, if
you are currently on the HTML tab, then the search is perform against the DOM in the Primary
Content Pane. All matchings are highlighted and the first match is selected. Similarly, you can
search in the CSS tab, Script tab, and Profiler tab.
The Searchbox also supportW3C Selectors API syntax for the HTML tab. To use selectors
syntax, you start the search with the "@" symbol. For example, to find all div elements, type
"@div". To find only div elements with a perticular CSS class name, type
"@div.myClassName", or to find all elements with that class name, type "@.myClassName".
You can also search for elements with an id defined, type "@#myID". To learn more about CSS
selectors read Understanding CSS Selectors.
Note CSS class names are case sensitive when using selector syntax in the Search box.
Viewing Sources

Prior to Internet Explorer 8, the only source you can view is the original source when you rightclick a Web page and select View Source. This is still available; however, using the View
command from the Developer Tools, you have more control over what sources to view. You may
choose to look at a specific element with its DOM sources only or with DOM sources and styles
that are applied to that element. This isolates the element to give you the focus you need to spot
any potential problems. You can also view the Original source of the Web page or the DOM
sources as represented by Internet Explorer. This includes the original sources and those inserted
by scripts. Now you see exactly what the Internet Explorer browser sees.

Also part of the View command is the option to view Link Report. The link report is generated
in a separate browser tab with information of all links found on the page.
Note Developer Tools offers you the option to choose your own application to View Source
with. You can find this option under the File menu.
Outlining Elements on Screen

Have you ever wondered where the border of a particular element is on screen? Have you ever
found yourself having to turn an element's border to 1 just to see where it is? With the Outline
command from the Developer Tools, you can see all your elements' outlines without having to
modified your sources. The command provides a few commonly used elements like Tables, Div
Elements, and Images. It also offers you a dialog to add Any Element... you want to outline.
You may also assign a color to each element to help differentiate them. The outline will persist
until you turn it off or refresh the page. More information about Outline menu can be found at
Developer Tools User Interface Reference under "The Outline Menu" section.
Working with Images

When working with images, Developer Tools offers several commands to help you quickly
identify information about your images such as file size, dimensions, and path, right on screen. It
also allows you to turn image rendering on or off. It even offers an option to generate Image
Report for each images found on the Web page.
Controlling Cache and Cookies

The Cache command menu gives you the control over your cache and cookie settings. You can
set the broswer to Always Refresh from Server so you know you are getting the latest
information. You can also control the cache with Clear Browser Cache or Clear Browser
Cache for this Domain.
Working with cookie, you may choose to disabled it so no cookie will be written to your
machine. You can quickly see a complete list of all your cookies by clicking on View Cookie
Information. You can also choose to Clear Session Cookies or Clear Cookies for Domain.
In both cases for cache and cookies, these commands will come in handy because it gives you
quick access and tight control over your browser environment.
Using Power Tools

The Tools command menu offers you three power tools as you work on your Web sites.

1. The Resize tool: This tool help you quickly resize your browser window to
standard sizes such as 800x600 or 1024x768, or you may even add
Costom... window sizes. There are keyboard shortcuts available for this from
the Developer Tools Keyboard Shortcuts Reference.
2. The Show Ruler tool: This tool allows you to draw rulers on screen to help
capture distance between objects. The rulers can be set toSnap to XY axis,
Snap to element, or free form. You may draw as many rulers as you want,
and you may also reuse a ruler by resizing it and dragging it around.
3. The Show Color Picker tool: This tool will help you pick a color. By placing
the picker over any text, object, or background you see on screen you can
see a sample of the color the picker is currently on, along with its HEX value.
Once you click a color, you can then copy the value into your code.
Validating Your Sources

Once you are done with development work, it is nice to know that your code meet various
standards, such as HTML, CSS, and accessibility. The Developer Tools has gathered these useful
resources to help you check your sources against these validators. Simply choose the type of
validation you want to perform or choose to do a Multiple Validations... session.
Testing in Different Browser and Document Modes

Internet Explorer 8 has the ability to render pages and report version information as Windows
Internet Explorer 7. Web developers and end users can use this ability to ensure sites continue to
work even if not built for Internet Explorer 8, but you can also use it to test how your site will
look to Internet Explorer 7 users.
Testing Browser Modes

The Browser Mode menu lets you choose how Internet Explorer should report three important
properties:

User agent string: The value Internet Explorer sends to Web servers to
identify itself.

Version vector: The value used when evaluating conditional comments.

Document mode: The value used to determine whether Internet Explorer uses
the most recent behavior for CSS, DOM, and JScript operations or emulates a
previous version of Internet Explorer for compatibility.

Three Browser Mode options exist, each modifying these values in different ways:

Internet Explorer 7: In this mode, Internet Explorer reports a user agent,

version vector, and document mode identical to those used by Internet

Explorer 7. Use this mode to test how Internet Explorer 7 users experience
your site.

Internet Explorer 8: In this mode, Internet Explorer reports a user agent,

version vector, and document mode to match the default Internet Explorer 8
behavior, which is the most standards-compliant available in Internet
Explorer 8. Use this mode if you want to test how Internet Explorer 8 users
experience your site.

IE8 Compatibility View: In this mode, Internet Explorer 8 reports version

vector, document mode, and user agent string as if it is Internet Explorer 7;
however, the user agent string also includes a token indicating that the
browser is really Internet Explorer 8. Use this mode to test how Internet
Explorer 8 users experience your site if they've chosen the Compatibility
View option.

Testing Document Modes

The Document Mode defines how Internet Explorer renders your page, but has no effect on the
version vector or user agent string. By using this option in conjunction with the Browser Mode,
you can quickly test which document mode you should use for your site. Three options exist:

Quirks Mode: This behavior matches that of Internet Explorer when

rendering a document with no doctype or a Quirks doctype. It's similar to the
behavior of Microsoft Internet Explorer 5 and the Quirks mode behavior of
Microsoft Internet Explorer 6, and the same as the Quirks mode of Internet
Explorer 7.

Internet Explorer 7 Standards Mode: This behavior matches that of

Internet Explorer 7 rendering a document with a strict or unknown doctype.

Internet Explorer 8 Standards Mode: This behavior is the latest

standards-compliant available in Internet Explorer 8, and is the mode used by
default in Internet Explorer 8 when rendering a document with a strict or
unknown doctype.

Using Keyboard Shortcuts

The Internet Explorer 8 Developer Tools have extensive keyboard shortcut support to make it
even easier to accomplish tasks. Use standard Windows conventions like F12 to open or close the
Developer Tools and F5 to Refresh the page. You can find the complete list by going to