Create perfect AdWords ad mockups and previews using Chrome Developer Tools

May 3, 2016

This post is adapted from an answer I posted to this question on Reddit.

User adwordshalp was attempting to use the Ad Preview tool to take a screenshot of an ad mockup for a client proposal, but was running into some errors.

“All I want to do is see the image of what an ad would look like.”

Editing AdWords ads using Chrome Developer Tools

I like to use Chrome Developer Tools as a quick way to create ad previews, or see how ad copy will look within the context of the search results, without having to create an ad in AdWords and use the ad preview tool or mess around in Photoshop

Here’s the process I use to create quick ad previews in Google Chrome (other browsers have similar developer tools):

  1. Search your query on Google, and find an ad that has the features you want (sitelinks, extended headline, ratings, etc.).
  2. Right click on the ad headline and click inspect. Find the headline text in dev tools and double click it. You can edit the text right in dev tools.

    Adwords mockup using Chrome Developer Tools

  3. When you’re done editing the headline, hit enter and you will see the updated ad.

Repeat the process for all ad elements you want to edit – description lines, sitelinks, callouts, reviews, ratings.