Chrome's Excellent Developer Tools

Thank you Chrome for your excellent developer tools. I’m a little late to the web development party, and equally late to appreciating these tools, but I couldn’t imagine developing a web game without them and felt it was my duty to express my thanks.

On Thwack we’re using a mixture of HTML, CSS, and Javascript to construct the game. Javascript is used for the game simulation and graphics, while HTML and CSS are used to construct the interface and in-game menus. My appreciation for the debug tools blossomed while using CSS to construct one of these menus. In particular, I loved the elegant representation of CSS and the ability to edit it on the fly.

CSS is inherative in nature, with child elements inheriting styles from parents and grandparents. This can make for elegantly structured websites whose entire look can be changed with a few well placed edits. It can also make for a frustrating nightmare when you’re trying to determine why your menu won’t sit exactly where you want it and what is causing your font size to multiply 3x on mouse rollover. When you’re creating more complex sites, or in our case, creating menus dynamically in Javascript, these frustrating cases pop up more and more frequently. Thankfully, that’s where these tools shine.

You can even inspect lolcats, though I'm not sure how much you'll learn.

In Chrome, visualizing the CSS that’s affecting an element is as easy as right-clicking on that element and selecting ‘inspect element’. On doing so, the debug window will appear. In the right column you’ll find all your CSS questions answered. This column shows all of the styles affecting an element, grouping rules under the selectors that apply. The groups are stacked in order of inheritance with those directly applied to the element on top. Rules that have been overridden by more closely related rules are stricken through, invalid rules have handy “you’re doing something wrong” warning signs next to them, and more. With all of these things visually displayed it’s easy to determine exactly why an element is behaving as it is.

The developer tools!

Even better, this window allows you to edit and visualize rules in real-time. This is a giant time-saver when you’re tweaking things or experimenting. I find it easiest to make a rough guess of what I want, and then do the fine tuning from within the debug window. When I’ve settled on what I want I copy the final rules back into my code.

So once again, thanks for the great tools. They make my life easier by helping me see exactly what’s going on inside my game.