Measure application stats with chrome dev tool? - google-chrome

I am using dev tool(mainly network tab ) provided by chrome . I know it provides a lot of stats Chrome Dev tool but I need to measure below stats
1. Time taken by webserver to process the web request ?
I know there chrome provides Waiting(TTFB) but that is Time To First Byte which means the time the server took to prepare the response and time taken by data to travel from server to browser
2. Time taken by data to transfer from server to browser ?
I see Content Download stats . Is it the network travel time ? If yes Is it
`Time taken by webserver to process the web request = TTFB - Content Download`
3. Time taken by browser to render data ?
Also in below image I see three stats Finish, DOMContentLoaded, Load ?
Mine understanding is
Finish :- Complete time taken by request from start to finish
DOMContentLoaded :- Time tiken by request to the point when DOMContentLoaded is done(i.e. HTML is rendered alongwith JS/CS files downloaded)
Load :- Time tiken by request to the point when onLoad event is fired

Related

chrome behaviour when writing indexeddb. "data may be stale"

I have an app which downloads 1000 small images and writes them to indexedDb (using localForage). Upon the completion of the download, and the 1000 indexedDb setItems, I look in the devtools and the database is empty. I see the message "Data may be stale". Clicking "Refresh database" makes no difference. If I load a copy of the app in a second window, it sees an empty database. After a minute or so of reloading the 2nd window, the data appears.
Can anybody explain what I'm seeing, and if there any optimisations I can apply to have the data available more quickly?
It means that the indexedDb has detected an data that is not in syn with your present project. Also, be sure to include a break statement if your using a switch statement
Check out this link for more info
Data may be stale

Application Cache - HTML 5

In one of the online documents that talks about appcache for HTML5, it indicates that the cached files get updated once an offline user reconnects. I checked the original HTML5 appcache definition by W3, and I am not able to find anything that supports this statement.
Does anyone know if this is to be true?
Thanks in advance
MDN says the following, although if you scroll up on that page it says it's being deprecated.
If an application cache exists, the browser loads the document and its associated resources directly from the cache, without accessing the network. This speeds up the document load time.
The browser then checks to see if the cache manifest has been updated on the server.
If the cache manifest has been updated, the browser downloads a new version of the manifest and the resources listed in the manifest. This is done in the background and does not affect performance significantly.
And logic tells me that it would also depend on the app you're using, server you're trying to connect to and any special settings it might have, how long your browser keeps it's history, what it keeps, and if you saved the page to view offline - whether or not you have all the code/images saved in the right location(s).
Example:
Imagine you saved a page to view offline, and that page has a JS event handler that ran a while loop that did an ajax request every n seconds to do something, like make a number on a page change as long as you were online... As long as the loop is running, you suddenly connect to the internet, and it makes the request to the proper url with the right arguments, then it should go through, even though the url in your browser might say something like file:///C:/Users/you/Desktop/....
I've done this before, even though my url was like the one above. One time I was using braintree's drop-in javascript to a website, and using it's api on my backend. Trying to load the page when offline = Nothing. Online = Updated the spot on the page just fine when I had the required arguments, and it was pointing to the right url. If I got offline again, I could refresh the page, see the same images loaded in the <div>, but I couldn't send any data with it.

WebRTC video works locally but not remotely

