Using Chrome Development Tools - Basic

The Chrome Development Tools

Google Chrome is a cross-platform WebKit based browser, which includes the full suite of WebKit based development tools. These are not visible (by default), but can easily be toggled "on" to provide a full suite of tools which allow for JavaScript and HTML+CSS introspection. They even allow for live updates to pages for experimentation and debugging.

For a complete description of Chrome Development Tools, refer to https://developers.google.com/chrome-developer-tools/docs/overview.

What follows is a description, from the CloudTV application developer's viewpoint, of the most commonly used features of the Chrome Developer Tools.

ElementsNetworkSourcesConsole
This panel allows inspection of page elements, as well as detailed information about each element (computed styles, metrics of margin/padding/dimensions), and event listeners connected to each element.  This panel provides a detailed breakdown of all network traffic. It will show every occurrence of a request, sortable by type, status (200 OK, 404 Not Found, 500 Internal Server Error). This panel provides a rich set of debugging tools which allows developers to set breakpoints and step through/over each and identify all variables within the scope of execution for each script. It should be familiar to developers who have worked in environments which include a native debugger. Perhaps one of the favorite features of the Chrome Developer Tools, the console provides a fully interactive scripting tool. This feature allows the user to execute JavaScript real-time, see the output of console.log() messages, inspect stack traces when an error is thrown, and easily interact with the scripts in your page.

 

Elements Panel

Common use cases for this panel include: chrome-dev-tools-elements

  • Discover why some text on your page is 15px when you thought you set it to be 12px.
  • Find where that extra 2px margin on your page is coming from.
  • Do you populate the HTML of your page using document.write() or $(document.body).html(...)? You may want to inspect the live DOM-tree to see how it came out.
  • Quickly make changes to CSS in a page without editing source, refreshing, and continually switching between your IDE and browser.

The Elements Panel in Chrome allows developers to interact and view the full DOM-tree, giving a rich set of tools to measure in pixels each element, full in-page highlighting of elements as you mouse over them in the panel, and editable CSS. You can even edit the attributes of your HTML elements inline by double-clicking on them.

Network Panel

chrome-dev-tools-elements

The Network Panel enables developers to see the headers of AJAX requests and view the JSON/XML responses in a color-formatted tree.  See how long images are taking to load, and where bottlenecks could be in your page load times. The Network Panel provides you with a sortable list of all network requests, and a timeline covering all requests. 

Use the links in the footer of the Network Panel to show only Documents/Stylesheets/Images/.../WebSockets/etc. 

You should always run through applications with this panel open, in order to debug certain issues such as misspelled assets resulting in 404 errors, and to help you identify services that are taking too long to respond. Consider, for example, an application which loads tweets from twitter, but the response at times can take 1.5 seconds. You may then realize you can reduce load times by changing the number of items you request from twitter from 100, down to 10 of the most recent tweets, and since your application only shows 2 or 3 at a time, this optimization is going to speed up your application load time. These types of decisions can be aided by using the Network Panel to identify bottlenecks.

Sources Panel

chrome-dev-tools-elementsThe sources panel is by far the most developer-focused panel available in Chrome. It bridges the gap between traditional IDEs and developing in a scripting environment that has a disconnected emulator (the browser).

To get started, on the left side of the panel you will notice a small play icon, which, when clicked, expands and lists all of the resources that include JavaScript. Select a resource to browse that file's source code and insert breakpoints.

Once breakpoints are present, refresh the page and you will see script execution pause (indicated with an overlay on the page that says "Paused in Debugger," and have the opportunity to step in/over/out of the current function execution while having access to all of the current scope variables, global variables, and call stack.

Probably one of the least understood panels by new developers, the Sources Panel improves your ability to debug — no longer do you need to:

alert("Hello from inside MyFunction");

...to identify where your script is failing to execute as expected. You can spare alert() and console.log() the trouble, and can debug using breakpoints.

Console Panel

chrome-dev-tools-elements This is the location where the output of console.log() appears. In your JavaScript code, you can add in trace statements which log any object, and they will be logged to the Console Panel. Logging an object will not show [Object object], but the full object including all properties, color formatted and presented to you as a tree that can be expanded/collapsed per property.

The next-best feature of the Console Panel is that it will give you realtime access to the scripting environment of your page. That means you can interact with the page, changing window.currentXYZ to a different value, calling refreshMylist(), or even creating new functions. This gives you the ability to test JavaScript code as well. For example, to see how to round a number, just begin typing "Math." and a dropdown of available functions in the Math object will be displayed.

The Console Panel is a development tool which will allow you to quickly test and see the output of JavaScript code, and interact with your page. It is truly a live debug tool that saves a lot of frustration and time-consuming effort.

  • Thursday, 20 December 2012

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2019 Active Video Networks. All Rights Reserved