Skip to content

TechRepublic

  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
Resources
  • TechRepublic Premium
  • TechRepublic Academy
  • Newsletters
  • Resource Library
  • Forums
  • Sponsored
Go Premium
Popular Topics
  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • Accounting
  • CRM
  • Academy
  • Project Management
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
View All Topics
Go Premium
Enterprise Software

Hands-on with the Google Chrome Development Tools

By Ryan Boudreaux140 March 29, 2012, 6:33 AM PDT

Image
1
of 55

01202012Figure_A.gif
01202012Figure_A.gif
Hands-on with the Google Chrome Development Tools

Elements Panel

Elements Panel

ntThe Elements panel of the Developer Tool lets you see everything in one DOM tree, and allows inspection of the DOM elements. I often visit the Elements tab when needing to identify the HTML snippet for a particular aspect of the page. The elements include the Computed Style, Styles, Matched CSS Rules, Metrics, Properties, DOM Breakpoints, and Event Listeners.

n

ntIn this demonstration I will start with using the Model Railroad Hobbyist page, with the page open in Google Chrome, right-click anywhere on the page and select Inspect Element at the bottom of the dialog box. By default, the console panel will open to the Elements Panel. With the Elements Panel active, we can view the HTML code, select an element, and view its properties. In this case the metrics for the main content block show how it is read by the browser, the area selected also becomes indicated by the blue overtone in the top browser panel. This shows the page’s HTML elements in the main pane, and styles, metrics, properties, and event listeners in the right-hand sidebar. This is very useful when you are curious about which part of the HTML generated a particular page element.

n

ntNote: This compilation gallery is made up of these original blog posts, which you can also view individually in the Web Designer blog:

n

    nt

  • nttGoogle Chrome Developer Tools: Elements Panel
  • nt

  • nttGoogle Chrome Developer Tools: Resources Panel
  • nt

  • nttGoogle Chrome Developer Tools: Console Panel
  • nt

  • nttGoogle Chrome Developer Tools: Network Panel
  • nt

  • nttGoogle Chrome Developer Tools: Scripts Panel
  • nt

  • nttGoogle Chrome Developer Tools: Timeline Panel
  • n

Hands-on with the Google Chrome Development Tools

ntThe DOM Elements Tree, including its inline scripts and styles, are syntax highlighted; for example, when I select the

tag, I get this view.

Hands-on with the Google Chrome Development Tools

ntSelecting any tag under the elements panel will take you to its associated styles, metrics, and properties, included but not limited to tags such as

,

, and classes as well. One nice way to look under the hood is to select a class or id anchor attribute; for example, in the Google Code website, I selected the

and in Elements panel view, I can see what the Matched CSS Rules that define the attribute are. As displayed here, we can determine that font-size is 1em, margin equals zero, padding is .1em, 0, and so on.

Hands-on with the Google Chrome Development Tools

Modifying on the fly

Modifying on the fly

ntAnother cool feature is that you can modify any of the code, style sheets, or scripts on the fly with in place script editing, giving you a review of the modifications on the client level running in Google Chrome. This gives you a nice way to see how other websites are built, and also gives you a great way to tweak your own sites. Therefore, this integrated environment allows for debugging, optimizing, and understanding a web application, or website. So, let’s take a look at some of the panel tools to peek under the hood of several websites.

n

ntNow, let’s say you want to see what happens with the styling when you disable or modify a property. From the Matched CSS Rules you can disable any of the properties by deselecting the green check box, as shown here, where the margin has been disabled for the class=”g-unit g-first” results in the News and Announcements sections, dropping below the Featured Products section of the page.

Hands-on with the Google Chrome Development Tools

ntRemember, you are only modifying the local file in your browser; you are not making updates to the actual web site; I just wanted to put that out there, as it seems there was some confusion by several folks about this function from several online boards and forums. The benefits of looking under the hood and making on-the-fly modifications allows you to study and learn how others are coding and styling the look and feel for their online content.

n

ntYou can also double-click any non-user-agent style property to edit or delete; for example, double-click the float: left; property. You should see something like this as displayed here.

Hands-on with the Google Chrome Development Tools

Gear Menu

Gear Menu

ntTyping, or pasting in, one or more properties adds the new properties to the style rule. If you edit a style property value with a number, you can use the Up or Down arrow keys to change the number, and holding the Alt/Option key steps in increments of 0.1; holding the Shift key steps in increments of 10. You can also add more properties by double-clicking any white space to the left or below any existing entries or via pasting multiple properties separated by a semicolon. You can edit the style selector names via double-clicking their names, and you can also add new style selectors using the Gear Menu, located to the right of the Styles section bar as displayed here.

