I am trying to monitor the requests for images to verify whether the images are loaded from the ios/android cache or they are still being requested from the backend firebase storage. I am using React Native Debugger by enabling Network Inspect but can't seem to observe the requests for images (URIs) of react-native "image" components. How can I monitor the requests for images or how can I check whether the images are loaded from the cache or not?
Thanks!
According to the React Native Debugger documentation here: https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md
It can't inspect request like Images loaded from urls for src, so if
your Image source has a set session, the session can't apply to fetch
and XMLHttpRequest.
The same document refers to Charles & stetho for monitoring these kinds of requests.
If you want to inspect deeper network requests (like requests made
with Image), use tools like Charles or Stetho.
I installed Charles on my mac, installed the certificate on my iOS device, and enabled it using the information contained on the below links. Now I am able to monitor the requests for images.
1- https://www.charlesproxy.com/documentation/getting-started/
2- https://www.donnywals.com/debugging-network-traffic-with-charles/
3- https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/
4- https://stackoverflow.com/a/49129286/1680793
(You may need to visit other linked pages on the links I listed above as needed)
Install Charles on you Mac, launch this help action as described in the documentation I listed:
Charles will guide you about how to install and trust the required certificate on your device:
Some important points:
When you install Charles on your Mac/PC, if it asks for making the
required configurations automatically, allow it.
To install the certificate on your ios device browse to
chls.pro/ssl URL using the SAFARI browser, not Chrome. Then
follow the instructions your device displays to install the
certificate. (I was especially interested in monitoring my iOS device
since android seems to cache the images by default)
If you are using firebase storage as your image store (as I do) and can't see the requests/responses being recorded by Charles, lookout for a message like this: SSL Proxying not enabled for this host. Enable in the Proxy Menu, SSL Proxying Settings
You need to enable SSL proxying for https://firebasestorage.googleapis.com. Add firebasestorage to SSL proxying configuration like so (or whatever URL you are interested in monitoring the communication with):
Charles will be recording everything going on with your mac, to
observe just the "firestore" requests from your app for your images,
use the "filter" box at the bottom of the structure tree on the left
pane (see the first image above).
Don't forget to disable your WIFI proxy after you are done with
Charles or you will not be able to connect to the internet.
Make sure you follow the documentation carefully and pay attention to my list here.
Charles is a paid tool. You can use the trial version for 30 days.
And each launch will terminate itself after 30 mins, so you will need
to restart Charles.
Related
I am doing a small research project to test DASH streaming on very low bandwidth mobile connections in India.
I have an AWS machine where I can upload video and package it for MPEG-DASH and HLS streaming and create the MPD and m3u8 files.
But I am unable to serve the video.
I have tried with Apache and node.js. I was told that by just placing the folder that contains the mpd nad m3u8 files with the video chunks I should be able to stream the video.
I am not sure what I am doing wrong. Is there any special configuration I need to do to server MPEG-DASH video ? If there a tutorial/blog/github project someone could point me towards, that would be brilliant.
TIA.
Setting up a DASH Media streaming, is fairly involved. You can get all paid services from Bitmovin, Wowza and many others but don't give up yet. There are a lot of open-source stuff out there as well that works. I have been working on DASH for a while now.
Here's my setup,
OS: Ubuntu 16.04
Server: Apache2 (easy to setup): Few edits I had to do: CORS and an alias setting.
Client: Dash.js: Literally just get the dash.js-master branch from github. Don't get stuck with the dash.js-development branch, if you don't wanna end up editing stuff.
Content Generation: ffmpeg and MP4Box
All you have to do for initial setup is make 2 directories in your apache's root directory, (i.e. inside the folder that contains index.html). Your first directory will be the compiled dash.js client and the second will be your content directory.
Point a link on your server to the dash.js reference client, then all you have to do is play your mpd on the client. (Make sure it confirms to the mpd validation norms though)
Now, this might just work only on a computer and not a cell phone, but hey I think you disable all the connections (wireless and wired) on your computer and use one of those wireless dongles provided by Airtel/Reliance/any network provider!
Shall be here to answer more insightful questions, hath need be!
You do not need any server side application. If you are using AWS a simple S3 bucket behind Cloudfront will do the trick nicely, without any EC2 needed at all. Just ensure you have CORS and crossdomain.xml in place.
Stefen Lederer posted a blog about just this set up.
Also, use your browsers developer mode to catch failed requests and console errors which might give pointers as to why it is not working for you.
After reading the docs, it seems that phonegap/cordova is like a local web server that serves html, js and css to the mobile native browser.
Can phonegap/cordova serve files not only in local ? i want to know if it is possible to make them LAN servers for example, without installing apache on the mobile device??
Thanks.
UPDATE:
I feel i need to describe my probleme.
I need to create a mobile app, that allows mobile devices connected on the same wifi network (without internet) communicate with each others. If this is possible only with phonegap it would be great.
Cordova uses the WebView component to display your content. It's more or less equivalent to opening html files directly in your desktop browser by going to file > open.
If you want some content on a lan, just link to it in the html that is rolled into the Cordova app as you would load any content in html from an external source.
Is there any way to load background js even on error pages (such as net::ERR_NETWORK_CHANGED)? I need to keep persistence connection with WS server from the extension, but error pages don't load background js. So I lose the connection and possibility to restart it (due this is automated tool without access to browser ui).
The only solution I found is to use proxy server to customize error pages and load background js inside of them.
The assertion "Background js doesn't work on error pages" does not make any sense, because there's only one background page per extension two if you use split incognito mode.
So I assume that you want to detect a network connectivity loss in order to restore the web socket. Chrome offers two reliable global events for this: online and offline.
I have published the source code of Real-time desktop notifications for Stack Exchange inbox, which also accounts for network connectivity loss/regain. The relevant Web Socket part of the Chrome extension is found in stackexchange-notifications/Chrome/using-websocket.js on Github.
I'm trying to find a non-SSL resource that is being loaded on my site.
This happens occasional where one of us forgets to use the https version of a resource (like some js in a CDN).
My question is there any firebug-like tools to find these "Turds in the punch bowl"? I want my green padlock back :)
Besides Firebug, which you've mentioned, you can use the developer tools in Chrome:
Tools menu -> Developer Tools
Go through the list of loaded resources in the Network tab
Alternatively, the HttpFox extension for Firefox can also be useful. It will keep logging the traffic even when you change pages, which may be useful in some cases.
(This is very similar to Firebug.)
mitm-proxy is great for stuff like this - http://crypto.stanford.edu/ssl-mitm/
You run it on your local machine in a console window, set your browser to use it as a proxy, and you can watch /log everything that your browser requests. It's a little noisy since it shows SSL hand-shaking and file contents, but you can filter that down. When you need to debug SSL communications it's invaluable to see those details though..
mitm-proxy is based on http://grinder.sourceforge.net/g3/tcpproxy.html which has more in the way of scripting capabilities.
I have a problem with embedding SWFs via SSL.
I know that the common misconception with embedding SWFs on secure pages is that people always try to embed it using a non-secure link. This isn't the case, as I am trying to host the SWF and swfobject.js locally using relative paths to account for the use of SSL.
It appears that the first of these players (under ssl) will play the audio playback, but won't display the video, while the second one will render the entire SWF fine.
Here are 2 examples that are EXTREMELY similiar. Unfortunately I can only post 2 hyperlinks, so you'll have to swap the http: protocol with https: to see how each player renders under SSL.
These 2 players are using 2 different SWF's, so I'm lead to believe it's a Flash/ActionScript issue, but I have failed to isolate it.
Example 1
Non-secure working embed
Example 2
Non-secure working embed
First, Mixed http & https are different domains that run afoul of the Adobe Flash Player's same-domain security restriction. Using a cross-domain file on the root of your server will allow access.
Second, IE has some known problems with SWF and SSL.
Third, be sure to enable https and check to ensure you have a valid root certificate.
Without more information, this is the best I can do.
The best way is to test your work using the Debug Version of Flash Player. This works best in Firefox. Chances are there is something (dependency or resource) that the player is trying to get without SSL.