Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Debug’

DebugBar is a free and open source app that can integrate into any PHP project and collect + present profiling data.

It has no dependencies, supports Ajax requests and includes generic data collectors and collectors for well known libraries.

PHP DebugBar

The bar is 100% JavaScript that sits in the footer (like Dev. Tools).

New collectors and views can be added with ease and it is possible to save/re-run previous requests.

Web Tracing Framework, by Google, is a set of tools and scripts for analyzing the performance of any JavaScript-related code.

It is mostly ideal for JavaScript-heavy apps and may not be necessary for standard web pages where JavaScript is only used for simple interactions.

There is a manual embedding option and a Chrome extension for getting internal browser data and command line tools (or Nodejs support) for processing this data.

Web Tracing Framework

The framework allows us to choose which methods/events to track and visualizes them in a friendly interface.

A “heap tracking” feature helps finding “how the memory is used by every function” to optimize when necessary.

It works on most modern browsers (in Chrome with all the features) and can be extended.

Lately, a post at WRD had introduced Hack St. which was a handy web app for debugging HTTP requests.

Postman is a similar tool with more features and comes as a free Chrome extension.

It allows sending any type of HTTP requests (GET, HEAD, POST, PUT..) with any number of parameters + headers.

Postman Chrome Extension

There is support for different authentication mechanisms (basic, digest, OAuth) and the response received is syntax highlighted (HTML, JSON or XML).

Postman keeps a history of requests so that we can easily re-send them later and has a “collections” feature for storing all requests to the same API/domain.

The extension even has some more features to simplify testing and debugging of HTTP requests. A must-have for every web developer.

Hack St. is a free web application (with desktop version) for easily debugging HTTP requests.

When working on an API integration or testing “how a URL responds to specific requests”, such an app becomes a time-saver.

Using Hack St., we can send GET, POST or PUT requests with any number of querystrings, custom headers and -optional- HTTP authentication.

Hack St.

The app has a tabbed interface so that we can easily test different versions of a request and there is a “history” feature for easily re-sending any previously-sent requests.

Also, a Mac OS X desktop version exists (Windows and Linux coming soon) which are handy when debugging internal URLs.

Google Chrome’s “Developer Tools” is what many developers use to debug client-side code.

Chrome Logger is an extension that brings server-side code debugging to this tool.

Chrome Logger

It has libraries for PHP, Python, Ruby, .NET, ColdFusion and Node.js. Also, new ones can be created with the documentation provided.

These libraries simply enable us to view variables in Developer Tools.

Although each server-side language has their stronger debugger tools, using the same logging tool for client and server-side makes sense.

When working on any web projects, developer tools of the browser used is usually the most helpful tool for debugging.

Secrets of the Browser Developer Tools” is a website that provides detailed information regarding the usage and capabilities of these tools.

Developer Tools Secrets

It has tips for all the major ones (Chrome, Firefox, Safari, IE, Opera). They are already categorized and can be filtered by browser too.

Imho, everyone from starters to pros, can find some new and useful information in this website.

  • Tags:
  • Filed under: Extras, Info, No License
  • 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, 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.

    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.

    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.

  • Tags:
  • Filed under: Extras, LGPL License, Tools
  • 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.

    Uptime Robot