Zernyu Chou

06/28/2011

Developer Tools: Google Chrome

Zernyu Chou // in Technology

 

With Google's Chrome browser now being developed at a lightning fast six week release cycle, users are able to get their mitts on shiny new features sooner. Some of these features sneak in and will never be seen or used by the vast majority of web surfers; these are improvements to the Chrome Developer Tools. Google has been building up an impressive suite of front-end development debugging tools that are bundled right into the browser instead of being a separate downloadable extension. Having been a Firebug user for years, it was hard to part ways when I switched to using Chrome as my main browser. The developer tools were somewhat lacking then, but after so many iterations, with the Chrome developer channel browser being at version 14, the developer tools have grown increasingly more powerful and I have not looked back since. Going over every little feature of the developer tools would require a long series of blog posts, so in the interest of TL;DRers like myself, I will highlight some of my favorite features (note that some of these features are also available in other debugging tools, especially Safari Developer Tools which are essentially the same thing).

Reverse Engineering

Ever see something cool and wondered how it was done, only to see that the JavaScript code was minimized and obfuscated? One of the latest CDT additions is a "Pretty print" feature which will quickly auto-format JavaScript code for you which will get you half of the way there to understanding how the code works.

Minimized and obfuscated JavaScript

JavaScript with auto-format

Page Speed

There are several flavors of page load speed analyzers out there, and one of the popular ones is an open source tool called Page Speed. It analyzes whatever page you throw at it and will provide tips on how to optimize the loading time of that page. With the Chrome Developer Tools, this handy tool already comes bundled. After all, page load times do play a small factor in Google search rankings.

A Page Speed audit being run in Chrome Developer Tools

A Page Speed audit being run in Chrome Developer Tools

Powerful Profiling

Chrome's Developer Tools come jam packed with powerful CPU and Memory profiling tools to help you find those bottlenecks in your JavaScript code or even find when your backend code is giving slow responses. These tools are invaluable when you need to figure out what is causing a certain page to slow down, whether it's from loading scripts blocking the page load, the browser itself taking a while to render those millions of DOM nodes you might have created, or some of your code eating up a lot of memory.

A timeline for how long it took to load elements on a page, run code, or receive data from the server in Google Chrome Developer Tools

A timeline for how long it took to load elements on a page, run code, or receive data from the server in Google Chrome Developer Tools

Memory usage of different objects in Google Chrome Developer Tools

DOM Selection History

I know this is also a feature in Firebug, but it is such a nifty shortcut that I wanted to share it with people who did not know about it. In the Chrome Developer Tools, whenever you click on a DOM node in the Elements tab, it saves a history of the five most recent DOM nodes you've clicked on as variables in the JavaScript console. This makes it quick and easy to run commands on DOM nodes without needing to type out document.getElementById() (or whatever shortcuts your JavaScript framework provides) in order to reference a certain DOM node. These variables are $0, $1, $2, $3, and $4. This comes in handy when you want to quickly test some JavaScript on a node that doesn't have an ID on it. You can simply click on the node, then type something like this into the console:

$0.appendChild(document.createTextNode("Hello World!"));

An example showing code in Google Chrome Developer Tools

Google has built a very solid set of tools for making your front-end development life easier. It comes with all the standard bells and whistles you would expect from a debugging tool such as on-the-fly HTML and CSS editing and a JavaScript debugger with break points and stack traces, but it also gives you enough tools that you won't have to install any extra extensions. If you have never tried Google Chrome or only tried using it a few years back, I highly suggest you give it another try; it has come a very long way in the past few years.

 

Share Article

Zernyu Chou

11/12/2010

Early Adopters Versus Usability

Zernyu Chou // in Technology

We are in a browser arms race. As interactive websites increase in number, the demand for better browser technology grows proportionally. The latest goal: complete HTML5 compatibility. The five major players, Firefox, Chrome, Safari, Opera, and Internet Explorer, scramble to be the fastest, most compatible browser with the best features.

Following suit, developers are jumping on the latest technologies and incorporating them into their websites. Traditionally, a well-designed site should be accessible by any browser or any internet connection, regardless of browser capabilities; the prettiest sites should still function with JavaScript and CSS disabled.

Because we are rapidly transitioning from antiquated browsers to powerful, cutting-edge browsers, a new argument has cropped up between early adopters and usability enthusiasts: should we now pave the way and force users to upgrade to modern browsers, or should our websites degrade gracefully for the users who are unable to view rich media? Yahoo!’s principal front end engineer, Nicholas Zakas, decided to get some statistics to see how important this issue really is.

Nicholas Zakas tests Yahoo!’s users’ JavaScript use

Zakas ran a test on the Yahoo! homepages of several countries to see how many visitors had JavaScript turned off. The testing pool is significant – over 300 million users visit just the US homepage each month. After pruning the data set for bots and web crawlers and making sure it represented only human visitors using desktop browsers, he found interesting statistics. Across the US, UK, France, Spain, and Brazil, roughly 1% of Yahoo!’s users had JavaScript disabled. Yahoo! America had the highest amount of JavaScript-disabled users, at 2%. Zakas concluded that it is well worth the investment in creating a robust user experience, because the overwhelming majority of users are able to see it.

Zakas also found that 100% of the several hundred million visitors' browsers had JavaScript capabilities. Furthermore, the only browsers detected were either modern browsers or unknown browsers with modern capabilities (such as new beta releases of modern browsers). This means that the users who did not have JavaScript enabled in their browsers turned it off on purpose and knew how to re-enable it. These findings are significant, but we should not let our excitement get in the way of usability. HTML5 brings a whole new set of challenges.

Another era, another challenge

Now that the internet is ready to handle both content and presentation, what our visitors’ browsers can handle presents a new problem. For example, one of HTML5’s many JavaScript API additions is geolocation, the ability to pinpoint the visitor’s location on a map. While most browsers support geolocation, users in the Internet Explorer camp are left out unless they are running the Internet Explorer 9 beta.

It would be wise to include a fallback address bar for users whose browsers do not support this new technology so that your site can, like old times, degrade gracefully. Gone are the days of gracefully degrading JavaScript and CSS for stone-age browsers. We now must gracefully degrade HTML5 and CSS3 for modern stone-age browsers.

 

Share Article