If you’re a web developer, then you know that it’s important to have a way to view mobile websites in your Chrome browser. This is especially true if you want to develop for mobile devices like the iPhone and Android. There are a few ways to do this, but the best way is probably using the Web Inspector. The Web Inspector is a tool that allows you to view and debug web pages on your computer. You can also use it to view mobile websites. To use the Web Inspector, open Chrome and click on the three lines in the top left corner of your screen. This will show you a list of all of the websites that are currently open in Chrome. You can select one of these websites by clicking on it and then clicking on the three lines in the top left corner of your screen again. The next thing that you’ll need to do is create a new project. To do this, click on File > New Project… and then select Mobile from the resulting list. Once you’ve created a new project, open it up by clicking on its name in the bottom left corner of your screen. Now, we need to add some code into our project so that we can view mobile websites in our Chrome browser. First, we’ll need to add some code into our main file: src/main/resources/browser/ui/views/mobile_website_viewer.js . This file contains all of our code for viewing mobile websites in our Chrome browser. Next, we’ll need to add some code into our main() function: function main() { // Loads up our views var views = document . getElementById ( “mobile_website_viewer” ); // Starts up our website viewer views . start (); } We first load up our views variable which will contain all of our Mobile Website Viewers (MWV). Next, we start up our website viewer by calling its start()
The majority of internet usage now happens on phones and tablets, so you may want to check how a website looks on mobile. Google Chrome has a handy tool that lets you do that right from your desktop computer.
Maybe you’re doing web development and you want to test how responsive your website is, or maybe you’re just curious. Either way, you can quickly check from Chrome’s “Inspect” menu. We’ll show you how it works.
RELATED: How to Install or Uninstall the Google Chrome Browser
First, navigate to the website that you want to see in mobile view from Chrome on the desktop. Once there, you can do one of two things:
Right-click on blank space and select “Inspect” from the menu. Use the keyboard shortcut Ctrl + Shift + I (That’s a capital “i. ”).
The Inspect menu will open from the right side of the browser window. All you need to do is click the device icon in the top toolbar.
The page will immediately switch to a mobile layout. By default, it will be in “Responsive” mode, and you can drag the handle on the right side to see the page dynamically change as the screen gets wider.
You can also select the drop-down in the top bar and see the page formatted for specific devices.
Close the “Inspect” menu or click the device icon again to switch back to the desktop layout.
That’s pretty much all there is to it. Now, you can easily view websites in a variety of different mobile layouts in Chrome without bothering to pick up your phone.
RELATED: How to Change Your Home Page in Google Chrome
