Web Development Tools

By:Bhavsar Deep K.7th sem Msc (CA & IT)

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.

What provide tools ??Error checking tools

◦CSS Validator

◦HTML Validator

◦Link Checker

◦Debug

◦Edit

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

Chrome Developer Tools..Bundled and available in ChromeIn 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 project.

How to use…???Select the Wrench menu top-right

of browser windowSelect ToolSelect Developer tools Press Shortcut key:Control - Shift - I keys to open

Developer ToolsControl - Shift - J to open Developer

Tools and bring focus to the Console.Control - Shift - C to toggle Inspect

Element mode.

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.

Feature of Firebug..Always at your serviceInspect and edit HTMLTweak CSS to perfectionVisualize CSS metricsMonitor network activityDebug and profile JavaScriptQuickly find errorsExplore the DOMExecute JavaScript on the flyLogging for JavaScript

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.

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.

Flashbug..

Flashbug is a firebug extension for Flash in Firefox.

It provides extensive Flash debugging add-ons .

IE Developer Tools

This is available in IE8 and IE9It 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

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.

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.

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

Thank You…