Eventual Consistency

Google Chrome Tips for Web Developers

Google Chrome comes packed with an awesome suite of tools to aid in development. They contain countless features and are an awesome asset when used properly. Here's a collection of a few tips I have gathered.

Break on DOM changes

Chrome lets you drop into the debugger when a DOM element is changed or removed. To do this, right click the element on the page and select Inspect Element to bring up the Elements panel.

Highlight the DOM element you want to break on in the panel, right click it and choose Break On... and select the cases in which you would like to set a break point. It's really easy and helps a lot - Great for those "Who is moving my #!@#$@% div?!" moments.

Chrome DOM Break

The magic of $0 (Dollar-Zero)

Sometimes, when fiddling in the console, we want to reference a certain DOM element on the page. Instead of querying for it manually with document.querySelector or similar methods, we can simply use the Elements tab to select it.

From the Elements tab, highlight the desired element, then open the console tab, and type in $0. It is now referencing the highlighted element and we can operate on it just like any other element, as well as wrap it with jQuery using $($0) for easier manipulation and traversal (assuming jQuery or Zepto are loaded on the page).

It is also possible to do the reverse - using a reference to a DOM node in the javascript console to jump to that element in the Elements tab. to do that, use the built-in inspect() function. It takes the reference to the node as a parameter, and will "jump" to the Elements tab upon execution.

See your unused CSS rules (and other optimizations)

This is a rather new feature of the developer tools, but it's really useful. from the developer tools panel, open the Audits tab. Make sure that Audit Present State is selected, and hit Run.

The Audits tab

It takes a couple of seconds to analyze the page, before spiting out a report. In this report you'll find all kinds of general purpose best practices, like sub-optimal order of CSS and JS files, cookies that are too large, images without a specified dimensions, but the most interesting feature here is called Remove Unused CSS Rules. it will show you a list of CSS files, with a percentage indicating how much of that file is not used on the current page. you can expand each file and even see the exact rules that don't match anything on the document.

In some cases you might be able to remove whole CSS files you are not using, or old CSS rules from elements you've removed long ago and forgot about.

Don't think of this as a performance improvement but rather as a way to make your CSS files easier to read and maintain.

Emulate mobile browsers

This one is also rather new. This feature helps debug and test your app on mobile devices without actually using one, by emulating the resolution, user agent and touch events sent by a mobile device. It doesn't replace actual handset testing, but it helps a lot during development to get some idea of how it is going to look on a particular platform.

To activate it, open the developer tools panel and click the little cog icon (should be on the bottom right corner of the panel). Open the Overrides tab, and select the User Agent checkbox. Now you can flip through the various device presets. It will even automatically emulate the device's resolution for most mobile devices. Of course, you can input custom user agents and resolutions and see how your app responds.

The Audits tab

Enable experimental features

Chrome ships with some experimental, in-development features even in the stable release. They are simply turned off by default. you can access and enable them by navigating to about:flags. As of this writing, Chrome 23 is the stable release, and it includes a few really cool ones:

  • Tab Overview - Only available for Mac users. it creates an Exposé-like tiled view of all open tabs for this session, by swiping down on the trackpad with 3 fingers.
  • Enable CSS Shaders - CSS Shaders (now known as Filter Effects). they are awesome!
  • Enable Experimental JavaScript - This will essentially turn on support for ECMAScript 6 (aka Harmony). You can learn more about its features here.

Don't forget to restart your browser to enable these changes.

Of course, there are a ton of other features I haven't touched that are really useful. these are just a few I've recently learned about myself, and found them worth sharing.

I'd love to hear your ideas, tips and hate in comments below, or on Twitter at @ozkatz100!

comments powered by Disqus

Hi, I'm Oz Katz

I am a co-founder and CTO over at Swayy.

I usually write about software development using Python, JavaScript and other awesome, open source tools.

Feel free to reach out on Twitter, or contact me using the links at the bottom of the page.