Hi Ray! Yes, I DO want to learn more about Edge, especially Edge Inspect. I feel stupid asking, but I can't find any documentation how to use the thing. Not having tried Shadow before, I find it kind of quirky. First I installed Edge Inspect, and when I tried to open the app, nothing happened. I found that it was running by digging into the Activity Monitor, but didn't know if this behavior was normal or not.

When I finally figured out how to get it connected, I found that it doesn't work for my localhost development server on my laptop "An error occurred: Web page not available". Ok, I can kind of understand why if it functions through a service, but don't get how to fix this. Maybe I should install a Weinre server on my laptop?

Then I don't really get the workflow needed to debug the javascript event stuff that is at the heart of the difficulties I'm facing. For instance, my iPad doesn't follow interface events like clicks and blurs, which are exactly where the problems I'm trying to fix are, but when I start touching the interface on the iPad, it gets disconnected from Edge Inspect. Should it remain connected and display debugging info about the request, I particularly need debugging output via console.log to try and figure out what events are being triggered, and how ...

I could continue to stumble around, but I thought you might know where the in-depth resources are hiding for this tool.

Thanks for the comments Nando. Let me respond to each.

1) Docs
I think you may have a fair point here. There is a FAQ (http://html.adobe.com/edge/..., but it doesn't clearly say how to use it.

Although - I notice now that when I start Edge Inspect, it opens a Getting Started Guide. Oddly my page has no URL so I'm assuming it is a local guide that app opened up. Ahah, I just did view source and it's loading via the extension. But I could see some merit in that Getting Started Guide being available elsewhere.

Also, when I log into Creative Cloud, go to Apps, click the Learn More by Edge Inspect, I see a small doc there too.

Overall though, I think it could be a bit more clear _directly_ from the product landing page here: http://html.adobe.com/edge/...

2) localhost: I believe you want to hit it via IP instead. 127.0.0.1 works for me just fine.

3) Have you tried clicking the Remote Inspector button in the Chrome Extension? This gives you a Chrome Dev Tools for your remote device, including the console.

Continuing to stumble ... here http://html.adobe.com/edge/... I see "Edge Inspect works with URLs containing localhost, and 127.0.0.1. " OK, but how? Looking at the Firewall settings on my Mac, I see that Adobe Edge Inspect has been automatically set up to allow incoming connections. That doesn't seem to be enough.

Hmm, last time I tried localhost it failed for me and when I switched to 127.0.0.1, it just plain worked. So neither work for you? Are both machines (desktop + mobile) on the same network?

Thanks very much for the reply Ray. 127.0.0.1 doesn't work for me, same as localhost. To be clear, this is trying to hit the inbuilt ColdFusion webserver - 127.0.0.1:8500/ or localhost:8500 - so maybe I need to open access to that webserver in the firewall settings, but I'm not sure how at this point.

Maybe you could fill the gap in terms of the missing in depth docs? A preso we could find online would be really helpful. Stupid thing, but I was lost for a day over the fact that there was no interface when I tried to open Edge Inspect ... for instance.

I'm going to try again to use the remote inspector and use the interface via the iPad to see if it disconnects again.

1) I'd try this. Figure out your desktop's IP on the network. Then go to your mobile device, open the browser, and attempt to hit it. If you can't, then Edge is not going to be able to either. If you can't, then you need to check firewall settings some more I suppose.

2) I think once you get things working it will make more sense. :) It really is pretty simple. You go to site X in your desktop and your mobile devices do the same. Here's one video on it: http://www.youtube.com/watc...

I just checked and I can access my local dev server just fine from the iPad using the local network ip address. Bummer - I'm at a dead end there.

Yeah, I already have my iPad connected and following along - your blog opens on it just fine - this form is open on it right now.

Ok, so let's double check a few other things.

1) You are running the EI program on your desktop?
2) You have the CHrome Extension installed and it is turned on?
3) You ran the EI program on your iPad?
4) You connected to your desktop from the iPad?
5) On your desktop, in the Chrome Extension, you entered the passcode and see your device?

Maybe the firewall on the router needs to be open to allow incoming traffic from the internet, as if I was hosting a webserver on premises?

http://forums.adobe.com/mes... Here Mark Rausch seems to be saying that if the browser on the device can access localhost, it should work.

If the firewall on the router needs to be opened for this to work, but can't be opened because of security issues, then maybe the best solution is to install a local Weinre server?

It's stuff like this that would be really good to sort out for developers.

Regarding your double check list of 5 points, all of those I can definitely answer in the affirmative. I'm seeing this form on your blog right now via EI on my iPad, and once I post it I"ll be looking at your blog.

Oh, so to be clear, on your desktop you went to my blog and the iPad followed? So, EI "works" just not for your local stuff?

Damn.

I had EI working for everything but local stuff yesterday and all of today. It would follow every move I made in Chrome, except the local stuff - anything I tried to access at localhost:8500 or 127.0.0.1:8500 on my local machine would render an error on the EI app on my iPad - "An error occurred: Web page not available". Until a few minutes ago ...

You told me to figure out the IP of dev machine on the local network, so I did that and tried in the iPad's browser - 192.168.1 118:8500 - and it worked. I saw my CF dev server index page on the iPad.

