Right-click on any webpage, click Inspect, and you'll see the innards of that site: its source code, the images & CSS that khung its design, the fonts and icons it uses, the Javascript code that powers animations, and more. You can see how long the site takes to load, how much bandwidth it used lớn download, và the exact màu sắc in its text.

Bạn đang xem: Inspect and edit html live for android

Or, you could use it khổng lồ change anything you want on the page.

Inspect Element is a perfect way lớn learn what makes the website tick, figure out what's broken on your sites, mock up what a color and fonts change would look like, & 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 khổng lồ use Google Chrome Inspect Element khổng lồ 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 lớn switch over to your laptop, mở cửa Google Chrome, và get ready to lớn tweak some code.

Most website browsers—including Mozilla Firefox and Apple's Safari—include an Inspect Element tool, while Microsoft's internet Explorer & Edge browser include a similar mix of Developer Tools. This tutorial focuses on Google Chrome's Inspect Element tools, but most of the features work the same in other browsers.

Wait, Why Should I Use Inspect Element?

Google Chrome Inspect Element lets you view a website

If you've never peeked at a website's code out of curiosity, you might wonder why you should learn how lớn use Inspect Element.

Designer: Want lớn preview how a site design would look on mobile? Or want lớn see how a different shade of green would look on a signup button? You can vì chưng both in seconds with Inspect Element.

Writer: Tired of blurring out your name and e-mail in screenshots? With Inspect Element, you can change any text on a webpage in a second.

Support Agent: Need a better way to tell developers what needs fixed on a site? Inspect Element lets you make a quick example change to show what you're talking about.

Never miss a darkedeneurope.com blog post
Subscribe

For these & 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 lớn run code, a View Source page to lớn see just the raw code behind a site, a Sources page with a menu of every tệp tin loaded in a website, & more. You can explore all those on your own, but for now, let's see how to lớn use the main Elements tab to tweak a webpage on our own.

How lớn Get Started with Inspect Element

There are a few ways to access Google Chrome Inspect Element. Just mở cửa a website you want to lớn try editing (to follow along with this tutorial, xuất hiện darkedeneurope.com), then xuất hiện the Inspect Element tools in one of these three ways:

Right-click anywhere on the webpage, & at the very bottom of the thực đơn that pops up, you will see "Inspect." Click that.

Click the hamburger thực đơn (the icon with 3 stacked dots) on the far right of your Google Chrome toolbar, click More Tools, then select Developer Tools. Alternately, in the file menu, click View —> Developer —> Developer Tools.

Prefer keyboard shortcuts? Press CMD+Option+I on a Mac, or F12 on a PC to xuất hiện Inspect Elements without clicking anything.

By default, the Developer Tools xuất hiện in a pane at the very bottom of your browser and will show the Elements tab—that's the famed Inspect Element tool 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 đứng 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 lớn move the pane to lớn the right-hand side of your browser (right-dock view) or to mở cửa 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 to lớn 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 ↔ cursor appears, drag the pane left lớn 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 khổng lồ make any site look exactly how we want. For this tutorial, we will focus on the Elements, Emulation, and tìm kiếm tabs.

Search

The "Search" tab allows you to search a website page for specific content or an HTML element. It's a bit hidden: you'll need khổng lồ click the 3 dots then click tìm kiếm All Files to lớn uncover it. Then you'll be able to search through every file in a webpage for anything you want.

Elements

"Inspect Element" is the tool we will explore most in this tutorial, & 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 lớn it if you've been exploring elsewhere.

In the Explore tab, you can see all of the HTML, JavaScript, và CSS that built a website. It's almost the same as just viewing the source of a website, with one crucial difference: you can change any of the code, and see the changes in real-time on the site you have open. You can change anything from the copy khổng lồ the typeface, then screenshot the new kiến thiết or save your changes (just go to lớn View > Developer > View Source và save the page as an HTML file, or copy the code changes lớn your text editor). Once you re-load the page, though, all of your changes will be gone forever.

Emulation

Ever wanted khổng lồ preview a webpage on a phone without pulling your phone out of your pocket? The "Emulation" tab lets you view a website page as it would look on any device, with presets for popular devices or an option lớn set screen resolution and aspect ratio. You can even mix an emulated internet speed, lớn 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 khổng lồ start it. Then, you'll have a perfect tool lớn understand how others experience a webpage.

It's time lớn get lớn work. We'll first use search to find things on a webpage, then use Elements lớn edit text and more on a site, and finally will use Emulation khổng lồ see how our site would look on a phone from a specific location.

Find Anything on a Site With Inspect Element Search

Wondering what goes into your favorite sites? tìm kiếm is your best tool for that, aside from reading a site's entire source code. You could just open the default Elements view, press CTRL+F or CMD+F and tìm kiếm through the source code, but the full tìm kiếm tool will let you tìm kiếm through every file on a page, helping you find text inside CSS và JavaScript files or locate an icon image you need for an article.

