Chrome tools every Web developer will love

Chrome DevTools and powerful add-ons lend keen insights into your code

Chrome tools every Web developer will love
Google Chrome has fast become the most popular Web browser, eclipsing Firefox and Internet Explorer with over half of the browser market share worldwide, according to StatCounter. For Web developers who were early champions of the browser, this meteoric rise in popularity has come as little surprise, thanks to Chrome’s performance, built-in features, and growing ecosystem of third-party extensions.

While many Web developers still debug JavaScript on Firefox with Firebug, and those who work on apps for organizations standardized on Internet Explorer still debug with Visual Studio, these days more and more Web developers are making the switch to Chrome as their debugging browser of choice.

Here we take a tour of Chrome’s built-in developer tools, as well as several third-party extensions that help make Chrome such a compelling environment for Web developers.

Chrome Developer Tools
Chrome Developer Tools, aka DevTools, are a useful set of Web development and debugging tools built into Chrome. They include panels for Elements, Network, Sources, Timeline, Profiles, Resources, Audits, and Console.

You can open DevTools by selecting the Chrome hamburger menu at the top right of your browser window, then selecting More tools > Developer Tools. Alternatively, you can use Ctrl+Shift+I (or Cmd+Opt+I on Mac). Once the DevTools are open, you can use Ctrl+[ and Ctrl+] to move from panel to panel.

One of the most common uses of DevTools is to examine the HTML and CSS for an element of the Web page currently displayed in Chrome. This is achieved by clicking the Elements tab in the DevTools navigation bar. You can move the focus to a different element of the Web page by right-clicking on a page element in the Web page view and picking Inspect Element. You can also live-edit your CSS in the Styles pane on the right. This is a great way to see how to alter the look of a page in progress without having to make the round-trip to your code editor and back.

Tip: Disable cache
If you’re using Chrome to display and debug a Web page while editing one of its JavaScript or CSS files, you’ll likely want to disable Chrome’s cache. This setting works only while DevTools is open. To turn on this setting, click the settings gear wheel on the right side of the DevTools navigation bar, and then check the box marked “Disable cache (while DevTools is open).”

JavaScript Console
The Chrome JavaScript Console is the place to look for JavaScript error messages, in addition to several other kinds of messages to help troubleshoot your code. You can also interact with the current context from this console; that includes evaluating expressions and invoking the debugger. I often use this as a quick way to invoke and test an API that I’m developing.

You can invoke the console from the DevTools navigation bar by clicking Console, or directly via Ctrl+Shift+J (or Cmd+Opt+J on a Mac).

Note that the XHR calls in the image are XMLHttpRequest objects, aka AJAX callbacks. These show up because I have the AJAX Debugger extension installed, and I am running a Web app (Google Inbox) that makes heavy use of AJAX.

Audits
The DevTools Audits tab is one of a half-dozen ways to look at suggestions for improving the performance of a Web page in Chrome. The long list shown here is fairly typical of commercial sites — it isn’t unique to InfoWorld.

For example, “minifying” your CSS and JavaScript files to reduce the amount of white space and combining the minimized files to reduce the number of GET requests needed to load them is standard practice on production Web sites, and can make a big difference in site performance. It’s clear from the top two items that InfoWorld has omitted this step, possibly for debugging purposes.

Network
The DevTools Network tab shows you a timeline and list of the current page’s HTTP requests and responses. The page continues to update as you watch it. You’ll see fewer requests if you enable the cache. You can easily filter what you’re seeing to help you drill down on specific items that are taking a long time. Simply type a string into the Filter box to filter sources by name, or click the source type labels to the right of the Filter box to filter by type. It helps to know what’s going on in the script or page initiating each request; the page developer will typically know that, but you can often figure it out from the Sources or

PageSpeed Insights
Google PageSpeed Insights for Chrome used to be a separate product but has recently been folded into Chrome DevTools. In some ways, PageSpeed Insights is redundant with some of the other tools, such as Audits, but I happen to prefer it. If you click on the rule names, you can drill down to additional information and implement the suggested changes; I normally start with the rules marked “H” for high-impact. It’s the impact rankings that make PageSpeed Insights especially useful for me.

