Search
Clear search
Close search
Google apps
Main menu

Chrome Developer Tools

You can troubleshoot your ad requests or mobile issues, or share information with the DFP support team, using Chrome Developer Tools. It’s a set of web authoring and debugging tools built into Google Chrome.

Access ad request and response information

Get ad requests from a webpage and determine which line item or creative is being returned in the ad response.

An easier way to get ad request and response information is through the Delivery Inspector, which works on desktop, mobile web, and video.
  1. Using Google Chrome, navigate to the page with the ad request.
  2. Right-click anywhere on the page and click Inspect
  3. Click the Network tab in the panel that opens at the bottom of the page.
    • The Record icon   is automatically activated when the panel is opened.
    • It’s important that the inspector is in record mode before you refresh the page in step 4.
  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. Confirm that the Filter icon   is selected and type pubads in the filter box.
    The list is filtered to show only requests matching that text string. These are the available ad requests.
  7. Select the items to see a breakdown of the request and response information.
    After selecting, the information appears under "Headers" on the right side.

Capture and save HTTP request and response logs

Save an HTTP archive (HAR) file capturing all of the request and response activity from your page load. This is helpful when troubleshooting and sharing information with various support resources.

Steps 1 through 4 below are the same as above (under “Access ad request and response information”), so you can move to step 5 below if you already completed them.

Also, if you need to capture HTTP sessions for browsers other than Chrome or for mobile, you can use Charles.

  1. Using Google Chrome, navigate to the page with the ad request.
  2. Right-click anywhere on the page and click Inspect
  3. Click the Network tab in the panel that opens at the bottom of the page.
    • The Record icon   is automatically activated when the panel is opened.
    • It’s important that the inspector is in record mode before you refresh the page in step 4.
  4. Refresh the page to collect and view information on the “Network” tab.
  5. When the page has completely loaded, right-click anywhere in the table where the data was populated (this is the table with the columns named “Name,” “Status,” “Type,” etc.) and click Save as HAR with Content.
  6. Name the file and save it.

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 be very different from what desktop users experience. 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. See the Chrome developer site for more information.

More information

  • Complete documentation for Chrome Developer Tools can be found on the Chrome DevTools site.
  • Discover DevTools is an online self-study course on how Chrome DevTools can optimize your workflow.
Was this article helpful?
How can we improve it?