Chrome dev tools deep dive : Network

Tutorial on the chrome dev tools focusing on the network tab

Chrome dev tools deep dive : Sources

Deep dive into features of the Sources tool in Chrome

Chrome dev tools deep dive : Console

The console is one of favorite places. The REPL environment is a quick way to validate JavaScript expressions. However, there is a lot more it can do. Read on. 1. $0 - $4 selectors The last inspected element is always available in the console as $0. $1 points to the next most-recently element and so … Continue reading Chrome dev tools deep dive : Console →

Chrome dev tools deep dive : Elements

1. Search CTRL + F allows you to search for strings in the DOM but you can also search using CSS selectors and XPath expressions. 2. Color picker Ever wanted to figure out what colours exist on a web page? Or prefer some other colour format? Here comes the color picker: Shift click on the color … Continue reading Chrome dev tools deep dive : Elements →

How to watch variables in JavaScript

We all have to track variables;while debugging; generally the easier it is to monitor changes, the faster bugs can be detected and fixed. Web developer tools expose various methods for tracking changes in variable values. There are a couple of drawbacks e.g. non-uniform support across platforms) but again, half-bread is better than none :).

The Art of Debugging

Programmers usually spend a lot of time debugging and it can be a painful experience; some feel like tearing out their hair in exasperation, smashing their poor computers or even believing that their computers really 'hate' them! :) Actually computers do not hate people and the operating system is not conjuring bugs - the most likely reason is buggy code. Here are a couple of tips on debugging; hopefully these will help to reduce time spent, frustration and annoyance levels.