Using Web Inspector to control mobile safari browser - ios

I know very little about web development and mobile development. I have been using Safari Web Inspector as a means to automate reloading a webpage on mobile Safari on an iPhone by using the keyboard commands for refresh from the web inspector window.
I am wondering if I can further control mobile Safari over my Mac by sending commands to visit a new website (possibly via the JavaScript terminal?). If this is possible, my goal would be to automate a script to visit a list of different websites in a row.
Are there any possible approaches to accomplish this in web inspector? Is there another avenue I should explore?

Related

jquery mobile application works in chrome simulator but not in actual device

We have a ASP.net web application integrated with DotNetNuke.
The mobile version uses jQuery mobile 1.6.X.
While trying to test the application it works well in Chrome simulator(our staging environment is publicly exposed). But it does not work in any of the actual device.
Can anyone suggest how to debug this ?
For Android you can attach the device to the pc and go to chrome-> developer tools -> inspect devices
Make sure your phone is set to developers mode with usb debugging on.
For iOS you can attach your phone to a mac and open safari, develop menu and then the device you want to inspect.
There you will find the javascript console, source, style and everything you normally need for website debugging.

Ability to embed safari browser in a native mobile application

Is it possible to embed the safari browser or a downloadable browser such as Google Chrome into a native mobile application? For example, the app runs entirely independent, but has the option to open the safari browser within the application, rather than opening the Safari that is installed into the phone.
No, this is not possible in iOS. Use a UIWebView instead.
Use webviews instead and here is a list of 3rd party webviews which have more or less the same as safari iphone https://www.cocoacontrols.com/search?utf8=%E2%9C%93&q=webview

Testing a website for mobile?

I got a ASP.NET MVC website that is working fine in most desktop browers, now I need to make a version for mobile and my though is to use CSS Media Queries for this but I have no clue on how to test the page during development? Is there any desktop application that can be used like a mobile browser?
If all you want to do is test the media queries firing on certain viewport widths simply reduce the width of your browser. You can watch the UI change as different media queries fire.
You can also use browser plugins to define and set viewport resolutions. I use "Resize Window" for Chrome.
There is an Android emulator out there that you can download and run on the desktop, but this is mostly used for testing device specific features.
When it comes down to it the best way to test mobile websites is on the devices you are targeting.
you can try with
if (Request.Browser.IsMobileDevice == true)
{
....
}
To test your website you can use Chrome, there is a nice features included in it. You can change the user-agent and, then, emulate à resolution of an Ipad, Iphone or any smartphone.
It's pretty usefull to test responsive design and stuff :)
Well, in addition, be carefull it's only "simulation" it never remplace some real tests but it's nice for conception and pre-production process !
Here is a link about the change user agent feature of chrome : http://googlesystem.blogspot.fr/2011/12/changing-user-agent-new-google-chrome.html
I would suggest 3 tools that can help you:
Adobe Shadow http://labs.adobe.com/technologies/shadow: It lets you sync up the website you're viewing on your desktop browser to your mobile through the Adobe Shadow App, and you can use Chrome's dev tools on the mobile site through this method.
Remote Debugging with Chrome on Androids https://developers.google.com/chrome/mobile/docs/debugging: like Adobe Shadow you can debug and test your site through the chrome dev tools. However, you'll need an Android phone running on ICS.
Lastly, if you have the Xcode - you can use the iPhone simulator to view your sites. It is very accurate, you don't get the realtime debugging like you would with the previous two, but you can test your site on the fly after each update.

What options for web site development for iPad are available?

I'm developing a site one of the targets of which is iPad.
What options do I have to debug client side (DOM inspector, style viewer/editor, javascript console, network analyzer - all thing every major desktop browser has) when viewing the site from iPad?
I'm not looking for some kind firebug lite, or anything that makes me to debug site from iPad itself. (This would be too tedious.) Instead, what I'm after is some sort of remote debugger for mobile Safary, allowing me to work with sites opened on iPad from a desktop machine, or an iPad emulator with same capabilities. I know there is the emulator that comes in bundle with official SDK, but does it have such means?
It's the first time I'm facing the problem, so not to blame!
This is what I'm aware of:
weinre (But does it really work?)
Check out BugSense and their HTML5 (javascript) installation

Asp.net MVC2 with iPad

I have just come across the Mobile application toolkit which enables me to expose my web app built on Asp.NET MVC 2 on an iPhone and other mobile devices. However how would I expose my site on an iPad?
Are there any toolkits out there?
JD
Well, what I do is just using a Framework. I used to use jQTouch but now I'm using jQueryMobile as it works better in Android and Opera Mobile (to use with Nokias or any mobile device) much better that the last time I use jQTouch (before Jonathan took over the project).
if a user is using an iPad or any other desktop browser, I sent the user to my desktop views, if using any other iDevice, Android or Opera Mobile, I set the user to use jQueryMobile Views.
It's quite easy to accomplish this with MVC2, the controllers are the same, methods are the same, you just redirect to a different view.
I choose to should my web application in desktop mode in the iPad cause I add some meta to it and that works fantasticaly fine in the iPad, you could also use any Framework or develop a new html5 view to work with the iPad if you don't want to mess up what you have already.
You need to rememer that in an iPad, there is no "hover" effect, and a click is a tap, though Mobile Safari does a pretty good job on click events, you could create a new set of views that use this new techniques, as well, the full set of Safari CSS3 and other bonus, such as geolocation, browser database, etc
more under Apple Technical Note: Preparing Your Web Content for iPad
I hope this helps, if you need more, please more precise question

Resources