To get started, mở cửa darkedeneurope.com in Chrome if you haven't already, then xuất hiện 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 tìm kiếm tab will appear on the bottom half of the Developer Tools pane.

In the search field, you can type anything—ANYTHING—that you want lớn find on this website page, and it will appear in this pane. Let's see how we can use this.

Type meta name into the search field, press your Enter key, và you'll immediately see every occurrence of "meta name" in the code on this page. Now, you can see this page's metadata, the dịch vụ seo keywords its targeting, & whether or not it's configured to let Google index it for search. That's an easy way khổng lồ 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, & press "enter." You'll see every occurrence of "h2" in darkedeneurope.com's JavaScript files at the top, but once you scroll lớn the bottom, you can see every "h2" header on this page.

Search is an effective tool for designers as well since you can search by color, too. Type #ff4a00 into the tìm kiếm 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 màu sắc #ff4a00, darkedeneurope.com's shade of orange, in this site's CSS & HTML files. Then, just click the line that reads "color: #ff4a00;" lớn jump lớn that line in the site's HTML và tweak it on your own (something we'll look at in the next section).

This is a handy way for designers lớn make sure that a site is following their brand's style guide. With the "Search" tool, designers can easily check the CSS of a website page lớn see if a màu sắc is applied to the wrong element, if an incorrect font-family is used on a website page, or if you're still using your old màu sắc somewhere on your site.

The "Search" tool is also the perfect way khổng lồ 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, và you'll get your fix that much quicker.

Or, you can change the web page yourself with the Elements, the chip core part of Chrome's Developer Tools.

Change Anything with Elements

Front-end developers use the Inspect Element tool every day to modify the appearance of a web page và experiment with new ideas—and you can, too. Inspect Elements lets you tweak the appearance and nội dung of a website page, by adding temporary edits to lớn the site's CSS & HTML files.

Once you close or reload the page, your changes will be gone; you'll only see the changes on your computer và aren't actually editing the real trang web itself. That way, you can feel không tính tiền to experiment and change anything—and then copy & save the very best changes lớn use again later.

Let's see what we can vày 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 mở cửa 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 đứng 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!

Change the Text on a Webpage

Ever wanted khổng lồ change text on a site—perhaps lớn see how a new tagline would look on your homepage, or khổng lồ take your email address off of a tin nhắn screenshot? Now you can.

Click the "mouse on đứng top of a square" icon, then click any text on the page—perhaps the tagline on the darkedeneurope.com homepage. In your Developer Tools pane, you will see a line of text with a xanh highlight that looks something like this:

Double-click the "Connect Your Apps" text that's highlighted xanh in the Developer Tools pane, và it will turn into an editable text field.

Type anything you lượt thích in this text field ("Auri is a genius" should work just fine), & press enter. Voila! You've just changed the text on the website page.

Xem thêm: Cách Tải Game Pubg Mobile - Cách Tải Pubg Mobile Chơi Trên Pc

Refresh the page, & everything will go back lớn 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 lớn edit. All you have to bởi is right-click on the part of the page you want to lớn change, then click the Inspect or Inspect Element links 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 darkedeneurope.com site let's change how it looks.

Change the màu sắc and phông of Elements

To the right of this sentence in the Developer Tools pane, you will see a sub-pane with 3 additional tabs: Styles, Computed, and sự kiện Listeners. Each allows you to lớn change how this sentence looks on the page. Let's get started on "Styles" tab.

And double-click "#ff4a00". Type #4199ad (do not forget the #) and press "enter."

We just changed the color of our button from orange lớn blue! Now let's try something really cool.

Change Element States

Want khổng lồ see how a button or liên kết will look once someone hovers over or clicks it? Chrome Inspect Element can show that too with its force element state tools. 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 liên kết (visited state).

Let's try this out. Make sure you've selected the signup button on the darkedeneurope.com trang chủ page. Then, right-click on that code in the Elements tab, and select :active: in that menu.

That will change the button to lớn grey, which darkedeneurope.com's site shows as you click the button.

Now change the background-color value lớn #FF4A00, and you should instantly see the button màu sắc change.

Try experimenting—change the :hover: color, then un-check :hover: in the right-click menu and drag your mouse over the button to lớn see the new button color.

Change Images

You can easily change images on a website page with Inspect Element, too. Let's swap the Superhero background on the darkedeneurope.com site with this dramatic photo of a solar flare from NASA.

Test a Site on Any Device With Emulation

Everything has to be responsive today. Websites are no longer only viewed on computers—they're more likely than ever khổng lồ 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 nội dung and designs.

Emulation is a great tool khổng lồ approximate how websites will look lớn users across various devices, browsers, & even locations. Though this does not replace actually testing on a variety of devices và 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 the page into a tiny, phone-styled page with a thực đơn at the đứng đầu to change the size.