Hands-on with the Google Chrome Development Tools

Metrics box model

Metrics box model

ntThis allows you to edit any of the absolute, relative, or fixed CSS box model metrics as displayed on the right side panel. Here is the example.

Hands-on with the Google Chrome Development Tools

Event listeners

Event listeners

ntThe Event Listeners are shown for the selected nodes and are in the order in which they are executed and captured during the rendering, and are separated by type. If a node has both onclick and onmouseover listeners for instance, they will appear in different sections. Filter preferences can also be set from the Gear menu, and you can choose to see only the listeners registered on the selected node, or the entire event flow. Here’s an example of the click and document events.

Hands-on with the Google Chrome Development Tools

Search function

Search function

ntYou can also search within the Elements Panel for any code, tags, ids, classes, and scripts on which you may want to focus your attention — even create a search list of high priority matches that you need to get to in a quick fashion. For example, typing u201cformu201d into the search box, results in 10 matches, and highlights the first instance.

n

ntThe Elements panel also supports XPath and CSS selectors as queries in the search box, in addition to the plain text demonstrated above.

Hands-on with the Google Chrome Development Tools

Google Chrome Resources Panel

Google Chrome Resources Panel

ntThe Resources Panel  allows you to look under the hood to view Frame Resources, HTML5 Databases, and Cookies associated with the active browser page session.

n

ntFor this demonstration I am going to open the HTML5 Demo: Web Database page and then right-click anywhere on the page and select Inspect Element. By default the console panel will open to the Elements Panel; click on the Resources tab to open the Resources Panel.

Hands-on with the Google Chrome Development Tools

ntOnce inside the Resource Panel, we can view the HTML, which by default, opens to the web page file contained within the Frames resources. In this case, we see database and then the database page file. Also under Frames are all the other resources such as folders for Images, Scripts, and Stylesheets. Clicking on the Images drilldown displays a listing of all images associated with the page, and clicking on the u201cforkme_left…u201d image results in the right panel display including the full name of the image file, the dimensions, the file size, the MIME type, and the full URL for the image file.

Hands-on with the Google Chrome Development Tools

Scripts drilldown display

Scripts drilldown display

ntContinuing on the left-side panel we find the Scripts drilldown display and can view four .js files; when the u201ctweets.jsu201d file is highlighted we can view the contents of the file within the right-side pane.

Hands-on with the Google Chrome Development Tools

Stylesheets

Stylesheets

ntNext we see the Stylesheets, and one file is found — the u201chtml5demos.cssu201d.

Hands-on with the Google Chrome Development Tools

ntIf you double-click the file name, Chrome will open a separate window and display the file in text view or source mode.

Hands-on with the Google Chrome Development Tools

HTML5 Databases

HTML5 Databases

ntNext, under the Resources Panel, we can view the HTML5 Databases, and in this case we can see that the html5demos page has a data source to the u201ctweetsu201d database .

Hands-on with the Google Chrome Development Tools

ntAt the chevron prompt, you can type in select * from tweets. The input in the database console has auto-completion and tab-completion for common SQL words and phrases along with table names for the database. Notice as you type in the phrase that it will auto-complete before you finish.

Hands-on with the Google Chrome Development Tools

ntUpon hitting enter (return) the resulting query displays the database in table format with the column id, text, created_at, screen_name, and mention entries using the Web Database API to store the tweets.

Hands-on with the Google Chrome Development Tools

Cookies

Cookies

ntThe final resources we will look at are the cookies associated with the domain and web page. By clicking on the Cookies, and then the u201chtml5demos.comu201d we can view all the associated cookies, their name, value, domain, when they expire, and the size of the cookie. You can also delete them from this listing by highlighting first, and then with a right-click, select Delete. The cookies for this page demonstration are displayed here.

Hands-on with the Google Chrome Development Tools

Google Chrome Console Panel

Google Chrome Console Panel

ntNow, I’ll demonstrate using the Console Panel to conduct debugging, inspect the DOM, or analyze any HTML errors for selected web pages. In previous posts on the Google Development toolkit, I introduced the Elements Panel and the Resource Panel.

n

ntIn Google Chrome, select any page you wish to inspect; for this example, I will be demonstrating the Console using the Wikipedia.org website.

Hands-on with the Google Chrome Development Tools

Inspect Element

Inspect Element

ntThere are several ways to open up the Google Web Developer Tools; the easiest way is to just right-click on any page element and select Inspect element, resulting in this display for the Wikipedia.org site; this is the docked view. If you wish to undock the tool, click the dock/undock icon at the bottom left of the tool

