Web Development Tools By: Bhavsar Deep K. 7th sem Msc (CA & IT)
What provide tools ?? Error checking tools ◦ CSS Validator ◦ HTML Validator ◦ Link Checker ◦ Debug ◦ Edit
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
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.
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.
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 .
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