Resize the small browser lớn see how things look if you were browsing on a tablet, phone, or even smaller screen. Or, click the menu at the đứng top to select mặc định device sizes like iPad Pro or iPhone 8 Plus—go ahead and select the latter.

The web page screen should shrink down to lớn an iPhone 8 Plus' size, and you can zoom in a bit by clicking the + icon next khổng lồ the number at the đứng 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 website page emulation right. See what happens? We're no longer in the iPhone 8 Plus view. Dragging the screen along the grid allows you lớn see how the web page will change as the screen form size changes, but your view will no longer reflect the device mã sản phẩm that you chose previously.

Let's go back khổng lồ the iPhone 8 Plus view by selecting this in the model drop-down danh mục again. Next lớn the drop-down danh mục 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 8 Plus. Feel không tính phí to play around with the other devices lớn see how this web page và 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 darkedeneurope.com's tagline again.

In the iPhone 8 Plus view, we can see that this text is 2em, while in the default view on a computer, it's 3em.

The "em" is a font-size unit that allows you to lớn automatically change the kích cỡ of text relative khổng lồ the surrounding text. For example, let's say we have a user with large custom font settings on their browser. If you phối your paragraph font-size to 14px, your phông will always be 14px to that user no matter what. However, if you mix your paragraph font-size to lớn 1em, your user's browser will use this unit lớn scale your text to your user's large settings. Phones and tablets bởi vì this lớn zoom text nicely.

Now let's switch to the hãng apple iPad view and select the "testing across devices" header above. This time, the font-size is 3em. The font-size changed based on the device view, back to lớn the default size it'd use on a computer, thanks to the tablet's larger screen.

Emulate sản phẩm điện thoại Device Sensors

You may have noticed that your mouse now appears as a little circle on the web page. This allows you khổng lồ interact with the page as if you are on your sản phẩm điện thoại 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 lượt thích you are on a touchscreen device. Using this view, you can see how large touch zones are on a website page. This means that you can see which buttons, icons, links, or other elements are easily touchable with the finger.

You can even make your browser act lượt thích a phone. Press your "Esc" key to open the search pane in Inspect Element again, và this time click the 3-dot thực đơn on the left side for a thực đơn of options. Select Sensors to get three new tools: Geolocation, Orientation, & Touch.

Touch lets you turn on or off the default circle selector that acts more lượt thích a finger than a normal mouse cursor. Orientation lets you interact with motion-sensitive websites such as online games that let you move things by moving your phone. And Geolocation lets you pretend you're in a different location.

Let's try viewing this site from Google's Headquarters in Mountain View, CA.

Check the box next lớn "Emulate geolocation coordinates," & enter the value 37 into the Lat = text field & 122 into the Lon= text field. Press enter on your keyboard.

Nothing changes, right?

This is because there isn't nội dung on this page that changes based on your location. If you change the coordinates on a site lượt thích Groupon.com that uses your location to show localized content, though, you would get different results. Go lớn Google.com in a different location, & you'll perhaps see a new Google logo sản phẩm for a holiday in another country, or at least will get the results in a different language.

Emulation is a great way to lớn 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 khổng lồ explore the international web.

Emulate mobile Networks

You can also see what it's like to browse a site on different networks, perhaps to see if your site will load even if your users are on a slower 3G network.

To give it a try, click the three circle button in the left of Inspect Element's search tab again, & select "Network Conditions". There, you can choose from fast or slow 3G, or offline khổng lồ see how the page works without internet. Or, click Add... Khổng lồ include your own testing (perhaps địa chỉ cửa hàng 56Kbps to test dialup internet). Now, reload the page, & you'll see just how long it'd take for the site lớn load on a slow connection—and how the site looks while it's loading. That'll show why you should improve your site lớn load faster on slow connections.

You can also change your user agent—uncheck "Select automatically" beside "User Agent" and select "Internet Explorer 7" perhaps to lớn see if the site changes its rendering for older browsers. That's also a handy mod to make webpages load even if they claim they only work in a different browser like Internet Explorer.

Challenges

Let's kết thúc with a few challenges. Go show us what you've learned!

See how your trang web renders on a mobile device, và show your developer what could be done better by fixing it yourself!

The marketing team at darkedeneurope.com team relies on Inspect Element khổng lồ tweak private information out of screenshots in our phầm mềm reviews, while our thiết kế team uses it to mockup changes and see how things would look on various screens.

How vì chưng you use Inspect Element? We'd love khổng lồ hear your stories in the comments below!

Enjoying your new hacking skills? Take them further in our guide on How khổng lồ Build a website Without Any Coding—and its companion guide on How to lớn Make Great Graphics Without Any Coding.

This tutorial was originally published on January 5, 2015, then was updated and republished on June 6, 2017 và January 25, 2018 with screenshots & steps from the latest version of Google Chrome.