This post is a round-up of some of the less-known debugging tricks I’ve learnt about related to the Chrome Developer Tools window. You might know some, but hopefully there’s at least one in here which is new.
Tracking down exceptions
Sometimes, you’re dealing with code with which you’re a little unfamiliar. For example, a page might load, but isn’t displaying correctly, and you’re not sure why. You’re suspicious that there’s an exception being thrown somewhere which might narrow down the problem, but you’re not sure where. That’s where the “Pause on exception” button comes in handy:
Clicking it toggles between 3 states:
- Dark grey = Off
- Light blue = Break on all exceptions
- Dark purple = Break only on uncaught exceptions (ones not caught by a try/catch block)
The last state is by far the most helpful; caught exceptions aren’t usually that interesting, as they typically indicate an “expected” path in the code; uncaught exceptions, on the other hand, are normally cause for concern. This button can help you establish more quickly where code is going awry.
An Anti-Trick: Disabling Cache
Browser caching has been for a long time – and remains – the bane of a web developer’s existence. Chrome has attempted to address this issue by adding a “Disable cache” checkbox inside the Developer Tools settings window:
However, be aware that this only works whilst the Developer Tools window is open. If, like me, you are limited in screen space, you may be in the habit of closing Developer Tools when you aren’t actively debugging a site. In that case, this checkbox won’t take effect. In that case, you’ll have to rely on another method, such as manually clearing the cache.