This document discusses various web development tools. It begins by defining web development tools as those that allow developers to test and debug code using technologies like CSS, HTML, JavaScript. Popular tools mentioned include Chrome Developer Tools, Firebug, FirePHP, and IE Developer Tools. Each tool is briefly described, noting what technologies it supports (CSS, JavaScript debugging etc), how to access it (keyboard shortcuts, menus), and key features. The document provides a high-level overview of the most commonly used development tools.

1. Web Development
Tools
By:
Bhavsar Deep K.
7th sem Msc (CA & IT)

2. What is web development tools
??
 Web development tools allow web
developers to test and debug their
code.
 These usually allow developers to
work with a variety of technologies,
including CSS, HTML, the DOM,
JavaScript, and more.
 They are different from website
builders in that they do not assist in
the creation of a webpage, but rather
the testing of those that already exist.

3. What provide tools ??
 Error checking tools
◦ CSS Validator
◦ HTML Validator
◦ Link Checker
◦ Debug
◦ Edit

4. Developer and Debugging
Tools
 Chrome Developer Tools
 Companion.Js
 Dragonfly
 Firebug
 Firephp
 Firebug Lite
 Firecookie
 IE Developer Toolbar
 IE Developer Tools
 Measureit
 Microsoft Script Debugger
 Omeasure
 Pendule
 Safari Developer Tools
 Web Developer
 Yslow

5. Chrome Developer Tools..
 Bundled and available in Chrome
 In September 2008, Google released
a large portion of Chrome's source
code as an open source project
called Chromium
 Allows web developers and
programmers deep access into the
internals of the browser and their web
application
 The Developer Tools are heavily
based on the WebKit Web Inspector,
a part of the open source WebKit

6. How to use…???
 Select the Wrench menu top-right of
browser window
 Select Tool
 Select Developer tools
Press Shortcut key:
 Control - Shift - I keys to open Developer
Tools
 Control - Shift - J to open Developer
Tools and bring focus to the Console.
 Control - Shift - C to toggle Inspect
Element mode.

8. Firebug...
 Bundled and available or we can
install in Mozilla Firefox
 Firebug is free and open source, it is
licensed under the BSD license
 Firebug was initially written in January
2006 by Joe Hewitt, one of the original
Firefox creators.

9. Feature of Firebug..
 Always at your service
 Inspect and edit HTML
 Tweak CSS to perfection
 Visualize CSS metrics
 Monitor network activity
 Debug and profile JavaScript
 Quickly find errors
 Explore the DOM
 Execute JavaScript on the fly
 Logging for JavaScript

11. Firephp...
 FirePHP enables you to log to your
Firebug Console using a simple PHP
method call.
 FirePHP is ideally suited for AJAX
development where clean JSON and
XML responses are required.
 All data is sent via response headers
and will not interfere with the content
on your page.

12. Firequery...
 Firebug extension for jQuery
development.
 jQuery expressions are intelligently
presented in Firebug Console and DOM
inspector.
 elements in jQuery collections are
highlighted on hover.
 jQuerify: enables you to inject jQuery into
any web page.
 jQuery Lint: enables you to automatically
inject jQuery Lint into the page as it is
loaded.

13. Flashbug..
 Flashbug is a firebug extension for
Flash in Firefox.
 It provides extensive Flash debugging
add-ons .

14. IE Developer Tools
 This is available in IE8 and IE9
 It is made by Microsoft®
 Developers can debug a site's HTML,
CSS, and Microsoft JavaScript from
within Internet Explorer 8.
 Also it is provide switch
between Internet Explorer and a
separate development environment.
 It is provide in built in IE press F12

16. Microsoft Script
Debugger..
 It is one kind of debugger that is provide
by Microsoft ActiveX® Scripting host
application.
 For example, Microsoft Internet Explorer
(IE) or Microsoft Internet Information
Server (IIS).
 It is control the pace of script execution
with break points and stepping.
 View and control script flow with the Call
Stack Window.
 It is support in Windows 2000, Windows
NT, Windows Server 2003, Windows XP.

17. Omeasure..
 A simple measuring tool for web
designers and developers using
Opera.
 It lets you draw a ruler across any
webpage to check the width, height or
alignment of page elements in pixels.
 Download from Opera add-ons.
 Note: After install omeasure extension
in opera after we have to reload page.

18. Safari Developer Tools
 It is provide in safari web browser.
 it easy to modify, debug, and optimize
a website for peak performance and
compatibility.
 It is provide three powerful things
◦ Web Inspector
◦ Snippet Editor
◦ Extension Builder

20. Thank You…