Hands-on with the Google Chrome Development Tools

Console Panel

Console Panel

ntNext, click the show Console button on the far right side of the toolbar. If there are any errors or warnings detected, they will be displayed in the bottom-right corner of the window. Clicking on any of these errors will also open the Console panel.

n

ntThe Console provides auto-completion and tab-completion; therefore, as you type expressions, property names are automatically suggested. If there are multiple properties with the same prefix, pressing the Tab key will allow you to cycle through the list. Pressing the right arrow key will accept the highlighted suggestion. The current suggestion is also accepted by pressing the Tab key if there is only one matched property. The Console panel supports all 21 functions provided in Firebug’s Command Line API. Here is Console panel un-docked.

Hands-on with the Google Chrome Development Tools

ntCommand Line API is particularly useful when working with the Elements panel in conjunction with the Console panel. While in the Elements panel, open console by pressing the Esc key.

Hands-on with the Google Chrome Development Tools

ntThe following examples will demonstrate returning a single element with a given id using the command line function $(id). At the Console prompt, type $(u201cbodyContentu201d) and press enter. The command dumps the node with the given id — in this case, bodyContent — and displays it in the Console panel.

Hands-on with the Google Chrome Development Tools

ntUsing the command line function $0 returns an array of elements that match the given XPath expression. For example typing $0 at the Console prompt will dump the most recently selected node into the console.

Hands-on with the Google Chrome Development Tools

ntThe command line function $1 returns the currently-selected object in the Console panel, and $n will display previously selected nodes.

n

ntInspecting an object in the most suitable tab, or the tab identified by the optional argument tabName using the function inspect (object[, tabName]), the available tab names are “html”, “css”, “script”, and “dom”, for example at the console prompt type in inspect (searchform) and press enter; the selected object with the given id is displayed .

Hands-on with the Google Chrome Development Tools

ntThe dir (object) function prints an interactive listing of all properties of the specified object, and will appear identical to the view that you would see in selecting a DOM tab. In this example, at the console prompt type in dir (searchform) and press enter, the resulting display dumps the object with the given id, and as a JavaScript object with its associated properties.

Hands-on with the Google Chrome Development Tools

ntThe dirxml (node) function displays the XML source tree of an HTML or XML element. In this example, type dirxml (searchform) into the Console prompt and click return; the resulting dump displays the object of the given id as an HTML sub-tree.

Hands-on with the Google Chrome Development Tools

Google Chrome Network Panel

Google Chrome Network Panel

ntThe Network Panel is part of the Google Chrome Developers tools, and it allows you to inspect resources as they are accessed over the network. The example demonstrated in this segment will inspect the U.S. edition of CNN.com.

n

ntIn Google Chrome, go to http://www.cnn.com, then right-click anywhere on the browser and select Inspect Element; once the tool panel opens up, click to select Network, then press F5 on your keyboard to refresh the page. You will notice that the timeline will begin populating file names in a waterfall list of associated network activities.

Hands-on with the Google Chrome Development Tools

ntLatency, or the time between making the initial request and the server’s first response is displayed on the timeline as the lighter shaded bar for each named file. Moving your cursor over a u201cbaru201d in the timeline will display a detailed balloon, as in the example. The file http://www.cnn.com displays the DNS Lookup at 42ms, Connecting at 67ms, Sending at 0, Waiting at 113ms, and Receiving at 232ms.

Hands-on with the Google Chrome Development Tools

ntThe blue vertical line displayed in the waterfall timeline on the right panel represents the firing of the DOMContentLoaded event, and the red vertical line represents the Load event. These two indicators are provided to help you determine the total time it takes for pages to load and gives you a benchmark from which to make improvements to your pages. The two events are displayed here, and the screen capture is further down the named resources list.

Hands-on with the Google Chrome Development Tools

View web page resources

View web page resources

ntOn the bottom of the Network Panel are options to view the web page resources, including All, Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSocket, and Other. I’ve selected the Scripts resource in the example.

Hands-on with the Google Chrome Development Tools

ntBy default the display is sorted by Timeline; however, you can modify the sorting from a drop-down list which in addition to the Timeline also includes Start Time, Response Time, End Time, Duration, and Latency.

Hands-on with the Google Chrome Development Tools

ntSelecting the sort by Latency, I get this view.

Hands-on with the Google Chrome Development Tools

ntAnother sort that you can run in either ascending or descending order is by the Size column, in descending order from the largest resources to the smallest.

