Meta Refresh 2014

On the construction of user interface on the web

Visual Debug - Chrome Developer Toolbar extension for visual debugging

Submitted by Sreejesh Karunakaran (@sreekarun) on Tuesday, 7 January 2014

videocam_off

Technical level

Intermediate

Section

Full talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +7

Objective

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.

Description

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.

Requirements

None

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 : https://funnel.hasgeek.com/jsfoo2013/809-node-robo-robo-powered-by-raspberry-pi-node-arduino-firebase-and-phonegap

Previous talk : http://www.youtube.com/watch?v=BI-LJgtBxys

Links

Comments

Login with Twitter or Google to leave a comment