If you like DNray Forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...

 

Best way to test website on mobile devices during the development process?

Started by searchcandy, Apr 27, 2023, 12:08 AM

Previous topic - Next topic

searchcandyTopic starter

I am currently creating a template using html, css, and js, and would like to view it on my smartphone in order to see how it appears in real time without using developer tools.

While this is simple when the site is hosted, it becomes more complicated when the template is saved in a folder. As I am using an Ubuntu system, I am unsure of the best way to test the template in this situation.
  •  


antivir

Usually, I use Dropbox for testing online services since I am an old user and have access to direct links. Additionally, I use it as a "hosting" service. You may want to consider using cloud or hosting to simplify your work.
By the way, there is a great service called codebeautify.org/responsive-website-tester that you might find helpful.
  •  

toolforsek

Acquiring costly hosting is not a challenge anymore since, based on my personal experience, no virtual device can replace an actual one. Alternatively, you may follow Daniel's suggestion and utilize Chrome's feature, which is executed excellently. However, this technique only shows the website's appearance on a particular screen size and resolution, but it does not provide a comprehensive visualization of the site.

Regarding web development, it may be beneficial to consider various methods to observe website performance in different contexts beyond screen size and resolution. One approach could be user testing with real individuals using a variety of devices and circumstances to obtain comprehensive feedback.
  •  

dragoxna

To create a website using openserver, a fixed ip should be set in the wi-fi connection properties, ensuring that dhcp does not assign the same address to another device.
The designated ip is then selected as the server address in openserver settings, while the device's hosts file should contain the address of the website spinning on openserver and the server's ip (such as 192.168.1.18). Note that editing hosts requires root access for Android or jailbreak for iOS devices.

Additionally, it's important to ensure proper network security measures are taken when hosting a website. This includes regularly updating software and applying proper password protection.
  •  

wstandn

If you have your HTML, CSS, and JS files saved in a folder on your Ubuntu system, there are several ways to effectively test the template on your smartphone without the need for hosting it on a server.

One approach is to use a tool like ngrok, which creates a secure tunnel to your localhost. To begin, you can install ngrok on your Ubuntu system by first downloading the ngrok binary from their website and following the installation instructions for Linux. Once ngrok is installed, navigate to the folder containing your template files using the terminal.

Next, you can start a local server using a simple Python command. Depending on which version of Python you have installed on your system, you can use the command `python -m SimpleHTTPServer 8000` (for Python 2) or `python3 -m http.server 8000` (for Python 3) to initiate a local server on port 8000.

Following this, open a new terminal window and navigate to the location where ngrok is installed. From there, run the command `./ngrok http 8000` (assuming your local server is running on port 8000). This will generate a secure URL that can be opened on your smartphone's browser, allowing you to view the template in real time as if it were hosted online.

Another method involves using a service like Browsersync. After installing Browsersync globally using npm by executing the command `npm install -g browser-sync`, you can navigate to the folder that contains your template files and run the command `browser-sync start --server --directory --files "**/*"` in the terminal. This will start a local server and provide you with a URL that can be accessed on your smartphone's browser, enabling you to view the live version of your template.
You can also use the built-in web server feature available on many modern smartphones. By installing an app such as "KSWEB: server + PHP + MySQL" on Android or "HTTP File Server" on iOS, you can start a web server directly from your smartphone. Subsequently, you can access the local IP address of your smartphone from your Ubuntu system's browser to view the template in real time.

Whichever method you choose, testing your template on your smartphone will enable you to gain valuable insights into its appearance and functionality on a mobile device. This process allows you to make any necessary adjustments before deploying the template to ensure optimal user experience across various devices.
  •  


If you like DNray forum, you can support it by - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 and more...