Device preview on mobile not working when using MAMP Testserver

[sameh]

Hallo, in my sites setup I'm using Dreamweaver CC2018 with MAMP as the testserver. I can preview may site on all browsers but not on my iPhone. The scan works fine but I see only a blank page. To make sure I tried it without MAMP and it shows everything fine.

Thy for any help!

[Nancy OShea]

I have found that Real-Time Preview does not work well with my local testing server either so I don't use them together. 

[Jon Fritz · Accepted solution]

Device Preview is a great, but totally unnecessary function when you have a testing server set up.

All you need to do is browse to the machine with the testing server, followed by the site root folder name, to preview using any device/computer attached to the same network.

1. Find your machine's local IP address. There are several ways to do this found online for any given OS.
2. Once you find that address, previewing from any connected device should be as simple as adding that IP address followed by the site's folder name as stored on the server, for example: 123.45.678.91/yoursite

[sameh]

Thx for your answer.

I tried as you proposed but this didn't work

[Jon Fritz]

Make sure you are running your server under Admin rights.

1. Right click the server program icon and choose Run As Administrator.

2. Start Apache

3. Open a Command Prompt

4. Type ipconfig and hit Enter

5. The Ipv4 Address is your local network IP for your computer with your testing server

6. If your site is stored in the testing server root folder (not 100% sure which folder that is with MAMP), you should then be able to enter the IP/sitefoldername from any machine on your network.

[Nancy OShea]

6.  I'm pretty sure the default web folder on Mamp is htdocs.

/Applications/MAMP/htdocs/site-folder/

[sameh]

OK. Thx everybody so far.

Just for fun I checked Dreamweaver CC2015. With this the preview on my mobile works fine also MAMP.

So the problem is obviously Dreamweaver CC 2018. The URL that DW generates ist always like http://127.0.0.1:49921/preview/app/index.html

DW CC 2015 does this

http://localhost:8888/...real path to file... This works fine with the same MAMP settings

Does anybody have an ID how to change the URL generated by DW CC 2018, back to http://localhost:8888/...?

[Jon Fritz]

The first IP address location is cause by DW's new Live Preview. Rather than opening the local file (giving you the localhost address), DW2017 and 2018 use a framset on Adobe's servers to show your page Live as you edit. It has never worked right for me, so I don't use it, instead opting for the old Preview in Browser (now called Open in Browser in the newer versions of DW).

You can get to it by right clicking the file in the Files window, or, if your files are set as tabs in CC2017 and 18, by right clicking the named tab of the document and chooeing "Open in Browser" from the list.

There are 3 separate preview types in the latest versions of DW...

Device Preview - Relies on Adobe's servers to create a scannable QR code and runs the page through Adobe's servers
Live Preview - Again, uses Adobe's servers to show you your work
Open in Browser - The old Preview in Browser, similar to opening the file directly from within the browser itself

[Jon Fritz]

If you like, here are the instructions for turning your F12 key into Open in Browser, instead of Live Preview (this works in all versions of CC2017 and 2018)...

1. Close DW and go to...

    Windows: C: > Program Files > Adobe > Adobe Dreamweaver CC 2017 > configuration > Menus > MM

    Mac: Applications > Adobe Dreamweaver CC 2017 > configuration > Menus > MM

    (I think, I don't have a Mac to test)

2. Open the file "PIB_Dynamic.js"

2a. As always, make a backup in case something goes sideways. Add _old at the end of the back-up's file name.

3. Search for the text "dw.browseDocument". There are 3 spots with that code, but the first two are just comments. The right one should be on or about line 433, and change the text "isPIB" to "true"

The finished line of code will look like...

dw.browseDocument(dw.getDocumentPath('document'),theBrowser, "-1"/*help argument*/, false /*use temp doc*/, true);

4. Save the file to your desktop

5. Drag the file into the original location from Step 1. You will be prompted for your Admin credentials in order to make the copy/replacement

[sameh]

Thx a lot. I'll try

[sameh]

Fine so far. Thx.

What do you do to preview a page on your mobile device?

[Jon Fritz]

I use my local testing server machine's IP followed by the site root folder. I have everyone in the office test on their devices (a range of Android and iPhones) and report any issues by sending screen shots.

When the testing server is set up correctly, the IP/folder address is all that's needed for any device on the same network.