Inspecting IOS devices on chrome - javascript

I have following questions...
I am simply using javascript profiling provided by google chrome, to optimize performance of my application. I actually needs to optimize performance on IOS device but not aware about how to do it from chrome. How can I do it?
I have tried to do it from safari itself but I am unable to find Javascript profiling option in safari. What kind of option there in safari for this?
Also can you please let me know how to save profile in safari as we do in chrome.
I don't want to confuse with timeline performance option. I am asking
about javascript profiling option in safari like chrome. I am using safari version 9.0.2
Thank you,
any help would be appreciated.

After you connect your iOS device to the computer and enable the remote debugging through safari (A simple guide), click on "Timeline" tab. You may find the "recording" option there, together with the panels for performance debugging of "Network Requests", "Layout & Rendering" and "Javascript & Events". Is that what you want?
Check this out to save the profile: https://github.com/google/ios-webkit-debug-proxy

Related

Is there any difference between Mac Safari and Windows Safari apart from UI/UX?

currently I'm testing my website in which I'm getting a validation error message which should not come ideally.
The same things works fine in Windows Safari, but it fails in Mac Safari. Is there any difference in both the browser on how they handle Javascript and Ajax calls?
Thanks in adv.
Yes, in terms of interaction with the core systems - but the display and rendering of HTML, CSS and JS are identical as they use the same engine, WebKit. To read more about WebKit check this wikipedia article.
https://en.wikipedia.org/wiki/WebKit
It may be some sort of caching issue, I would suggest trying a private browsing session or clearing cache to test your JavaScript.
See also this question which talks about the rendering engine differences (of which there are none)
Differences between Safari for Windows and Safari for Mac

Angular JS breaks in Safari but not Chrome

I've written an application that works great in the desktop browser but breaks in Safari.
Does Angularjs support the iPad's native browser?
I've been googling and can't find anything that isn't related to PhoneGap. It's just javascript in a browser isn't it?
How do you even debug this?
Solution
I was using reserved words like delete in my services which broke safari and not chrome. On both desktop and tablet safari is broken but chrome works. I have to switch the reserved words to something like remove.
http://paste.laravel.com/NNB
On the iPad go Settings > Safari > Developer > Enable Debugging
On top of safari you'll get a "1 Error" or "19 Errors" and when you click the bar it will list out the console for you.
AngularJS 1.0.7 works fine on my iPad (first edition) with IOS 5.whatever.the.last.supported.version.was! It's surprisingly quick, too, although Mobile Safari crashes with depressing regularity when it runs out of memory! This happens on many other web sites, though.
Instead of renaming the method you may change the way of calling it. For instance service['delete']() instead of
service.delete()
Same problem exists with method finally of promise object (older IEs even crash on call promise.finally()).

Debugging Javascript on iPad

I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.

How to debug Javascript running in a webview on an iPad?

I have an iPad running some Javascript in a webview, but sometimes it just refuses to work. Does anyone have a way to debug this kind of issue?
You can use bookmarklets to run things like firebug lite: Check the following article for links to how to make bookmarklets installable on mobile safari as well as links to firebug lite.
http://community.godaddy.com/library/setting-up-a-debugging-environment-on-the-ipad/
Recently with the new iOS 6 you can turn on remote debugging and analyze your project with Webkit Inspector on Safari (but only with a Mac, because you must have safari 6.x).
This method would not work on the first generation of iPad too, because they're not upgradeable to iOS 6.
The question is one year old and obviously it wasn't available at the moment. I'm posting it so that someone who come up here could know it.
Info: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers
Another tool you could try is adobe shadow.
Simply enable js console

Android 2.1 Browser Javascript Problems and Suggestions

I asked a question yesterday that has gone unanswered. So I will just ask this:
What advice can you give me about Android 2.1 Web Browser and Javascript? How do you debug errors? What things do you avoid doing? What things do you make sure to do?
In a lot of ways, the Browser behaves like Mobile Safari on iOS devices. I need help with what makes it different from iOS devices.
The Android SDK is freely available, and includes an emulator that will allow you to run the browser that comes with the OS. So, you can test your site directly in an emulated device, if you don't have a device available.
There are some features for debugging via the SDK as well, see here:
http://developer.android.com/guide/webapps/debugging.html
Surely if it works in firefox etc and you have no errors via firebug then it should be fine. But you could try using firebug lite to debug any errors.
I know it this works even in IE6 so it should work in the Android browser.

Categories