I am trying to debug the network requests for a hybrid/webview cordova based application in the ios simulator, actually see the network requests in the Safari Web Inspector. I am trying to use the Web Inspector within Safari to monitor the network requests to the server but all I see is the "timeline" graph, I don't see the actual URI requests. Is there a way to enable this?
I build my application through xcode. Launch the iOS simulator with iPad2 selected/iOS 8.1. I then launch Safari and select the "ios simulator/index.html" to launch the web inspector. And then click on network requests. The resources tab pane is empty when I make web request calls. Is there a way to fix this so I can see the url requests?
Xcode: 6.1.1
Safari: 7.1.3
OSX: 10.9.5
I'm not quite sure if it's even possible to do that via web inspector or not but put option 1 just in case. I highly recommend you to go with Option 2 tho.
Option 1
First make sure you don't have anything filtered, then make sure recording is on as shown in picture.
Option 2. RECOMMNDED
Use an http monitoring tool. They are design to do that specific task plus you get many more options such as breakpoints, etc.
Charles Proxy. (MAC) The best IMHO. You can set breakpoints and alter request/response if needed. And many other features.
HttpScoop (MAC) Easier to use, but less functionality.
fiddler (WINDOWS) Just in case.
PS. Some one might say Wireshark, I know but it's too complicated for such work.
[UPDATE 1]
To make it clear you don't need to set any proxy on iOS simulator to get these tools working. In case of SSL connections you want to use charles and follow their SSL guideline.
I use Proxyman to monitor network traffic from the iOS simulator for the following reasons -
It has a clear set of instructions on how to set it up with both iOS
simulators and Android emulators.
It has a simple, intuitive UI, which makes it easy to work with.
Also, you might find it worthwhile going through this stackoverflow post.
Related
Joomla automagically recognises the mobile template and displays it on the mobile devices. but sometimes it does not display(very rarely) and also sometimes the behaviour is different(like logo disappearing).
Question:
1) Is there a way we can test the mobile template on the desktop computers (like m.mobilesite.com) so that we can debug the issue?
Yes You can,
The http://www.browserstack.com sites Provide a real machine for testing the device and browser compactability.(It a remote machine so the result is 100%).This required signup.
Also you can check iphone and ipad compactabilty with safari Developer option.
From Settings->Preference ->Advanced ->check the Show Develop menu option.
Now you will get a new menu in the browser Developer there you can choose the user agent.
You can also find several sites that provide mobile testing but those are not 100% sure
like iphone4simulator.com, iphonetester.com
Hope this may help you..
I also found that - If you decrease your browser width and height - it will display mobile format. I am not sure if this is a feature of later versions of joomla. Also on Chrome - developer tools, there is an option to choose the mobile device to test the webpage.
I wanted to write an AJAX based hybrid Android application.
I tried to get my head around weinre but I can't get the network panel to appear. It does not show regular network interactions and for any XHR interaction it states "status pending" and "type pending".
Has anybody else faced this problem?.
This link did/did not solve the problem: https://issues.apache.org/jira/browse/CB-5424
Weinre is pretty limited, and nowadays better solutions exist to inspect your Hybrid app:
On Android 4.4 and above (or lower Android if you're using CrossWalk), you can use Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging Just point to chrome://inspect/#devices and you should see your device and hybrid apps and browsers. You may need to first run adb start-server for Chrome to see your device
On iOS, you can use Safari (on a Mac): you need to enable Web Inspector on Safari on iOS, and use the Developper mode of Safari on the Mac. See eg http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
I am developing a web app that involves touchEvent. It will be much more easier to debug those if I can view the console remotely on my Mac.
Can I make my Mobile Safari on the iOS device store the console log somewhere in the system. I have already jailbreak my iPad.
Thanks!
plug iphone into computer
settings > safari > advanced > web inspector (turn on)
open safari on your computer
run your web app on your iphone in the safari browser
on your computer in safari, go to Develop -> "name of your iphone" and then find the correct tab under "Safari" opens Web Inspector.
doing these steps enables the safari debug tools on your desktop to reflect and respond to the connected iphone.
hope that helps.
Just turn on the debugging console in Mobile Safari. This is enabled in Settings/Safari/Developer.
One File Remote Console.log for node.js
Solution: Server side console log.
In iOS6, you can now use the Remote Web Inspector on OSX to connector to the iPhone via USB. See the Apple documentation for more information.
You can use a remote javascript console. There a few available.
weinre
spotneedle
jsconsole
Not sure if I'm allowed to re-post my answer from another question, but at this link here 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.
mobile-console-log is also a utility for debugging directly from your mobile into Chrome Devtools
I would like an iPhone simulator for Windows. Something similar to this one here:
http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/
Note, this is NOT to test iPhone Apps... but rather, to test websites. I know I could just use a browser, but I was hoping for something with a bit more functionality ( specific to the touch interface ) that I could test some web pages on.
I've seen the beta project here: http://labs.blackbaud.com/NetCommunity/article?artid=662
Is this the best option at the moment? The article was from last year, that's why I ask.
Just to add additional information to this post:
found another one for both iphone and ipad: http://code.google.com/p/ibbdemo2/downloads/detail?name=iBBDemo2.air&can=4&q=
Google Chrome now has the ability to "Toggle Device Mode" by clicking the Phone icon in Dev Tools. This gives you a more touch-specific interface than just using the browser, allows you to throttle data, etc...
From here, you can choose the device:
You can do it all online, without a simulator:
http://iphonetester.com/
Keep in mind, it's not a real test on an iPhone, but if you use it with Safari or Chrome for Windows, you'll come really close to how it'll look on an iPhone.
UPDATE: iphonetester.com no longer exists.
That's the best I found: http://iphone4simulator.com/
There is a commercial successor to iBBDemo2 that's available for $40 - http://www.electricplum.com/studio.aspx
I have an HTML5 application that requires offline support. For running the application, I use a local Apache server. I am trying to figure out what the best way is to simulate offline mode.
Currently, in Firefox I disable my Air-Port to simulate offline mode, but this is a pain.
Any suggestions? I am open to using other browsers, if a method exists that doesn't require turning off my Internet.
For Firefox
☰ (hamburger menu)->More->Work Offline
Google Chrome doesn't appear to have this feature
Edit:
Also, another alternative is slightly more time-consuming to setup in the beginning but might be worth it. For Firefox/Chrome there should be proxy plugins, set up a fake/bad profile for each so that you proxy to something that doesn't exist... like 127.0.0.20:8080. After that you can switch the proxy setting on and off to emulate a full-stack test.
The other answers are out of date. The only place this appears in Firefox v92 is under
File > Work Offline
The File menu can be accessed in the top left of Firefox by pressing the ALT key.
Be warned that this does not prevent traffic from "localhost" loop-back itself, unless you additionally turn on
network.disable-localhost-when-offline
preference in about:config.
Bugzilla issue: Add option to disallow connections to localhost while in offline mode.
In Chrome you can open developer tools switch to the network tab and set throttling to offline
For Firefox, from the ☰ (hamburger menu), choose Web Developer > Work Offline.
For Chrome, open DevTools and select the Network panel. Throttling is set to Online (Disabled) by default. From the dropdown menu, you can choose presets Fast 3G and Slow 3G, but to simulate Offline Mode, you want to choose Offline.