Javascript debugging

We’ve all been there, where we need to debug a Javascript issue on an application but we don’t know exactly what is being ran when you hit a button / click something etc. A colleague recently said that “It’s not fixing the issue that is the problem, it’s finding where that buggy Javascript actually is running is the problem!”. Ah, I have a solution for that!

All you need to do is Right click the button/thing that changes -> Inspect  -> Break on… -> Attributes Modifications

Now just click the button / tab, and it should instantly jump your chrome developer tools to the Javascript that tried to modify that element:

Hack Manchester

Last weekend, I joined in on Hack Manchester. It’s a 24 hour coding event, where 45 teams went head to head to complete challenges set out by sponsors and the event organisers (@ruby_gem, @seanhandley and @TheAllSeeingPie) during the Manchester Science Festival.

My team was a young group of Manchester graduates (@scootio, @andyjslack and Alan).  We decided to go ahead with going for the 7Digital and Esendex challenges. 7 Digital challenge was about using their music API to create the after-party’s music system. The Esendex challenge was to use SMS messaging in a different way. My team decided that we were going to make a Radio Statio, which got it’s requests directly from Twitter / SMS / Android application and using a web form. Once a request was received, it searched the 7Digital library using the API and queued it in the system ready to play automatically. If there were no requests in queue, it would lookup from the top 40 UK singles and choose a random track.

We started at around 5pm on the Saturday afternoon, and quickly went ahead to split the team into groups. Myself and Andy went for the PHP side of things, setting up a Zend Framework application for the API we were going to build, to allow all the different sources to communicate with our stream (With a little help from @Akrabat on IRC). Scott and Alan started work on the Android application, using Eclipse and Java with the Android SDK. A couple of hours in, we had the API up and running and decided to move onto getting some work done on the playlist and getting music tracks playing from the 7Digital API. This took a while to get right, as there were lots of different methods needed to turn a single into an mp3 stream, however by around 4am we had this all worked out  – and added filters to stop any karaoke versions coming through the net! At around 2am, Andy went home to catch up on some sleep, Alan and Scott also had a few hours sleep, whilst  I continued to work through the night alone to get something working with creating a continuous  stream of music ready for Radio station, and a way to play this stream. After having a discussion with @mheap at some point early in the morning, we decided the best and quickest way was to use PHP’s streaming library to stream to a file and feed it into a Shoutcast/Icecast server. The progress on the Android app was really good – we had the basic app up and running, with only the submission of the artist and track name needing to be sent to our new API service layer.

Andy came back at around 8am, just before… bacon! After breakfast, Andy worked on getting the SMS integration working, whilst I worked on getting a Twitter stream integration, populating our queue, ready for the stream to continue to play our requested tracks. After lots of testing, I was now fed up of listening to ‘Gangnam Style’ and being Rick Rolled every time we reset the playlist! After this, I continued to work on getting the streaming part working as well as the other section.

At around 1pm on Sunday, one of the main developers of the 7Digital API came around and told us more information about the full track streaming service they provided, with more integration required using OAuth. This would have been a major development, however myself and the team hadn’t used OAuth before, particularly in a Zend Framework application – and there was only a little documentation on the 7Digital website on how to do this – however I started to implement this after hearing from him, but unfortunately didn’t manage to complete it in time – and only had the 30-60 second clips of the songs working during judging stage, which happened around 3pm (due to the hour we gained when the clocks changed!).

Overall, even though we didn’t win in our challenges, I really enjoyed this event – It was a great get together of lots of very talented developers, some familiar faces and lots of new ones. I will definitely be adding Hack Manchester 2013 to my calender, and bringing more of the @magma_digital team along with me!

Top