If you can offer a terrific mobile experience, though, you can capitalize on the opportunity and get a leg-up on the competition.Inspect Element is a feature of web browsers that allows users to access the Developer Tools. People arrive on the site, via social media or search engines or whatever else, and then they don’t stay because the mobile responsive design isn’t great. It’s quite possible that a significant number of websites just aren’t offering a very good mobile experience. When they’re going to do something for a longer period of time, say writing or reading blog posts, they’re more inclined to do it on a computer.īut, there’s another way to think about this. What this means is that people are visiting more sites on their smartphones, but they’re spending less time (comparatively speaking) than they are on their computers.
And that’s it!Īccording to some estimates, about 58% of site visits come from mobile devices, but mobile devices only make up 42% of the total time spent online. Toggle which ones you want to add or remove. Click on that and you’ll bring up a settings menu on the right with a much longer list of possible emulated devices. If you click on the “responsive” near the top of your view, it’ll open a drop-down menu with several common options, like the Pixel 2, iPhone X, and iPad Pro.Īt the bottom of this list is an “Edit” option. If you want to be more specific about how a webpage might look on a mobile device, you can actually choose the specific mobile device. But, you can take it one step further if you’d like. The webpage that you’re on will show how it would appear on a generic mobile device in vertical (portrait) orientation.īroadly speaking, this is probably good enough to get a sense of how any given webpage will look on a mobile device. When you enable the device toolbar for the first time, it’ll default to the responsive view as shown. Realistically, it’s more like 3 easy steps, since the second step wasn’t really a step, nor is this fourth step. Alternatively, you can hit Ctrl + Shift + M while in this view. Look near the top of that frame, next to “Elements.” There, you’ll see a little icon that looks like a generic smartphone and tablet. You don’t actually need to understand any of it for this task.
Don’t get overwhelmed or confused by all that code. It’ll say “Elements” near the top of the resulting frame. When you’ve clicked on “Inspect,” you’ll get this view of the Chrome developer tools. This isn’t really a step aside from showing you a screenshot for illustrative purposes. From the resulting menu, choose “Inspect.” Alternatively, you can hit Ctrl + Shift + I. With Chrome, simply right-click anywhere on the webpage (that isn’t an obviously interactable element like a link or an image).
#Inspect element chrome mobile windows 10#
I’m writing this from the perspective of a Windows 10 user, so all your macOS people can adjust yourselves accordingly. So, let’s start with /blog as our example. It’s actually really easy to see just about any webpage as it would appear on a mobile device.
You just may have overlooked this baked-in feature. If you use Google Chrome as your browser of choice, you already have the tool you need. But, how can you ensure the mobile view of every post and page is up to snuff? True, just about every generic WordPress theme is probably going to offer a responsive design out of the box these days… because offering a separate mobile-friendly version isn’t good enough anymore. Are you currently reading these words on your computer? Or are you accessing this blog on your smartphone (or tablet)? I don’t need to remind you just how important it is to prioritize the mobile experience on your website.