Using Chrome's Built-In Debugger for Channel Development

Google Chrome has a lot of great features built into it that can be extremely helpful for channel development. As a recent convert to Chrome I've done some delving into the built-ins that are supplied and have found that they have replaced my need to use Firefox and/or other external addons or applications in order to get the job done. This article is meant as a pointer to help find the built-in tools to help you doing channel development. What it won't do is go into much depth about why you need them or very much about best practices using them, therefore this article is likely targeted at people with a bit of channel development experience as opposed to someone who is starting at square one and trying to learn how to develop channels.

Chrome has a wonderful built-in debugging environment provided that requires no additional downloads or installations. It comes with this right out-of-the-box and hopefully this article will help you both find and leverage this in order to help you with channel development work.

Inspect Element

Probably the most straight-forward thing that Chrome's built-in debugging environment provides you is the ability to easily “inspect” any element within a loaded web page and is probably also the easiest way to get into the debugging environment where all the magic happens. Right click any item on the webpage and from the contextual menu select “Inspect Element” to bring up the debugging panel.

The debugging panel will then show you the actual HTML code for the element you have selected and provides a nice interactive way to expand or shrink any of the given HTML DOM elements within the page. By default, this debugging window is attached to the bottom of the tab you're currently browsing, but it's also possible to break this out into it's own dedicated window by using the “Undock” icon at the lower left of the debugging panel.

Element Being Inspected and Undock icon

This usage is fairly straightforward and there is a lot of additional information available about the element you have selected in both the right hand and bottom areas of the debugging panel.

You'll also notice at the top of the debugging panel, there are a handful of icons that we can select to give you other information on the page you're browsing. We will go into more detail about how to use some of these options to help you find what you're looking for in terms of channel development work.

Navigation Icons

Network Tab

Network Tab

The network tab can be extremely useful when you're trying to find specific items that may have been loaded separately from the main HTML such as images, videos, audio tracks, javascript, or CSS files or calls to other sites that are providing information that you may want to capture. While this area doesn't have the features that something like the external application Charles Proxy does it's often enough to get the job done.

All of the loaded items show up in the left hand side along with some basic information about the item. Clicking on any of these items will bring up more details about them in the right hand side of the window. It will also give you tabs across the top of the right hand area to get you to more detailed information you might be looking for. Also right clicking on any of the items listed in the left hand area gives you a contextual menu of other potentially useful functions.

At the bottom of the debugging window is a way to further refine what types of items you are looking for and give you the ability to filter this item list quickly. This option defaults to “All” but this filtering option can be helpful on a site that has a lot of items and can make it easier to see only the items you are interested in.

Network Filters

Lastly, in the bottom-left area of the debugging window there will be a search option which you can bring up using the hotkey for search (command+f or control+f depending on your OS). This allows you to quickly search for specific items and it's contextual to whatever tab you're currently in. It works the same way as Chrome's built-in page searching function works with web pages. In this case it highlights what you're searching for in the left hand items column and allows you to go to the next/previous items by either using the up and down arrow icons to the right of it or the hotkey equivalents.

Search Function

Javascript Console and XPath

With channel development, XPath can be your friend. Sometimes it's just not possible to find proper RSS feeds or other sources (such as XML or JSON information) listing the audio or video you want to use within your channel. While using feeds is wonderful when it's possible, sometimes they are not available or don't provide enough information for your channel's needs. In this case you're going to need to scrape web page content and most times there's no better way than using XPath.

While I've gotten fairly comfortable writing XPath queries off of the top of my head when doing channel work, sometimes it's nice to be able to verify that these paths are going to give you what you expect without having to work exclusively within the confines of the Channel Framework. Formerly I had used various addons or extensions in order to accomplish this, but after a bit of digging it seems that the javascript debugging console in Chrome has included the ability to do XPath queries interactively without the need to install anything extra. First of all you'll have to navigate to the console option in the debugging window.

Console Icon

Once you are in the console entry area you can interactively run javascript queries within the environment that the page you are on provides. XPath queries using the built-in support are done using the pre-defined variable $x(). For example, if you want to find all div elements that have been assigned the class “list-item” in the page you are debugging you could do this:

$x('//div[contains (@class, "list-item")]')

This query will return an interactive list of HTML elements that work similarly to the way they do in the elements tab: expanding, shrinking and otherwise interacting directly with the elements. Also handy to know is that pressing your up and down arrow keys will scroll you through all your previous query history (the same as most shells work) which allows you to easily expand on or edit a previous query. Once you've got your queries tweaked up for your needs it's easy enough to copy and paste them into your channel's code as required.

Tips for using Xpath

Lastly, just a tip for channel development and using XPath. Not all XPath queries are created equal! There are many ways to get to the same element when using XPath in an HTML page. While there are a few different ways of obtaining an XPath query to a specific element automatically in various different types of browsers (often with browser add ons) remember this: when the HTML layout for the site changes, even very minor changes, there's a good chance that this type of generated XPath query you're using could break. For example using generated queries like //body/div/div/div/p/span are generally not necessarily a good idea. They may give you what you want right now but may not stand the test of time; not to mention the fact that they are ugly and hard to read!

Instead, try to find ways to more directly query for the elements you are looking for, such as by finding them by id, class, or some other direct identification of the specific element. A well designed web page (and by designed I mean at the code level, not visually) will most often have some consistency to id's and classes in terms of presenting the content you want to capture and as long as the webmaster hasn't done a large site overhaul they will often continue working after smaller site tweaks. A query like the example that was used grabbing all elements with a class of "list-item" are much better suited for channel development and will likely stand the test of time a lot longer than the less intelligent generated XPaths that many of the extensions and plugins give you. A big part of building a good channel is its ability to keep working without constant maintenance.

Some Final Words

This article has been about giving you some basic pointers to get you going using Chrome's built-in debugging environment for channel development work. There are other browsers and browser plug-ins or extensions that provide similar environments, but I find the environment built into Chrome suits my needs very well for both channel development and other web related work. Explore these provided debuggers before you go out searching for add-ons or external applications, you may be surprised by what you find and may not need anything else to get the results you need to get your channels done.