Posts Tagged ‘Debug’

Closure Tools is set of opensource (release info) developer tools by Google which are used while building Gmail, Google Maps, Google Docs  & many others.

The tools include a JavaScript compiler, library & templating system.

Closure Compiler

JavaScript Compiler

It compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what's left so that it downloads and runs quickly.

It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

The compiler also offers a Firebug extension, named Inspector, for better debugging.

Closure Library

It is a broad, well-tested, modular, & cross-browser JavaScript library.

Only what you need can be pulled from a large set of reusable UI widgets, controls, lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, & more.

Closure Templates

They simplifty the task of dynamically generating HTML.

In contrast to traditional templating systems, in which you use one big template per page, you can think of Closure Templates as small components that you compose to form your user interface.

Firebug LogoFirebug is probably one of the most helpful tools used when developing websites.

Specially, after JavaScript & Ajax became that much popular, it is hard to findout how we were developing & debugging without Firebug.

This great Firefox add-on, besides the ease of use & continious development by a talented team, has many features that make it a must-have like:

  • working inside browser, no need to switch apps.
  • being real-time, logging every request
  • ability to edit code & see results instantly
  • debugging JavaScript, measuring its performance & more..

It also has another feature, which is extendibility with help of Firefox add-ons.

There are various add-ons that can add more power to Firebug for creating better & faster. Here they are:

 

YSlow

YSlow Firebug Addon

YSlow is a Firebug add-on for analyzing web pages and getting suggestions on ways to improve the performance (parallel with the rules for high performance web pages).

YSlow grades web pages based on the predefined rulesets or a user-defined one . It also provides tools for performance analysis, including Smush.it™ and JSLint.

Page Speed

Firebug Page Speed

Very similar to YSlow, it is an add-on by the Google team for evaluating the performance of web pages and, best of all, getting suggestions (based on "Web Performance Best Practices") on ways to improve them.

Page Speed automatically optimizes images & provides compressed ones foruploading later.

It can also detect  JavaScript and CSS loaded that actually isn’t used for decreasing the total size of these files.

Read the rest of this entry »

NitobiBug is a browser-based, cross-browser JavaScript object logger script.

Using this debugger, you can inspect a JavaScript object to discover its members and the values of those members.

JavaScript Debugging Tool

NitobiBug intelligently discerns simple types like strings, booleans, and numbers, from complex objects like error messages and objects.

For example, to inspect an object:

var myDomObject = document.getElementById('someID');
nitobi.Debug.log(myDomObject);

is enough. It will present you the results in a pop-up like draggable, expandable interface.

As there are nice tools for debugging like Firebug but few are cross browser, NitobiBug works on the following browsers:

  • Internet Explorer 6+
  • Firefox 1+
  • Safari (Only tested 3+)
  • Opera 8+
feed-holder
FeedBurner
  • EasyImg - Internet Graphics Engine
  • MailChimp
  • activeCollab | Project Management
Virtual Private Servers - eTecc Web Hosting
RapidxHTML - Converts Your PSD into XHTML Rapidly
  • PSD to HTML
  • PSD to HTML
  • Manage your clients email marketing with sendcube

Vivvo CMS - Web Publishing at your Fingertips