Hands-on with the Google Chrome Development Tools

ntNow, click on the http://www.cnn.com resource entry from the left-side pane, and the display on the right-side pane will default to the Preview tab mode, which shows the HTML under the hood. Other options include Headers, Response, Cookies, and Timing. This is the Headers tab.

Hands-on with the Google Chrome Development Tools

ntThe Cookies tab

Hands-on with the Google Chrome Development Tools

ntThe Timing tab

Hands-on with the Google Chrome Development Tools

ntThe Network Panel Preview tab is similar in functionality and view to the Resources Panel’s Resource view, here.

Hands-on with the Google Chrome Development Tools

Google Chrome Scripts Panel

Google Chrome Scripts Panel

ntThe Google Chrome Scripts Panel allows you to debug JavaScript code that is attached to active websites. In this demonstration, I will be using The Salvation Army website, to view and manipulate the associated JavaScript files. All told, the website includes thirteen *.js files and I will only demonstrate functionality with a few of the associated script files.

Hands-on with the Google Chrome Development Tools

nt#1 With the Salvation Army website open in Google Chrome, right-click anywhere on the page and select Inspect Element.

n

nt#2 Select the Scripts tab to make that the active panel; by default, the u201capplication.jsu201d file opens as displayed.

Hands-on with the Google Chrome Development Tools

ntThere are several items to note on navigating through the Scripts Panel, and they are listed and highlighted here.

n

    nt

  • nttBackwards and forwards history buttons
  • nt

  • nttDrop-down list of scripts
  • nt

  • nttPause, resume, and step through code controls
  • nt

  • nttPause on exceptions toggle includes options:ntt
      nttt

    • nttttDon’t pause on exceptions
    • nttt

    • nttttPause on all exceptions
    • nttt

    • nttttPause on uncaught exceptions
    • ntt

    nt

  • n

Hands-on with the Google Chrome Development Tools

ntHere is a partial drop-down list for this example. Notice that several scripts are organized under the /javascripts directory; several are located under another directory named /WebManager/themes/20/javascript, and so on.

Hands-on with the Google Chrome Development Tools

Set breakpoints

Set breakpoints

ntYou can set one or many breakpoints in one or many scripts by selecting the line gutter to set a breakpoint for a particular line of code; then, you can select another script and set another breakpoint and so on as shown. Notice on the right panel the breakpoints that you set now appear with checked boxes.

Hands-on with the Google Chrome Development Tools

ntClicking on any one of the entries will jump the left side panel to that line of code and will temporarily highlight that line.

Hands-on with the Google Chrome Development Tools

ntOnce you have a breakpoint set, you can right-click on the blue tag breakpoint indicator in the gutter line to set a conditional statement for that particular breakpoint. Type any expression and the breakpoint will pause only if the condition is true. Delete a breakpoint by clicking the blue tag breakpoint indicator. The breakpoint indicator has several states: Continue To Here, Remove Breakpoint, Edit Breakpoint, Disable Breakpoint, and Save As… which will save the *.js file.

Hands-on with the Google Chrome Development Tools

ntWith the u201cjquery.jsu201d file selected, pause the script and then you can view the current call stack and the associated in-scope variables in the right-hand side bar.

n

ntThe list of  keyboard shortcuts available in the Scripts panel includes:

n

    nt

  • nttContinue: F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
  • nt

  • nttStep over: F10 or Command-‘ (apostrophe) on Mac or Control-‘ (apostrophe) on other platforms.
  • nt

  • nttStep into: F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
  • nt

  • nttStep out: Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on other platforms.
  • nt

  • nttNext call frame: Control-. (period) on all platforms.
  • nt

  • nttPrevious call frame: Control-, (comma) on all platforms.
  • n

Hands-on with the Google Chrome Development Tools

Google Chrome Timeline Panel

Google Chrome Timeline Panel

ntSimilar to the Network Panel, the Google Chrome Developer Tools Timeline Panel provides an overview of the time that is spent loading a web page document or application.

n

ntIn this demonstration, I will be using The Weather Channel (TWC) to illustrate the online tool. Of course you can use any website you wish, to do your own experimenting.

n

ntDevelopers at Google have been working on improving scalability and traceability while providing more details on recorded events that display in the Timeline Panel.

n

ntIn Google Chrome, type in the URL http://www.weather.com/ into the address bar or search for u201cThe Weather Channelu201d. Once open to the page, right-click and then select Inspect Element.

Hands-on with the Google Chrome Development Tools

ntIf the timeline panel is not already selected, make sure you click on Timeline.

