I used to be able to hook an iPad up to my PC on USB and launch Firefox WebIDE to debug web development projects on the iPad.
This appears to no longer be working due to an extremely vague notice on Firefox website: https://developer.mozilla.org/en-US/docs/Tools/Valence.
How can I debug a website on the iPad using Windows?
I am running my development server on my Macbook Pro running Mac OSX 10.11
Accessing the webapp from the Macbook Pro itself via localhost:3000 works fine.
Now I want to access the webapp from my phone. Both devices are connected to the same wifi network.
The local IP of my macbook pro is 10.0.1.7.
I open safari or chrome on my iOS device and type in http://10.0.1.7:3000 and the browser instantly turns the URL into localhost:3000//
Whats going on? Why is it doing this?
I remember sometime ago this use to work, but maybe with a recent iOS update it stopped working.
I have even tried to use the network name of my computer
My-Macbook-Pro.local:3000 and it still resolves to localhost:3000//
I tried to run my app in live view mode on an iPhone device from appcelerator studio and get the error :
[LiveView] File Server unavailable. Host Unreachable # 192.168.1.122:8324
[LiveView]Please ensure your device and computer are on the same network and the port is not blocked.
conditions :
1. Device : iPhone 5S with IOS 9.2.1
2. Titanium SDK 5.1.1.GA
3. Firewall off and connected to the same wifi
4. xcode 7.2
5. Appcelerator Studio 4.4.0
6. Latest appcelerator CLI
can't we use live view when deploying to iOS device?
nb : it works when i use iOS simulator and android devices
I just looked through the LiveView code and confirmed this issue happens when the LiveView code inside your iOS app can't see the LiveView server running on your computer. You claim that both your computer and your device are on the same network and the firewall is off. I suppose the next thing to check is the LiveView server even running?
LiveView lives inside the Appcelerator Studio directory. On my machine it's located at /Applications/Appcelerator_Studio/plugins/com.appcelerator.titanium.liveview.core_1.1.0.1445037865.
You can manually check the server status by running:
/Applications/Appcelerator_Studio/plugins/com.appcelerator.titanium.liveview.core_1.1.0.1445037865/node_modules/liveview/bin/liveview server status
There's actually a couple other subcommands you can pass in: start, stop, and restart. If the status command above says that the server is running, stop it using:
/Applications/Appcelerator_Studio/plugins/com.appcelerator.titanium.liveview.core_1.1.0.1445037865/node_modules/liveview/bin/liveview server stop
Build your app again and Studio will start the LiveView server again and hopefully this time it works. I don't think you need to manually start the LiveView server. I'm not even sure if that would work.
I hope that fixes your problem.
I'm currently developing a mobile app using Meteor v1.0 and trying to test iOS devices using the iOS Simulator.
For Cordova apps, I'm used to doing something like:
cordova emulate ios --target "iPad"
For Meteor, the alternative is:
meteor run ios
On my Mac, running the above Meteor command leads to the app being run on an iPhone 4S emulator. I'm unable to choose what device to emulate like I could when using Cordova.
I've tried switching device through the iOS Simulator after the app gets loaded initially but the app is not available on the device I switch to.
The only solution I have found is to navigate to the Cordova directory (.meteor/local/cordova-build) and run the iOS Simulator directly from Cordova.
Does anyone know a better solution by using Meteor itself or is this not currently possible? I haven't been able to find anything in the documentation. I'm open to testing it using something else but it would be nice to keep everything together with Meteor.
The current solution is to open Xcode by running meteor run ios-device and then select the correct simulator inside Xcode. Unfortunately, ios-sim (the package Meteor uses for the simulator) doesn't make it easy to select the device to simulate.
meteor run ios-device -p 3000 is what I do. Then download the phone gap app for iPad and run it on your IP:
ipconfig getifaddr en0
Then put that in on the phone gap app. So example: 192.168.0.8:3000
New iOS 6 Safari comes with Web Inspector feature which allows to connect to it from your desktop Safari via USB cable. It then allows you to debug pages opened in iOS Safari from your desktop. But as far as I seen, this feature curently supported only on Mac Safari, not on Windows? Am I right, or Windows Safari also has the possibility? Or it will become available later maybe?
It appears to require Safari 6, which has not been released for Windows. Regarding the unavailability of Safari 6 on Windows, Apple has stated "Safari 6 is available for Mountain Lion and Lion. Safari 5 continues to be available for Windows."
I regularly use weinre. It basically runs a webserver that in turn acts as an inspector-enhanced proxy to browse webpages and websites. The inspector can be started by adding a script to your page or running a bookmarklet.
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
To install it, you will need NodeJS and NPM (included with NodeJS). You will also need a WebKit-based browser on the desktop/receiver end (Safari, Google Chrome, or Chromium). It should work on Windows, OSX, and Linux.
Official page: https://people.apache.org/~pmuellr/weinre/
Documentation & Getting Started: https://people.apache.org/~pmuellr/weinre/docs/latest/
NPM Package: https://www.npmjs.com/package/weinre
If you already have NodeJS and NPM installed, you can install and run it with:
npm i -g weinre
weinre
# Go to the URL that it outputs for instructions to use it
UPDATE:
#EvAlex has pointed out another tool very similar to Weinre called Vorlon.js. It is pluggable and supports viewing/switching between the inspector of multiple devices simultaneously.
Setup Vorlon on Windows
npm i -g vorlon
vorlon
Verify Vorlon is Running
Open a web browser and navigate to http://localhost:1337
Setup Ngrok
Download Ngrok: https://ngrok.com/download
Unzip it
Open a command prompt: Start -> Search -> cmd
Navigate to ngrok.exe: cd <ngrok_path_where_ngrok.exe is stored>/
Run it: ngrok.exe http <port> e.g. ngrok.exe http 1337
Ngrok provides a url e.g. https://0ad8c32f.ngrok.io -> localhost:1337
Copy and paste the ngrok url into your webpage.
<script src="https://0ad8c32f.ngrok.io/vorlon.js"></script>
Navigate to the page under test on your device(s):
http://thepageiwanttotest.com/testing123
References
Vorlon Reference: http://vorlonjs.com/#getting-started
Ngrok Reference: https://ngrok.com/download
Stumbled upon this blog which shows how to debug iOS web app on Windows using a stndalone app by Telerik called AppBuilder. You're supposed to create an account on their platform before using it and it has a 30 day trial.
I've used this on windows 7 64 bit for both vanilla web apps and Phonegap apps both on iPad with iOS 7.1, and it works. You get web development tools very similar to those in Chrome.
I have found a great tool called GapDebug
that's was the right solution for me :)
After trying to get Weinre installed on my Windows 10 machine which is running IIS and a localhost client and never being able to get it to work, I looked for an alternate solution.
Turns out Safari for Windows was discontinued by Apple but I was able to fine a copy after discovering the following link. Oh, the Web Inspector in Safari was able to help me find the problem in my application once it was installed.
https://apple.stackexchange.com/questions/68836/where-can-i-download-safari-for-windows
Once Safari was installed, I needed to turn on the developer tools. This required going into Preferences > Advanced > check "Show Develop menu in menu bar" > (click on page icon next to sprocket icon hover over Develop) Start Debugging in JavaScript. From here on it felt very much like Chrome...:-)
Use iOS WebKit debug proxy
It allows you to debug directly in Chrome with live preview.