Web development tool

Uploaded on

Presentation on web development tools which are open source and no need to purchase..

Presentation on web development tools which are open source and no need to purchase..

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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 DebuggingTools 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 Chromes 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.
  • 7. 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.
  • 8. 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
  • 9. 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.
  • 10. 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.
  • 11. Flashbug.. Flashbug is a firebug extension for Flash in Firefox. It provides extensive Flash debugging add-ons .
  • 12. IE Developer Tools This is available in IE8 and IE9 It is made by Microsoft® Developers can debug a sites 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
  • 13. 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.
  • 14. 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.
  • 15. 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
  • 16. Thank You…