Then when I switched back to EI on the iPad, suddenly it started working with my localhost pages. I know it's easy to get confused with this stuff, but I'm absolutely sure it was not working all day with the localhost pages, and that I didn't change any firewall settings or any settings in EI. Maybe it was browsing to your blog that triggered it to start working! ;-)

In any case, thanks for going through this with me!

Ray, I got one more thing about this tool that I'm not getting. Maybe it seems not to be working because of the flaky connection, or maybe it just doesn't work that way, not sure.

You wrote "Have you tried clicking the Remote Inspector button in the Chrome Extension? This gives you a Chrome Dev Tools for your remote device, including the console."

Yes, I've tried that. What happens is that the iPad follows me to the main url, but when use any interaction in the browser that either is posted to the server via a form or via ajax or it's just a simple DOM manipulation via jQuery, the iPad doesn't follow that. Ok, fine. But then, if I interact with my application interface on the ipad, within Edge Inspect, the remote inspector gets disconnected and I don't get the debugging information I'm looking for.

Is that the expected behavior? If so, I really need the debugging information you'd get interacting with the application interface on the device itself, especially since touch devices trigger other events in the browser than desktop devices do. If Edge Inspect can't do this, how do folks get this feedback when debugging mobile apps???

"Yes, I've tried that. What happens is that the iPad follows me to the main url"

This doesn't make sense. Clicking the icon to get the dev tools isn't asking for a new url. It is saying, "Show me Dev Tools on the Mobile Device for the current URL we are sharing." So yes, it does open a new tab, but just to hold the dev tools.

You are saying that when you did it, your iPad browser went to a new URL.

Did you really mean that?

"You are saying that when you did it, your iPad browser went to a new URL. Did you really mean that?"

No. Dev Tools for the mobile device opens in the new tab, as you say, but I can't work out how to debug the interactions I'm talking about. I'm saying that in terms of debugging, Dev Tools only follows me to a new URL, but all interactions on that page itself - mouse clicks for instance that transform a text into a text field for editing - neither the Dev Tools interface, nor the EI browser window on the device - follow those interactions. And when I go to the device and click on that text that changes into a form field for editing via ajax, the Dev Tools window on my laptop say it got disconnected.

So in essence, I don't know if I'm using the tool in the wrong way to debug this stuff, or the tool isn't designed for this.

What I've got is a list of start times to end times that I have set up with jQuery to be editable via ajax, so users can just click through them and change these details quickly without needing to open the form for each "event". I've got the form field submitting on blur and on keypress of the enter key, but it's not working right on the iPad, and I'm not sure which events are getting fired, or what else might be getting screwed up because of the different event architecture of a touch device. So I'm trying to figure out how to debug that, maybe by putting stuff like console.log('blur event fired on start time field'); throughout the javascript code. But so far, I don't get if it's possible to see that using EI, or in fact if there is some other tool that would make it possible that I'm not aware of.

A few things:

"but all interactions on that page itself - mouse clicks for instance that transform a text into a text field for editing - neither the Dev Tools interface, nor the EI browser window on the device - follow those interactions"

This is expected. EI follows navigation, it doesn't mimic all your events. So if you had a button where, on click, it did an alert('hi'), it would NOT run on the mobile device. EI is following *navigation* events only. (Although it is pretty sophisticated. It can recognize a History API change ala jQuery Mobile.)

So, from what I can see in your last paragraph, it seems like you want to a) open the dev tools and b) type/click stuff on the iPad to try to fire the events.

"So, from what I can see in your last paragraph, it seems like you want to a) open the dev tools and b) type/click stuff on the iPad to try to fire the events."

Yes, if that would be possible. Most importantly, but not stated directly would be c) see what is going on via the remote console in Dev Tools. So if, for instance, I've got the following jQuery code on the start time for an event:

$(".st").click(function() {
console.log('click triggered on start time text');
});

... there would be some way of getting to that log information when I touch the start time on the iPad (or any other touch device), as an example, to make sure the click event was firing as I want it. (To be clear, it is. The trouble I'm facing today is elsewhere, but the foundational problem is that I don't know how to get to this information to debug javascript on touch devices ...)

I was hoping that EI would be able to do this sort of debugging since it connected the device to Chrome's Dev Tools, but right now it seems not.

And maybe there is another way of doing this that I'm not aware of? Bottom line is I need a way to see what events are being fired, and what variables / values are being manipulated on the touch device's DOM when I poke at it with my finger. Thanks for any insight you can provide!

Ray,

Looking elsewhere, I dug up this relatively new method of debugging Safari on iOS 6 only:

http://tinyurl.com/c9yqebs

I have yet to try it, but the description specifically indicates that console.log() works with this approach, so I expect it will work.

console.log does work for me. Tell me, in the console, can you type alert('hi') and see it pop open on the iPad? If not, and if everything else works, than I'm at a lost and will ask you to try the official EI forums.

Ray,

Good you said that, because I tried again and this time EI worked as I was hoping it would. I set up a connection, navigated to the page I"ve been trying to debug, and then started using the page I've developed on the iPad and got the console.log info via Chrome Remote Dev Tools Console output on my desktop! Every time I've tried before, I got disconnected, so I thought it wasn't supposed to work that way.

Glad you got it!