javascript – How do I view my HTML webpage on my phone-ThrowExceptions

Exception or error:

I have create a HTML webpage which also uses CSS and JS. When I view this on my PC it works and looks how it should.

What is the best way to put this on my phone?
I tried to put all the relevant files onto my phone but it will only load the base HTML, all the files were in the same folder as the HTML code only references the name of the CSS and JS as they are in the same file on the PC.

I am referencing the CCS as: <link href="style.css" rel="stylesheet" type="text/css"/> and the script as <script type="text/javascript" src="script.js">

I am opening the HTML on my PC with Google Chrome and trying to view it on my phone with google chrome as well.
I have an android phone.

Thanks in advance.

How to solve:

You can use a local server to host the webpage, and navigate to the private IP of your pc from your mobile device if they are connected to the same network.

I prefer live-server npm package for this. Simply type npm install -g live-server. Navigate to the directory your website is located at then run live-server. It will also show the port you are running on.

To find out your private ip address, open another command line and type ifconfig (or ipconfigif you are on windows).

Navigate to ip-address:port-number in your mobile device and you will see your website. Example private ip address and port number: 192.168.1.40:8080

###

The easiest way for previewing on the mobile device is using websites such as :
https://search.google.com/test/mobile-friendly?
I hope this helps you to determine your problem.

###

Start the webpage with your IDE so it’s exposed to a port on your computer.
Look up the IP of your computer and make sure you are on the same network with your mobile device. Navigate in your browser to your PC’s ip + port and you will see it.

###

If you just want to test your website on a phone you can connect you phone via USB and connect your chrome desktop with chrome mobile.

Here is the guide from Google:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

This should allow you to open and edit the site on your computer and view it on your phone to see if it works.

For a permanent solution you can host your site on a webserver and connect to it over the internet.

###

Put your css styling inside the html markup and open it in your phone. It will work. Not sure if it will display your images though, but you can test the responsiveness of your website.

Leave a Reply

Your email address will not be published. Required fields are marked *