Unlock the hidden power of your apps.
There's a powerful tool hiding in your browser: Inspect Element.
Or, you could use it to change anything you want on the page.
Inspect Element is perfect way to learn what makes the web tick, figure out what's broken on your sites, mock up what a color and font change would look like, and keep yourself from having to Photoshop out private details in screenshots. It's a super-power you never knew your browser possessed.
Let's learn how to use Inspect Element to help your work, whether you're a developer or a marketer who's never written a line of code. If you're reading this on your phone, it's time to switch over to your laptop, open Google Chrome, and get ready to tweak some code.
If you've never peeked at a website's code out of curiosity, you might be wondering why you learn how to use Inspect Element.
For these and dozens of other use cases, Inspect Element is a handy tool to keep around. It's part of the Developer Tools in your browser, which includes a number of extra features: a console to run code, a View Source page to see just the raw code behind a site, a Sources page with a list of every file loaded in a website, and more. You can explore all those on your own, but for now, let's see how to use the main Elements tab to tweak a webpage on our own.
There are a few ways to access Inspect Element in Google Chrome. Just open a website you want to try editing (to follow along with this tutorial, open Zapier.com), then open it in one of these 3 ways:
By default, the Developer Tools will open with a pane at the very bottom of your browser, and will show the Elements tab—that's the famed Inspect Elements we've been looking for.
You won't have much space to work with Inspect Element at the bottom of your screen, so click the three vertical dots on the top right-hand side of the inspect element pane near the "X" (which you'd click to close the pane). Now, you'll see an option to move the pane to the right-hand side of your browser (right-dock view), or to open the pane in a completely separate window (undock view).
For this tutorial, let's dock the pane on the right side of your browser window, since it'll give us more space to work. You can make the Developer Tools panel wider or more narrow by hovering over the left-side border. Once the "<–>" appears, drag the pane left to widen it or right narrow it.
Now that we're in Inspect Element, there an array of useful tools at our fingertips that we can use to make any site look exactly how we want. For this tutorial, we will focus on the Elements, Emulation, and Search tabs.
The "Search" tab allows you to search a web page for specific content or for an HTML element. It's a bit hidden: you'll need to click the 3 dots then click Search All Files to uncover it. Then you'll be able to search through every file in a webpage for anything you want.
"Inspect Element" is the tool we will explore most in this tutorial, and it's what opens first when you launch the Developer Tools in most browsers. Or, click the "Elements" tab in the Developer Tools to get back to it if you've been exploring elsewhere.
Ever wanted to preview a webpage on a phone without pulling your phone out of your pocket? The "Emulation" tab lets you view a web page as it would look on any device, with presets for popular devices or an option to set your own screen resolution and aspect ratio. You can even set an emulated internet speed, to see how quickly a site would load over dial-up.
It's also a bit hidden: you'll need to open Inspect Element, press your Esc key, then select the Emulate tab and click the Enable Emulation button to start it. Then, you'll have a perfect tool to understand how others experience a webpage.
It's time to get to work. We'll first use Search to find things on a webpage, then use Elements to edit text and more on a site, and finally will use Emulation to see how our site would look on a phone from a specific location.
Wondering exactly what goes into your favorite sites? Search is your best tool for that, aside from reading a site's entire source code. You could just open the default Elements view, press
To get started, open Zapier.com in Chrome if you haven't already, then open Inspect Element, click the 3 vertical dots in the top-right corner of the Developer Tools pane (near the closing "X"), and select "Search All Files." The Search tab will appear on the bottom half of the Developer Tools pane.
In the search field you can type anything—ANYTHING—that you want to find on this web page, and it will appear in this pane. Let's see how we can use this.
meta name into the search field, press your Enter key, and you'll immediately see every occurrence of "meta name" in the code on this page. Now, you can see if this page's metadata is accurate, the SEO keywords its targeting, and whether or not it's configured to let Google index it for search. That's an easy way to see what your competitors are targeting—and to make sure you didn't mess anything up on your site.
Let's try another query. Delete
meta name, type
Search is an effective tool for designers as well, since you can search by color, too. Type
#ff4a00 into the search field and press "enter" (and make sure to check the box beside "Ignore case" to see all of the results). You should now see every time the color #ff4a00, Zapier's shade of orange, in this site's CSS and HTML files. Then, just click line that reads "color: #ff4a00;" to jump to that line in the site's HTML, so you can tweak it on your own (something we'll look at in the next section.
This is a handy way for designers to make sure that a site is following their brand's style guide. With the "Search" tool, designers can easily check the CSS of a web page to see if a color is applied to the wrong element, if an incorrect font-family is used on a web page, or if you're still using your old color somewhere on your site.
The "Search" tool is also the perfect way to communicate with developers better, since you can show them exactly where you've found a mistake or exactly what needs changing. Just tell them the line number where the problem exists, and you'll get your fix that much quicker.
Or, you can change the web page yourself with the Elements, the core part of Chrome's Developer Tools.
Front-end developers use the Inspect Element tool everyday to to modify the the appearance of a web page and experiment with new ideas—and you can, too. Elements lets you tweak the appearance and content of a web page, by adding temporary edits to the site's CSS and HTML files.
Once you close or reload the page, your changes will be gone; you'll only see the changes on your own computer, and aren't actually editing the real website itself. That way, you can feel free to experiment and change anything—and then copy and save the very best changes to use again later.
Let's see what we can do with it.
Click the "Elements" tab in the Developer Tools pane—and if you want more room, tap your "Esc" key to close the search box you had open before. You should see the HTML for this page—now you know how the sausage gets made.
In the top-left corner of the developer pane, you will see an icon of a mouse on top of a square. Click it, then you can select any element on the page that you would like to change. So let's change some things!
Ever wanted to change text on a site—perhaps to see how a new tagline would look on your homepage, or to take your email address off of a Gmail screenshot? Now you can.
Click the "mouse on top of a square" icon, then click any text on the page—perhaps the tagline on the Zapier homepage. In your Developer Tools pane, you will see a line of text with a blue highlight that looks something like this:
Double-click the "Connect the apps you use" text that's highlighted blue in the Developer Tools pane, and it will turn into an editable text field.
Type anything you like in this text field ("Auri is a genius" should work just fine), and press enter. Voila! You've just changed the text on the web page.
Refresh the page, and everything will go back to normal.
Fun? Let's change some more things on this page.
Your Developer Tools pane re-loads with the page, but let's close it. Press the "X" in the top-right corner of the page.
Cool. Now we're going open it back up—right at the text we want to edit. All you have to do is right-click on the part of the page you want to edit, then click the Inspect or Inspect Element link that appears on the bottom of the right-click menu.
When your Developer Tools pane opens, it should automatically highlight that sentence. Pretty neat, huh? It's the little things that count.
Now that we've selected the tagline on the Zapier site, let's change how it looks.
To the right of this sentence in the Developer Tools pane, you will see a sub-pane with 3 additional tabs: Styles, Computed, and Event Listeners. Each allow you to change how this sentence looks on the page. Let's get started on "Styles" tab.
You may notice that some things are crossed out in the "Styles" tab. This means that these styles are not active for the element we've selected them, so changing these values will have no effect. We can ignore these for our purposes.
With our sentence still selected, find "text-align" in the "Styles" tab (you may have to scroll a bit to find this).
Right now, it is set to "center", but double-click "center" and type
left." This makes the text left-aligned on the page.
Now let's play around with the color.
Under the tagline on the Zapier homepage, there's an orange signup button. Let's change the color. Select the button by right-clicking then selecting Inspect Element, or just click the "arrow over square" icon and then click the button.
In the Styles tab, find this line:
And double-click "#4199ad". Type
#FF4A00 (do not forget the #) and press "enter."
We just changed the color of our button! Now let's try something really cool.
In the Styles tab, you may have noticed a thumbtack in the right-hand corner. Click this thumbtack, and you should see a small "force element state" pane appear. This allows you to show the different states of any element (especially links and buttons). You can see how the element will look once a visitor hovers over the element (hover state), selects the element (focus state), and/or has clicked that link (visited state).
Let's try this out. Make sure you've selected the signup button on the Zapier home page. Then, click the "hover" check box in our "force element state" section, and double-click the background color value.
Now change the background-color value to
#FF4A00, and you should instantly see the button color change. Uncheck the "hover" box, then hover your mouse pointer over the button, and you should see that we have changed the hover state.
You can easily change images on a web page with Inspect Element, too. Let's swap the Superhero background on the Zapier site with this dramatic photo of a solar flare from NASA.
First, copy and paste this link to the image:
Now, open Inspect Element on the background of the Zapier homepage, and make sure you've selected the
landing-hero-container line in the code. Double-click the background url link in the "Styles" pane, and paste the link you copied above.
Press "enter" and see the difference immediately.
Editing text is handy, swapping out images is fun, and changing colors and styles just might help you quickly mockup the changes you want made to your site. But how will that new tagline and button design look on mobile?
That's where Emulation comes in—it's where everything we've reviewed so far can be applied even further. Let's see how.
Everything has to be responsive today. Websites are no longer only viewed on computers—they're more likely than ever to be viewed on a phone, tablet, TV, or just about any other type of screen. That should always be kept in mind when creating new content and designs.
Emulation is a great tool to approximate how websites will look to users across various devices, browsers, and even locations. Though this does not replace actually testing on a variety of devices and browsers, it's a great start.
In the Developer Tools pane, you'll notice a little phone icon in the top-left corner. Click it. This should change a couple of things on the page:
To get started, click the "Enable emulation" button in your Developer Tools pane.
Here you have 4 emulation options: Media, Network, Device, and Sensors. Let's see what they each can do.
Media shows how a webpage would look across different media: on a projector, printed on paper, or with a braille-enabled device. A webpage may have different styles if a page is expected to be used across different media—for example, an eCommerce site might have a different print style to let you print a receipt.
If a webpage has these different views, you will be able to see them here. Then, you can explore how they've changed the page for those different scenarios, and perhaps tweak the print preview style on your own.
Network can show you what your web page will look like on different browsers and operating systems, such as Chrome on an Android tablet, or Safari on an iPhone running iOS 8.
To give it a try, set the "Spoof user agent" in the Network section of the Emulation tab to "Internet Explorer 7." Not much should change, but on some sites you'll see a much different design to help the site look better on legacy browsers.
You can also see how long it would take to load the site on a slower connection. From the black frame around the site, click the "No throttling" menu under the blue tab, and select "GPRS". Now, reload the page, and you'll see just how long it'd take for the site to load on a slow connection—and how the site looks while it's loading. That'll show why you should improve your site to load faster on slow connections.
The Device emulator lets you view a site as it would look on different different devices, resolutions, and screen sizes. Combine it with the browser settings in the Network tab, and you'll have a good idea of how your page looks on most devices.
To test this out, click the "Device" tab, then the "Model" drop down list. This gives us a lot of options, so let's choose "Apple iPhone 6 Plus," since it's pretty easy to find in the menu.
The web page screen should shrink down to an iPhone 6 Plus' size, and you can zoom in a bit by clicking the + icon next to the number at the top right of the grid—that's how the site would look if someone zoomed in on mobile.
Go ahead enlarge the view by dragging the right edge of the web page emulation right. See what happens? We're no longer in the iPhone 6 Plus view. Dragging the screen along the grid allows you to see how the web page will change as the screen size changes, but your view will no longer reflect the device model that you chose previously.
Let's go back to the iPhone 6 Plus view by selecting this in the model drop-down list again. Next to the drop-down list is the word "Portrait." As you may have guessed, this allows you to toggle between the landscape and horizontal view.
Now, we can see how this post would look if you were reading it on an iPhone 6 Plus. Feel free to play around with the other devices to see how this web page and the screen resolution changes. All of the other developer tools that we have gone over so far will also react to the device view. For example, select the text of Zapier's tagline again.
In the iPhone 6 Plus view, we can see that this text is 1.8em, while in the default view on a computer, it's 2.7em.
The "em" is a font-size unit that allows you to automatically change the size of text relative to the surrounding text. For example, let's say we have a user with large custom font settings on their browser. If you set your paragraph font-size to 14px, your font will always be 14px to that user no matter what. However, if you set your paragraph font-size to 1em, your user's browser will use this unit to scale your text to your user's large settings. Phones and tablets do this to zoom text nicely.
Now let's switch to the Apple iPad view and select the "testing across devices" header above. This time, the font-size is 2.7em. The font-size changed based on the device view, back to the default size it'd use on a computer, thanks to the tablet's larger screen.
You may have noticed that your mouse now appears as a little circle on the web page. This allows you to interact with the page as if you are on your mobile device. If you click while dragging the page down, this does not highlight text like it normally would in your browser—it drags the screen down like you are on a touchscreen device. Using this view, you can see about how large touch zones are on a web page. This means that you can see which buttons, icons, links, or other elements are easily touchable with the finger.
This Emulation is especially useful for designers to see how the layout of a page may change or how typography might need to change for the user to have the best experience across devices. And it can be just for fun, to see how sites would look on various devices.
But that's not all, folks…
If you jump down to the "Sensors" option in your Emulation tab, you can turn the touch screen on and off. It might be useful to turn the touch screen emulator off if you would actually like to highlight specific elements on the web page.
Now that we're in the sensors tab, we can also see what this page might look like in different cities.
Let's try viewing this site from Google's Headquarters in Mountain View, CA.
Check the box next to "Emulate geolocation coordinates," and enter the value
37 into the Lat = text field and
122 into the Lon= text field. Press enter on your keyboard.
Nothing changes, right?
This is because there isn't content on this page that changes based on your location. If you change the coordinates on a site like
Groupon.com that uses your location to show localized content, though, you would get different results. Go to
Google.com in a different location, and you'll perhaps see a new Google logo for a holiday in another country, or at least will get the results in a different language.
In the Sensors tab, you will also notice the option to modify accelerometer settings. The accelerometer is what detects the orientation of your smart device's screen, and this tool is another way to change the orientation of your Device emulation.
Emulation is a great way to put yourself in your user's shoes and consider what the user may be seeing on your web page—and it's a fun way to explore the international web.
Let's end with a few challenges. Go show us what you've learned!
The Marketing team at Zapier team relies on Inspect Element to tweak private information out of screenshots in our app reviews, while our design team uses it to mockup changes and see how things would look on various screens. How do you use Inspect Element? We'd love to hear your stories in the comments below!
Try Zapier Today
“I was wasting hours each week doing data entry. Now Zapier handles it seamlessly.”
Build workflows with your apps.Try Zapier Free
Connect apps. Automate tasks. Get more done.Try Zapier Free
Zapier is the easiest way to automate powerful workflows with more than 750 apps.
Zapier is the easiest way to automate powerful workflows with more than 750 apps.