Search
Clear search
Close search
Google apps
Main menu

Chrome Developer Tools

Chrome Developer Tools are a set of web authoring and debugging tools built into Google Chrome. These tools are helpful when troubleshooting your ad requests or mobile issues, or sharing information with your support team.

Access ad request and response information

You can use Chrome Developer Tools as a quick and easy way to get ad requests from a web page and determine which line item or creative is being returned in the ad response.

  1. Using Google Chrome, navigate to the page with the ad request.
  2. Right-click anywhere on the page and select Inspect Element.
  3. Select the Network tab in the panel that opens at the bottom of the page.
  4. Refresh the page to collect and view information on the Network tab.
  5. While on the Network tab, use Ctrl + F (Cmd + F on Mac) to perform a text search.
  6. Select the filter icon and type pubads.
    • The list will be filtered to show only requests matching that text string -- the available ad requests.
  7. Select the items to see a breakdown of the request and response information.
    • After selecting, the information will appear under "Headers" in the right column.

Capture and save HTTP request and response logs

You can use Chrome Developer Tools to save an HTTP archive (HAR) file capturing all of the request and response activity from your page load. This is often helpful when troubleshooting and sharing information with various support resources.

  1. Using Google Chrome, navigate to the page with the ad request.
  2. Right-click anywhere on the page and select Inspect Element.
  3. Select the Network tab in the panel that opens at the bottom of the page.
    • The record button is automatically activated when the panel is opened.
    • It is important that the inspector is in record mode before you refresh the page.
  4. Refresh the page to collect all HTTP requests and responses on the Network tab.
  5. When the page has completely loaded, right-click inside of the panel and select Save as HAR with Content.
  6. Save the file.

Troubleshoot mobile issues

In addition to debugging desktop websites, you can use mobile emulation to troubleshoot mobile versions of websites using your desktop.

The experience of your web content on mobile devices can operate very differently than what users experience on the desktop. Chrome Remote Debugging allows you to use Chrome Developer Tools in a mobile device environment so that you can inspect, debug, and analyze browser tabs and WebViews on your Android device. More information on Chrome Developer Tools - including step-by-step instructions - can be found on the Chrome developer site.

More information

Complete documentation for Chrome Developer Tools can be found on the Chrome DevTools site.

 

Code School LLC provides an online self-study course called Discover DevTools on how Chrome DevTools can sharpen your development process and discover tools that can optimize your workflow.

Was this article helpful?
How can we improve it?