How do I get XHR/Ajax resource timing data from window.performance? - performance

When I open the Firefox "network" tab in the developer tools, I'm able to see the timing data from all the requests my page is making, including application/json (XHR) calls. I want to be able to get this timing information programmatically.
In Selenium, I let my page load fully and then ask the window.performance.getEntries() method for all of the resources. It gives me back a ton, including CSS, javascript, etc, but I don't see the calls to our RESTful services that show up in the Firefox window as "json" requests.
Since Firefox shows them in its Network tab in the developer tools, is a way for me to get them programatically? Our app is an angular app that is not using iframes.

I figured out my issue after a day of googling and trying different things. Thanks to this article I discovered that I needed to add Timing-Allow-Origin: * to the response header of all the services.
Once I did that, the timing information started to appear. It's apparently because the services are hosted at a different domain than my client. I don't understand the ramifications of leaving that header in there so I'll make sure it doesn't get deployed to production.

Related

Prevent Google Web Preview bot

I noticed today in the webserver logs that we sometimes get bursts (450 requests in 2 seconds) of requests from a useragent with Google Web Preview. Looking at other stackoverflow it seems this is probably related to the preview functionality on the search page or maybe to the saved/most used links at the bottom of a users chrome tabs.
I've already blocked these particular URLs in the robots.txt, so, it's obviously ignoring that. It seems from this 2010 instant previews page that you can add a nosnippet tag and Google will then not try to fetch the preview. However, it seems that adding nosnippet wouldn't actually stop the request (as they'd still have to fetch the page to parse out the tag).
Short of blocking Google's ip address which I don't want to do, is there a decent way to stop Google hammering the server periodically.
I think you probably did it, but when I get such issue I make a buffer page, and provide link on that page e.g link for admin panel that I don't want to be rendered and use NO Index on that page

Can I see the network calls from a Firefox add-on?

I'd like to see the calls made from a Firefox add-on.
I know it's calling its website's REST API, and I would like to see the requests to better understand the API.
However in the Web Developper Network tab, these calls do not appear. Is there an option to see them ? Whether in dev tools or in about:config ?
Edit: I tried the about:debugging too, but it doesn't seem to capture the requests either. There are some background requests yes, but not the ones I know should be there.
As I don't know if this is generic or specific to the extension I'm looking at I'll detail. I'm trying to look at the requests made by the raindrop.io extension (https://raindrop.io/) that offers an API (https://developer.raindrop.io).
When I click on the extension button, I can create a bookmark for the page. For instance: the one I'm editing right now
This goes through requests to the REST API (at least a POST to https://api.raindrop.io/rest/v1/raindrop). I know because:
I can see similar requests when doing an operation from the website itself
I can send this request via the JS console and make it work
However I do not see this request in the normal Network console, I see no requests from the extensions.
I do not see it either from the debugging one. I see some requests though, but only background GET requests to a /links API that returns the full list of bookmarks. A request is made after I've added my bookmark, but it is clearly not the one that makes the update.
Another way I know the request is being made is that if I try to bookmark something weird (like the debugging tab), the extension displays an error that is the same I get if I manually sent a malformed request to the API.
So these calls happen. But I can't see them anywhere.
Note that the illustration is on this add-on because this is what I'm looking at right now, but I had the issue with others in the past. No way to see the foreground requests of the add-on.

Is there any way we can modify Json data coming in the network tab of chrome and see the changes in the web page?

The webpage Template loads data via some json data we get from the endpoint.
I have a Rest Api and a Angular Front end . The Angular app populates the template from the data coming in from the rest api which we can see in the Network Tab of Chrome Developer Tools.
Is there any way we can modify the Rest data in Network tab and see the changes that occurs in the Webpage.
Is that even possible, It might sound a stupid question but i guess this might be a very special tool if there is not much interaction between the Back end and Front end teams.
I am not quite sure if i am able to explain it properly but this was the best i could edit please bear with me thanks
Just a Screen Shot of the type of data in Network tab.
Sample Data Network Tab
It is not possible from chrome's network tab. You have to use BurpSuite for example which is available in Kali linux as a default. With that you can intercept http requests and responses and modify it's payload.
You can get it from here: https://portswigger.net/burp/
No, you're not able to modify XHR data as you can other sources. What I do is just copy the file to my local drive and temporarily modify it's source. I test responses from API's using Postman and it's pretty awesome.
I have to say I'm a little bit afraid for you though. It's not a great idea to be consuming services from external api's from the client side. Are your API keys and passwords hanging out in that client side code somewhere?

Fast, non-ajax (I guess) updating information

I'm looking forward to know how they do this. They update their information on just a couple of ms and I see no AJAX requests on my firebug console.
Here is the page: Económico
As you can see on this two images below, this is the information they are updating.
Thanks for your help, looking forward to extend my knowledge!
They are making requests using websockets
e.g.
Request URL:ws://ortc-prd2-useast1-s0002.realtime.co/broadcast/444/m38tirp9/websocket
Request Method:GET
The responses are in Frames
So not your usual stuff, what firebug are you using? It is likely not reported in the console, but in the Network tab.
That's done using WebSocket.
Look at the network tab in chrome dev tools and you'll see it.
They are using Realtime.co, which I work for. It's a full-blown real-time communication platform that handle all the nasty stuff for you: scalability, security and automatic fallbacks when a browser does not support websocket.
You can get your own free account at Realtime.co and give it a go. You'll start doing your own cool real-time enabled applications in not time.

Does a website link (href) validation service exist?

I am looking for a web service kind of like Google Analytics.
Paste some javascript into your web page and if any of the links there become invalid, hey presto, an email is sent to someone telling them which link, which page etc etc has the incorrect link.
Anyone heard of such a service?
This would slow the page loading down a lot if it had to check for broken links every time someone visited it (basically a http request for every link). Not that it isn't possible, but the implementation would have to be very very good.
Javascript cannot send emails, you would have to use ajax to post the details to another page that would then email the admin. As this is all client side, it is very open to abuse.
I would suggest using a program to do it every now and again. There are even Firefox extensions to do it rather than a program. Google will also list a whole host of websites offering the service.

Resources