There's quite a bit of code involved, so I threw what I had into a temporary github repo:
https://github.com/stevendesu/webrtc-failure
I'm learning WebRTC and long-term want to do some fancy stuff, but for now I'm starting simple: send a video from one computer to another. Unfortunately this failed. Here's what I've set up so far...
On a development server I own I installed coturn to act as a STUN/TURN server
I created two pages: broadcast.html and watch.html. The former creates a media stream and (using Socket.IO) sends the connection details to a signaling server. The latter gets the connection details from the signaling server and attempts to watch the stream
After running npm install you can npm start to run the server and access it at localhost:2017.
So here's what works:
After opening broadcast.html you are prompted for a broadcast ID. You can type anything here, but I usually just do an incrementing number - so I start with "1"
After entering a broadcast ID, and a short delay, you see your webcam feed on the screen. Looking at the console you can see several messages have been exchanged with the Socket.IO server
If you open watch.html in a new tab, you are prompted for a broadcast ID. Enter the same ID as before
After entering the ID, and a short delay, you will see your webcam feed on the new tab. Looking at the console you can see that the earlier ICE candidates and offer details were sent by the Socket.IO server and the watcher responded with an answer
Returning to the broadcast tab, you can verify that the answer was received and processed. A connection has now been established
For bonus points, the pc variable is in the global scope (PeerConnection) so in the console you can establish an RTCDataChannel and send messages between the tabs directly (bypassing the Socket.IO server)
Here's what doesn't work:
For now (and I know why this is, so it's not a concern) only the FIRST person to enter an ID into the watch.html page can actually see the broadcast. It's not "broadcast", it's just peer-to-peer, and once one connection has been established then future connections fail
My issue: if I open watch.html from a different computer or device (either on the same network or a different network) then the video never plays
In the latter case if you look at the console you'll see the offer and ice candidates are delivered to the watcher, the watcher generates an answer, the answer is sent back to the broadcaster, and the watcher sees a media stream added to the PeerConnection. This media stream is converted to a blob URL and assigned as the source of the video element.
I'm at a point where I don't know how to progress. I don't know why the video isn't showing up.
your watch.js does not emit ice candidates. That is one possible cause. If that doesn't help you can use chrome://webrtc-internals to figure out what is going on -- see here for a description of how to interpret what is going on.
You might also want to look into modernizing your code. https://webrtc.github.io/samples/src/content/peerconnection/pc1/ is a fairly simple example of modern WebRTC code using promises and other things like using srcObject instead of the deprecated URL.createObjectURL.

Why LocalStorage Stays Undeleted?

I know this was asked before but this is what I'm experiencing -
I'm working on a Chrome extension that needs to persist some data and I'm using localStorage for that . When I go to Settings->Tools->Clear Browsing Data and check everything (including 'since the beginning of time') , I would expect the localStorage of my background page to clear .
However everything stays put. The localstorage wasn't deleted!
It's not that I don't like that behavior , it's actually pretty great for my app , but is this normal ? Shouldn't localStorage delete once the user tries to clear everything , just like cookies should delete?
P.S
I found this nice blog that asks and tries to answer the same question :
http://sharonminsuk.com/blog/2011/03/21/clearing-cache-has-no-effect-on-html5-localstorage-or-sessionstorage/
Seems like the behavior changes from browser to browser . The behavior I talked about happens on Chrome 28.0.1500.71 m
This bug is not normal behavior. ( to answer your question )
I'm calling this a bug because someone might be using a computer at a library with some type of locally hosted application. There is a clear expectation that data is not retained in any way under a purge called "beginning of time"
Firefox purges localStorage data when you clear all browser data. It does this if the file is stored locally or hosted on a web domain.
Chrome purges localStorage data only if you code is hosted on a domain.
I made a video of this bug..
https://youtu.be/CgojKg4v7X0
Save this URL with HTML/JS a local drive to reproduce the bug...
https://html5dataprivacy.github.io/
steps:
- load a local web page containing javascript HTML5 storage code
interact with the page that stores your data in a way that changes the data
clear everything in history until the beginning of time
give the keyboard and mouse to another user in the library or public cafe...
result: That javascript storage is retained , another person can see your data...
expected result: The data is purged for the new person at the keyboard
notes: This bug does not exist on Firefox current version as of April 19th, 2017. Does not fail if chrome is working off a hosted domain
Workaround: After you clear things to the beginning of time you must open up the console and type "localStorage.clear()"
ps: please be kind. This is my first attempt to answer on StackOverFlow :)

Trigger a web page refresh

I am working on an android application that will show an html page that contains only some text on a tablet device. The device will be on and showing this page for long periods of time(several hours). The text on this page will get changed from time to time.
To change the text on the page I've made a separate second page that contains a form to enter the new strings into and a submit button that uses ASP to generate a new version of the first page and save it over top of the original copy. This is set up and working great, but it means that I have to refresh the page very frequently in order to ensure I am always showing the latest message.
I am looking for a way that I could trigger a refresh only when a new message is saved. That way I will not have to refresh the page every minute but the new message will still get shown in a timely manner.
No dice, HTTP is built as a stateless, pull-only (ignoring file uploads) protocol. The server can't push data to the client, the client has to actually poll the server for new information.
However, you can minimize the overhead of this by using an AJAX call with JSON as the transport protocol instead of generating entire web pages and update your page on the client side. The overhead should be minimal for almost any application.
If you were just a web-app, I would suggest looking into the various Comet frameworks.
http://www.google.com/search?q=comet+framework
But, since you have an Android shell around it, you can make a Socket connection back to your server and have the server signal when it's time to refresh. It's essentially the same, but you don't need to code up the push in JavaScript if you're more comfortable in Java.