View your Development Site on your own Devices!

Developer tools in most modern browsers to allow us to view our site on different device sizes, but did you know you can also view your site while developing on an actual device? Read on and I'll share how you can view your site on your actual devices whilst in development.

Note: I've currently tested this and it works for static, Flask and Django projects. Let me know what you try it with in the comments below 😊

Steps

1. Make sure that your computer and mobile device are both connected to the same wifi network.

2. Find your local IP address:

   On Windows:

   1. Open the terminal and run ipconfig
   2. This will return your IP configuration. Find and make a note of the IP4 address value.

   On Mac:

   1. Open the terminal and type ipconfig getifaddr en0
   2. This will return the IP4 address value. Make a note of it.

3. Once you have the local IP address, run your project. You may do this by using the Live Server extension in VSCode or by running the server command, for example python3 manage.py runserver for Django or python3 app.py for Flask applications. Make a note of the port your project is running on.

4. On your mobile device, open a browser window and enter the IP address followed by a colon and the port number. Voila! you should now be able to see your project 😊

As you are connected to the same IP address and port that your computer is using, you can make changes and view them in real time simply by refreshing your browser.

Its always good to know several ways to achieve the same thing in web development, and this may help if you ever run into an odd bug that only displays on the device, but not in dev tools (we've all been there! 🪳)