Trying to debug

Today I was trying to debug why the menu on one of my websites wasn't dropping down on a touch event on my tablet. The first problem I had was that I needed to get the local copy of my dev site to load on my tablet. The dev site is on a VM with a NAT connection, meaning the VM is only accessible from the host machine.

So to access the dev site from my tablet, I had to open Fiddler on the host OS of the VM, and check the 'allow remote computers to connect' option on the connections tab of Fiddler's options. Then on the tablet I had to (install and) open Fiddler, then in Fiddler go to Tools > hosts, and add the IP address of the host OS machine plus the port that machine's Fiddler was listening on in for the domain(s) I wanted to test. (See here: Using port number in Windows host file).

With that done, a request on the tablet is routed through Fiddler on the tablet. This then routes the request (as per the line(s) added to the Fiddler specific hosts file) to Fiddler on my PC. Fiddler on my PC then routes the request to my VM (as per the Windows hosts file on my PC). And then the server on my VM will receive and can respond to the request.

When I had the site accessible, I could start debugging it. However, debugging on the tablet is pretty terrible. The developer tools window is really cramped and doesn't play nice with the on screen keyboard. I found the issue was that none of the touch support feature detection checks in doubleTapToGo.js were passed by MS Edge. Unfortunately I couldn't find an easy solution, e.g. see Touch API (e.g. touchstart) not working in MS Edge.

I did notice that onmsgesturestart exists in window, and possibly this can be used instead. However, debugging / using the console on the tablet is just too difficult. So I'm currently waiting for the Edge VM image to download. Of course, that doesn't mean I can avoid having to do any debugging on the tablet. But I can at least use the Edge VM to check whether onmsgesturestart is triggered by the mouse or not before trying to use it for touch detection.

Another possibility may be checking if a hover state has been triggered when a pointerDown event occurs. But I'll need to do some testing to see whether that would work at all or not.

Edit 2015-12-07: After doing some testing, Edge doesn't seem to fire the touchStart or MSGestureStart events on touch. However, the solution to the specific doubletaptogo.js problem I was having is quite simple, and actually detailed on the doubletaptogo.js web page: simply add aria-haspopup="true" to any anchors that have a submenu that should display on hover.