Meta Refresh 2014

On the construction of user interface on the web

Sreejesh Karunakaran


Visual Debug - Chrome Developer Toolbar extension for visual debugging

Submitted Jan 7, 2014

The focus of the talk is to

  1. Walk you through an improvised debugging experience.
  2. To help you understand that writing a custom extention is not so tough.
  3. To appreciate the good work done by the Angular Batarang creators and take it a step further by unlocking it for all JS Scenarios.
  4. Learn how to use D3 with in a debugger extention.
  5. Learn how to use angular + bootstrap with in a developer toolbar extention.
  6. discuss how to debug debugger extention code.
  7. how to get it up there on chrome store.


I have been dreaming about creating a tool to to show JavaScript entity relationship. The side effect that I was expecting was to be able to learn and implement D3 visualization library.

Have evaluated similar thought process in the past and was very impressed by Remy Sharp’s work on jsconsole. Was about to get serious with it and just then I got involved with Angular and yes, Batarang!

Batarang has a fanstastic framework that a chrome developer toolbar can use. Batarang wraps D3, bootstrap, angular.. What else do you need.

The codebase of visual-debug is forked from and heavily influenced by the Batarang codebase and architecture.



Speaker bio

Sreejesh Karunakaran, working as Manager / Specialist Interactive Development with Sapient. Key interests include JavaScript, Hardware hacking, Operating Systems and Data visualization.

Previous Proposal at JSFoo :

Previous talk :


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more