I'm using localStorage.setItem() for setting the data in the localstorage of my browser
but I don't know what is happening in my android browser the data is not getting saved in localstorage
localStorage.setItem("mytime", Date.now());
Yeah. The mobile browser also has localStorage & sessionStorage. Check Mozilla docs
Refer Can I Use? too...
If your data is not getting stored in localStorage of mobile devices. You could debug mobile devices by
Android -remote debugging.
iOS - remote web inspector
I've created a simple app using requirejs, angularjs and ui-grid. All it does is to get some data from an excel file and show it on the grid.
It works nicely when I view it on my desktop, but on mobile (Samsung Galaxy S3) it gives an error (shows the {{myBoundVar}} as if angualr app has not started). On Nexus 4, it shows the site, but with an empty grid (although I can see it has taken the data, since I see the grid's headers which are taken from the excel).
I can't seem to debug it, since using remote debugging shows the site correctly (just like it shows it correctly on desktop).
Is there a way to debug directly on mobile (e.g. just see the JS errors)?
You are looking for Remote Debugging on Android with Chrome which allows you to open a live Chrome DevTools window for your website on your android from your Chrome Desktop isntallation as long as you are running Android KitKat or above.
Simply enable developer options on your device, connect it's USB to your computer and visit chrome://inspect in your Chrome browser. More detailed instructions are at https://developer.chrome.com/devtools/docs/remote-debugging.
I am currently making a web app and I have used a manifest file to get my web app to work offline. This works great and using Google Chrome, Opera etc I can view what is being cached by right clicking, inspecting the element and viewing the resources.
The problem I have is that I want to view what is stored in the cache in the app when it is being used on an i-pad. I have give this a Google but cant seem to find anything. Is there a way of displaying what is stored in the cache using some JavaScript or JQuery and then having this displayed on a web page within the app.
The app consists of a webview which is currently pulling in other html pages which are being stored in the cache using the manifest. I want to add a simple settings page where what is being stored in the cache can be viewed within the app. Hope that explains enough I would really appreciate any help with this matter.
I don't know of a way to get at this information with JavaScript either, but here are the alternatives I use.
In Mobile Safari, I connect the device to a Mac, open Safari on the Mac, open the site in Mobile Safari or open the native app going to the screen with the UIWebView, go back to the Mac and open the Develop menu. From there you can select the Storage option and view what's in the appcache.
In Chrome, you can view what's stored in the appcache using the URL chrome://appcache-internals/.
If the appcache was saved successfully, you could also simply go to the file itself in your browser.
I have an iPad with iOS 6.1 connected to a windows 8 machine. I would like to be able to debug some javascript code running on the iPad.
The safari on iPad has a web inspect option that needs the iPad to be connected by wire to computer and then can be accessed in Safari for desktop's develop menu. I installed Safari 5 for Windows but don't see the iPad detected in the develop menu.
Any other ideas ?
The Firefox Tools Adaptor allows one to use Firefox DevTools for Safari on iOS.
https://github.com/mozilla/valence#debugging-safari-firefox-and-other-webviews-on-ios
For remote debuggin I use Weinre.
Weinre has almost everything you need, but lacks a JavaScript debugger.
It has a WebInspector for DOM manipulations, network traffic, timeline, resources and a console.
Checkout this project on GitHub: weinre-remote-debug to setup weinre locally.
Another option described on this page is jsconsole.com. By appending a <script> tag to your page (or running a bookmarklet on your device) you get access to a JS console.
To start, go to jsconsole.com and run :listen in the prompt. This will give you a unique session ID and a script tag that you insert into your mobile web page.
Now, any console output that your mobile page generates will be streamed to the console open in your desktop web browser, including any errors!
It is certainly no replacement for a full web inspector, but it can get you out of trouble when you don’t have access to a Mac.
Source: https://blog.idrsolutions.com/2015/02/remote-debugging-ios-safari-on-os-x-windows-and-linux/
I'm doing some rough development on the iPhone. I'm writing a native iPhone app, which uses an UIWebView object to load web sites with javascript. I find very difficult to debug the javascript code on an iPhone.
What are the methods/techniques available for this matter?
Since Safari on the iPhone is using webkit, you could use the debugger built into desktop Safari's web inspector. While there will probably be some quirks that are different between platforms, it will give you a pretty good idea of what's going on in the interpreter.
If you have access to an Android phone, you can debug your application using desktop Chrome's full developer tools and a USB cable (very convenient).
That means the debugger, profiler, HTML inspector, etc, all running on your mobile phone, but accessed through chrome running on your laptop/desktop computer.
Android Chrome and iPhone Mobile Safari are usually more similar to each other than Desktop Safari is to Mobile Safari, the screen format will be similar, the layout similar, and you'll be able to try real touch events, etc.
https://developers.google.com/chrome/mobile/docs/debugging
It'll require Chrome, an Android device able to run the android Chrome app, and a USB cable.
You have to install and use the ADB console command, but once its working, you'll have the full chrome developer tools interface available for debugging mobile.
Similar to Adrian Harris, it is possible to debug any website on the iphone by creating a dummy project in dashcode, clicking on "Mobile Safari" and then "Run"
Once the iPhone Simulator opens and safari opens with the dummy project website, click on the url bar of safari, enter any public url, and when you are at the site, you can click "Pause" and the debugger will pop up after any javascript code runs. At this point, variables can be inspected, breakpoints set, etc.
I know this is an old question, but wanted to update the answers with the latest info ->
The new safari (for mac) has a way to use the web inspector on an actual iphone or ipad in real time if you have the latest software (safari, iOS6, and MacOS) and an attached (with a cable) iDevice.
You access it by enabling it in the "advanced" safari preferences on the iphone, then under the develop menu in safari on the mac. See here for more info: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html#//apple_ref/doc/uid/TP40006515
You can also access the simulators in the same way (installed with xCode).
I agree with pjbeardsley. I would add to use your web page within http://www.testiphone.com/ just so you can see what the dimensions will be like. I would definitely use Safari and the Web Inspector for it as well
I have had mixed success using Dashcode which has a javascript debugger paired with the iPhone Simulator. It is a bit tricky to get working because you can't launch it without opening a project. But as I recall, I posted the project on the web, launched a placeholder project, and then debugged the placeholder project in Dashcode. Then I navigated to my url in the Simulator and was able to set breakpoints. There were probably a few other hoops to jump through, but once it was working, it was like I had a real debugger within Mobile Safari, which was great.
Good luck