Advertise here with BSA

Developing mobile web applications is not so different and harder than developing standard websites. Even, considering the better support for the new HTML and CSS tags, it is sometimes easier.

However, debugging them is pretty hard as many features for that process doesn't exist like viewing source code or JS errors generated by the mobile browser.

Socketbug, a remote debugging tool built with Node.js and Socket.io, brings a working solution to this issue.

It auto-determines what communication transport to use and enables your mobile application to send/receive messages from other connected devices (mostly mobile in this case) to your desktop browser.

The usage is not so complicated as well, you just need to setup the Socketbug server, connect to it (a console exists for connection) and insert a JavaScript code to your mobile application.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Tutti is a open source web application that enables you to interactively execute Javascript on multiple web browsers at the same time.

It is used by simply creating a room (session) and connecting to that room by copy-pasting the unique URL generated from any browser you want.

After that, when you execute a JavaScript command from the shell, it will be executed on every connected browser with the help of technologies like Socket.IO, node.js and WebSocket.

Simply, it is a very handy resource for debugging JavaScript and analyzing inconsistencies between browsers.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Many PHP developers use print_r() & var_dump() for debugging which output hard to read/unformatted results.

Krumo is a replacement for these functions which can display structured information about any PHP variable.

Once Krumo is ran, the output is displayed in a collapsible DHTML tree built around the structure of the dumped PHP variable.

Also, it speeds up the debugging process by the ability of turning it "off" rather than disabling every dumping route inside the code.

Krumo runs on PHP 5 & to see how useful it can be, check the examples.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

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.

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.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Firebug 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 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

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.

Pixel Perfect

In order to easily find out how a fresh element will look with the design in general, Pixel Perfect enables web developers and designers to overlay a web composition over top of the developed HTML.

It is possible to toggle on/off any number of design elements to see if they fit well or not. And, with the opacity option, HTML below the composition can be viewed.

CodeBurner

CodeBurner offers a reference panel with a search tool for looking up HTML elements, attributes, and CSS properties.

It also provides shortcuts to view information or code samples about a selected item.

FireUnit

FireUnit provides a simple JavaScript API for doing simple test logging – unit testing and viewing within a new tab of Firebug.

FirePHP

With the help of FirePHP, it is possible to log to the Firebug console by a simple PHP method call.

Data is sent via response headers & won’t interfere with the content on the page.

For any developer who got used to the Firebug interface , this extension is great for PHP debugging.

FireRainbow

FireRainbow adds a better syntax highlighting support to Firebug & has theming support.

FireDiff

It adds a change monitor recording every change made, by Firebug and the website itself, to CSS and the DOM.

This provides a deeper look into the functionality of the website & helps keeping a record of the changes that were required to debug and tweak the page’s display.

Jiffy Firefox Extension

Jiffy Extension, using the Jiffy-Web, adds a new panel to Firebug & generates the visual view of the JavaScript time measurements. It can also output a print-friendly version of the report.

Hammerhead

It enables you to measure the loading times of webpages.

The extension has support for multiple pages & can clear caches (disk & memory) with a click for a healthier result.

Firecookie

Firecookie, is a cookie viewer/manager that works inside Firebug.

For a faster development, when coding an application using cookies, the panel eases viewing the cookies & their values, expire dates, etc.

It is also integrated with the Net panel & displays both sent and received cookies.

Firefinder

Firefinder offers a way to quickly finding HTML elements matching mentioned CSS selector(s) or XPath expression.

It allows you to instantly test CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

It also shows a count of how many matches there are & lists all the matching ones in a collapsible list in the Firefinder panel.

LiveCoder

LiveCoder extends Firebug by allowing developers to look at the Firefox chrome.

It is especially valuable to developers building add-ons. LiveCoder’s GUI lets you examine and modify the DOM of any Firefox add-on.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

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.

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+

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)