On the Mac Safari select Develop → from the menu. Make sure that you open Safari on mobile and on the Mac. On your mobile, enable Settings → Safari → Advanced → Web Inspector and then connect it to your computer with a cable. Open the Safari Preferences → Advanced and enable “ Show Develop menu in menu bar". Now that you have access to your websites from your phone and tablet, you probably also would like to use remote debugging with them. However, you cannot use remote debugging on those (see next section on how to do that with Safari).Īs they use the same rendering engine as mobile Safari, though, it should not be needed anyway. Note that all iPhones, iPads, and Macs in the same WiFi network now have access to your local development website.Īnd that not only works for mobile Safari, but also with the iOS versions of Firefox and Chrome. Restart the server and it should work after all, yay!īut if you you get the error message invalid host header, there is probably a mismatch between your computer’s name and the URL that you enter in the address bar of your browser. That makes it a good choice on shared code bases. local to allowedHosts will enable any hosts ending with. So you need to change the webpack DevServer configuration If that happens, you might need to configure your server to bind to 0.0.0.0 instead of localhost (and to allow connections from *.local hosts).Ĭhanging the IP address to 0.0.0.0 will make your server externally accessible (within the same WiFi).įor example if you are using webpack-dev-server with Node.js, you have to slightly tweak its configuration.īy default, it creates a server on localhost and will not allow remote connections (e.g. If it does not, you might run into a configuration issue and get the error message “Safari cannot open the page because it could not connect to the server”. Īnd tada, your website should show up on your iPhone or iPad! Note that you have to replace whitespaces with dashes and ignore special characters such as '.įor example, if your computer name is Name's MacBook, you will have to use. Open (or whichever port you use on your computer) on your mobile device. Now make sure that both your Mac and iOS device are connected to the same WiFi network. This might be something silly, for example activate Printer Sharing and only allow it to be used by yourself. It does not matter what sharing service you activate, but you have to enable at least one. Now that you know the name, make sure that you activate at least one item in the list of sharing services. Note that we will refer to your computer’s name by using for the rest of this article. You can look that up by opening System Preferences → Sharing. Instead of using the IP address directly, we will use the computer name of your Mac. On your computer, you will thus use to access the development website.Īctually, we don’t open localhost: or : on the mobile as there is an even better way. Let’s assume your test server opens the port 8080 on the localhost. There is, however, a simple one-time setup that does not involve using variable IP addresses or external tools.Īnd it even works without a cable connection.Īll you need is a Mac and Safari. What might usually work though, is to look up the current IP address of the computer and open on the mobile device.īut relying on the computer’s IP address is annoying as it might change from time to time.Īnd that means that you can’t bookmark it on your mobile device, you loose cookies, local storage, site settings, etc. Most development servers on a desktop computer just open a certain port on the localhost so that the content they serve is accessible on a URL like That works well on the computer but you cannot just paste that URL into your mobile device and start testing. So it is important to constantly test your development websites on real mobile devices. Testing websites on mobile devices is getting more and more important.Įspecially given that mobile browsers often behave differently on physical devices than you might expect them to when just testing on a desktop browser with a smaller viewport. » FrontAid CMS / Blog (Wireless) Remote Debugging with Safari on iOS FrontAid CMS - Agile Content Management with JSON & Git.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |