Web development tool


Published on

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

Published in: Education
  • 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

No notes for slide

Web development tool

  1. 1. Web Development Tools By: Bhavsar Deep K. 7th sem Msc (CA & IT)
  2. 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. 3. What provide tools ?? Error checking tools ◦ CSS Validator ◦ HTML Validator ◦ Link Checker ◦ Debug ◦ Edit
  4. 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. 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. 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. 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. 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. 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. 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. 11. Flashbug.. Flashbug is a firebug extension for Flash in Firefox. It provides extensive Flash debugging add-ons .
  12. 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. 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. 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. 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. 16. Thank You…