Hands-on with the Google Chrome Development Tools

Record button

Record button

ntNext, you will want to start to record a session by clicking on the Record button, then refresh the page (F5); once clicked, you will see the record button turn from gray to red while recording, and the timeline will begin to capture the Loading, Scripting, and Rendering timelines for the web page.

Hands-on with the Google Chrome Development Tools

Recording a session in Timeline

Recording a session in Timeline

ntAfter several seconds of capturing, you can click the record button again to stop the timeline recording session, the circle will change back to gray. I let the record session in this demonstration run for about 12 seconds.

n

ntThe top level view shows the events which have been recorded and are grouped into three categories. The timeline for Loading is represented with a blue line, Scripting is a yellow line, and Rendering is a purple line. The Loading category records all network-related events. The Scripting category includes JavaScript execution upon various events, and Rendering calculates CSS rendering and paint-related activities as they are loaded. The top area also includes a resizable sliding window.

n

ntThe center area lists a set of records, and these records have titles to the left and timeline bars to the right. Hover over a record or clicking over an event provides details on the events, as shown with the Send Request record.

Hands-on with the Google Chrome Development Tools

Layout Record

Layout Record

ntExpandable compartments on the graph visualize nested records, as shown with the Layout record.

Hands-on with the Google Chrome Development Tools

ntAnother way to further investigate a scripting event is to click on any yellow Record from the right panel. In this case, I selected an Evaluate Script, and then clicked on the resource link, which took me to the Scripts panel where I could view the script file which the event called..

Hands-on with the Google Chrome Development Tools

ntHere is the script file called.

Hands-on with the Google Chrome Development Tools

ntClick on any blue record to view a network event; in this case, I selected a Send Request as shown. .

Hands-on with the Google Chrome Development Tools

Google Chrome Developer Tools

Google Chrome Developer Tools

ntHere, I clicked on the resource link and it displayed this image in the right side panel.

n

ntThe Timeline Panel gives you a look under the hood of how the browser renders web pages and lets you see which processes and resources require more computing power for both rendering and JavaScript load times. This tool allows you to visualize where you need to fine tune and better optimize your web applications.

  • Enterprise Software
  • Account Information

    Share with Your Friends

    Hands-on with the Google Chrome Development Tools

    Your email has been sent

Share: Hands-on with the Google Chrome Development Tools
Image of Ryan Boudreaux140
By Ryan Boudreaux140
Thirteen years of web and graphic developer experience.
  • Account Information

    Contact Ryan Boudreaux140

    Your message has been sent

  • |
  • See all of Ryan's content

Daily Tech Insider

If you can only read one tech story a day, this is it.

TechRepublic TechRepublic
  • TechRepublic on Facebook
  • TechRepublic on X
  • TechRepublic on LinkedIn
  • TechRepublic on YouTube
  • TechRepublic on Pinterest
  • TechRepublic RSS
Services
  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information
  • Careers
Explore
  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • Editorial Policy
  • Legal Terms
  • Privacy Policy
© 2025 TechnologyAdvice. All rights reserved.
CLOSE

Create a TechRepublic Account

Get the web's best business technology news, tutorials, reviews, trends, and analysis—in your inbox. Let's start with the basics.

Already registered? Sign In
Use Facebook
Use Linkedin

* - indicates required fields

CLOSE

Sign in to TechRepublic

Not a member? Create an account
Use Facebook
Use Linkedin

Lost your password? Request a new password

CLOSE

Reset Password

Please enter your email adress. You will receive an email message with instructions on how to reset your password.

Check your email for a password reset link. If you didn't receive an email don't forgot to check your spam folder, otherwise contact support.

Back to login
1 Finish Profile
2 Newsletter Preferences
CLOSE

Welcome. Tell us a little bit about you.

This will help us provide you with customized content.

No thanks, continue without
1 Finish Profile
2 Newsletter Preferences
CLOSE

Want to receive more TechRepublic news?

Newsletter Name
Subscribe
Daily Tech Insider
Daily Tech Insider AU
TechRepublic UK
TechRepublic News and Special Offers
TechRepublic News and Special Offers International
Executive Briefing
Innovation Insider
Project Management Insider
Microsoft Weekly
Cloud Insider
Data Insider
Developer Insider
TechRepublic Premium
Apple Weekly
Cybersecurity Insider
Google Weekly
Toggle All
No thanks, continue without

You're All Set

Thanks for signing up! Keep an eye out for a confirmation email from our team. To ensure any newsletters you subscribed to hit your inbox, make sure to add [email protected] to your contacts list.

Back to Home Page
×