Your SlideShare is downloading. ×
0
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Web development tool
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web development tool

370

Published 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..

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
370
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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…

×