How does inspect element work

Once you re-load the page, though, all of your changes will be gone forever. 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 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 and click the phone icon 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 what goes into your favorite sites? Search is your best tool for that, aside from reading a site's entire source code. To get started, open Zapier. Remember how to open Inspect Element? Let's see how we can use this. Type 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 this page's metadata, 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 h2 into the search field instead, and press "enter. 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. Then, just click the line that reads "color: ff4a00;" to jump to that line in the site's HTML and 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 every day to modify the appearance of a web page and experiment with new ideas—and you can, too.

Once you close or reload the page, your changes will be gone; you'll only see the changes on your 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.

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 Your Apps" 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. You've just changed the text on the web 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. 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 change, 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 allows 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. Let's try changing something. Click the arrow icon in the top of Inspect Element again, and select the text right under the "Sign Up" button on the page.

Find "text-align" in the "Styles" tab you may have to scroll a bit to find this. Follow these steps to use the Inspect Element tool in Chrome:.

Open a website you want to view in your Chrome browser. To access Inspect Element, you can use one of the three below options:. The element box appears at the bottom of your browser and displays the Elements tab, which is the tool you are looking for. Open or move the Inspect Element box to see more and work better.

Click on the three vertical dots on the right side of the box to open it in a separate window undock view or move it to the right to have more space to work right dock view. You can also resize the box by dragging your cursor on its corners. Once in Inspect Element, you will notice many different tabs that can help you customize your website appearance including the:. Emulation tab: The emulation tab allows you to preview a webpage and see how it would look on a mobile device.

You can select among different device types, and there is even an option to regulate screen resolution and aspect ratio. Delete an element. Click on the Element you want to delete. You can make the following changes:. In the top corner of the developer pane, click on the icon of a mouse on top of a square.

Then click on the text you want to modify on the page. You can now see a blue highlighted line of text in the developer tools pane.

Double click on that highlighted blue text, and it becomes editable. You can type what you want in that text field and press Enter. The selected text changed on the webpage. Inspect Element is a vital tool for developers and students, and it can be a lot of fun to play around with, too.

How to Change Any Webpage on Any Browser When you view a webpage, there's a bunch of code that you're not seeing, unless you know where to look. How do you peel back the outer layer to see the code? The Inspect Element tool! What Is Inspect Element? Accessing Inspect Element in Different Web Browsers Inspect Element is useful enough that it is included as a developer tool in all major desktop web browsers. Google Chrome To use Inspect Element in Google Chrome, you have a few different options: Right-click any area of the web page including blank areas and then select Inspect from the menu.

Access the Google Chrome settings menu the three vertical dots in the upper right-hand corner of the browser window control panel. In the drop-down menu, select More Tools , then Developer Tools. Firefox Similarly to Google Chrome, Firefox also provides multiple Inspect-Element access options: Right-click any area of the web page including blank areas and then select inspect from the menu. Access the Firefox settings menu. Choose Tools , then select Web Developer , and finally select Inspector.

Access the menu bar and click Develop , then select Show Web Inspector from the dropdown menu. Internet Explorer Internet Explorer also offers developer tools which allow for Inspect-Element functionality: Right-click on the page, and choose Inspect Element from the popup menu. Written by Jamie Juviler WebsiteJamie. In a way, the job of web developers and designers is to convince users that a website is one singular entity, more than just a series of HTML elements formatted to look nice.

When the source code is modified with the inspect tool, the changes are shown live inside the browser window. Developers, designers, and marketers frequently use it to peek inside any website including their own in order to preview content and style changes, fix bugs, or to learn how a particular website is built.

For instance, if you find an intriguing interface on a competing website, inspect element lets you see the HTML and CSS that make it up. When finished, just refresh the page to revert everything back to normal. Inspect is also an incredibly valuable tool for those learning web development. Instead of viewing plain source code, use inspect element to interact with the page and see how each line of code maps to an element or style.

By better understanding what constitutes the typical web page, you can communicate effectively with developers in the case of an error, or if you want to make a change. Every modern web browser has a native tool for inspecting elements.

Once there, you have several ways to open the tool:. The Chrome Developer Tools panel will open at the bottom of the browser window. If you want to change the location of the panel, click the three-dots icon in the top right corner of the panel next to the X icon , then choose your preferred dock position. However, everything we need for inspecting is under the Elements tab.

The next area down is the source HTML of the current page. Take some time to explore this region, and notice how hovering the cursor over the piece of code highlights the corresponding element on the page.

Blue indicates the contents of an element, green corresponds to padding, and areas in orange are margins. We can also do the opposite — locate a piece of code from the page element. To do this, click the Element select icon in the top left corner of the panel:. Besides viewing, we can use inspect to alter the page contents. First, find some text content in the source code.

Then, right-click the element and choose Edit Text — this opens an inline text input in which you can write whatever you want.