YSlow
Speaking of performance, YSlow is a useful Chrome extension for discerning why a particular page may be performing slowly. YSlow performs Web page analysis based on the 23 testable rules, out of the 34 total rules, for Web page performance devised by the Yahoo Exceptional Performance team. It was contributed to open source in 2012. YSlow is similar to PageSpeed Insights; I and many other Web developers use both. Grades are given for each test, ranging from A to F. I start my remediation efforts with the items graded F. Clicking on the test result will reveal YSlow’s recommendations for remediation. Not all of the included suggestions will be applicable; you can’t just blindly change everything as suggested.

YSlow is available for seven other environments besides Chrome, and its source code can be cloned or forked from GitHub.

Profiles
The DevTools Profiles tab can show you where a Web page is spending its time. On a page with heavy advertising, this can be a rather depressing analysis. Ignoring the idle time, I normally work from the longest times down to what I feel is a point of diminishing returns and see what can be improved. Often, taking the suggestions from PageSpeed and/or YSlow will be reflected in improvements in the profiles.

Resources
The DevTools Resources tab is a quick and easy way to look at all the scripts included by a Web page. I normally use this panel to figure out how a page works, and what it’s doing. The $(document).ready function shown here is clearly implementing some responsive page design with the help of jQuery.

Timeline
The DevTools timeline tab shows you graphically how a Web page is spending its time, at a high level. For example, we can see that the first 100ms (the bar on the left) is mostly spent loading and the second 100ms is mostly spent rendering. The page spends 3 seconds scripting, which is a lot, but most of the rendering is done before the scripting gets going, so users won’t necessarily notice all that scripting.

Device emulation
Chrome, like Safari, can emulate mobile devices for testing Web page designs, especially responsive designs. The mobile emulation includes generating touch events from a mouse. I often use this feature when I’m developing a mobile Web or hybrid app; it shows me about 95 percent of what I need to know about how the app will look on a device, without actually loading it on the device.

To enable mobile emulation, click the smartphone device icon in the DevTools navigation bar. You can choose to emulate a wide variety of popular smartphones and tablets and see page performance on a variety of network types, ranging from GPRS, to various grades of 3G, to WiFi.

Once you’ve chosen your device and network to emulate, you can vet page performance using DevTools’ various panels.

Chrome Inspect Devices
With some setup, Chrome on your computer can let you inspect and debug Chrome pages running in mobile devices that are attached to your computer over USB. Most but not all of the DevTools features can be applied when you’re doing device inspection; it’s useful to do when you get beyond the initial 95 percent you can learn from device emulation.

The setup is quite complicated and needs to be done both on your device and on your computer, but it’s well documented. The device setup has the side effect of enabling a bunch of developer features, including some, such as mock locations, that non-developers should never use.

Web Developer extension
If Chrome DevTools don’t do everything you need, one of the plugins you’ll want to add to Chrome is the Web Developer extension. It offers about 100 small features. You can activate it by clicking on the gear icon, navigating the tabs, and clicking on the feature you need. The accompanying slide gives an idea of the kinds of features Web Developer offers.

Firebug Lite
Before Chrome DevTools, most developers used the Firebug debugger on Firefox. A subset of Firebug, Firebug Lite, can be installed on Chrome. It’s still nice to have. My favorite feature is the DOM explorer shown here. Most of the other features have been duplicated by DevTools over the years.

WebStorm
WebStorm, an IDE for HTML/CSS/JavaScript and related technologies, includes a facility for debugging pages running in Chrome. It used to also be able to debug pages running in Firefox as well, but that has become problematic as the Firefox developers keep changing their APIs. You need to install the JetBrains connector into Chrome and run WebStorm (or one of its big brothers) to enable the debugging. Most of the interesting information shows up in the WebStorm debugger when the page hits a breakpoint.

NetBeans Connector
NetBeans, like WebStorm, can connect to Chrome for debugging purposes. The NetBeans connector adds a few sizing and inspection features that more or less duplicate features of DevTools. NetBeans can also debug using its internal copy of the WebKit browser engine.

---

 

Best Microsoft MCTS Certification, Microsoft MCITP Training at certkingdom.com