JavaScript Remote Debugging

Mobile browsers are becoming more powerful day-by-day and you can do almost everything you do on your desktop browser. Many mobile app developers have already started moving towards mobile web app instead of native app. Apps are being built using HTML5 and rich JS libraries. However, one of the major concerns for the developers is the lack of developer tools. The reasons are quite obvious – real estate needed to show the debugger, non-developer friendly environment. The solution to this problem is remote debugging. I have been using JSConsole for this purpose. It comes handy when we want to inspect DOM of the webpage. I stumbled upon “Aardwolf” yesterday and it seems to be a better alternative for JSConsole when it comes to JavaScript debugging. Aardwolf is powered by Node.js.

Features:

• Breakpoints
• Call Stack
• Exception reporting
• JS Console remoting

How does it work?

Aardwolf is a Node application which listens on two ports – One for the debugger UI (8000), another one for the JS file server (8500). It has a code rewriter which rewrites the JS files to be debugged (dynamically). The rewritten JS files are served by the JS file server. The application to be debugged should consume JS files from the above mentioned JS server (rather than the original JS files). This will help establishing connection and adding hooks for debugging. Once the connection is established, we can add breakpoints and debug the JavaScript file.  

How to set up Aardwolf?

• Check out the Aardwolf source code from here or here.
• Create a file ‘config/config.local.js’ within the checked out location. Add the following lines to it:

var config = require('../config/config.defaults.js');
config.serverHost = 'ip-or-hostname-of-your-computer';
config.jsFileServerBaseDir = '/path/to/www/root';

• Start the server by running “node app.js” (Make sure that Node.js is installed on your machine)
• Add the debug library to your web app. Also, all the JS files to be debugged should be served from the JS file server.
  

  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/aardwolf.js"></script>
  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-script.js"></script>
  <script type="text/javascript" src="http://ip-or-hostname-of-your-computer:8500/some-other-script.js"></script>

  
  
• After the server starts up, open http://localhost:8000 in your desktop browser. The debugger UI should appear.
• Open the web app on your phone and wait for the page to load. The debugger UI will show “Mobile device connected” once the connection is established.
• You can set the breakpoints and view the call stacks on the right pane.

The source code is available on github as well as on bitbucket. The project is available under the MIT license. Aardwolf does not seem to be good at inspecting DOM elements. We can employ both JSConsole and Aardwolf to make our debugging job easier. Happy debugging!!

-- Varun