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.
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
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).
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.
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.
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!
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!