I am using Chrome devtools to check what files are checked out from www.google.com. Then I found it had mutliple origins shown there:
Usually you can only set a single origin for a website. Why does google have 5 origins set here? What is the significance here?
Thanks
Related
A few weeks ago I remember visited this website https://stitches.dev/ and I be watch in the network tab in dev tools specifically the document and I was able to see all the colors and styles applied correctly to the website but now I'm not able to see this same experience again now i just see like this, also know this website uses SSR so that's the question about why happen this, maybe is a misconfiguration on my browser or what's the reasson, I be tried hard reset in devtools but nothings seems to help me?
I be visited in another computer and the page looks like this
Img that i want to be able to see in my computer |
Link of how the documents looks when i visited the network tab in devtools
Is it possible to get a larger version of the favicon from the Google's api or from somewhere else?
This is the url.
http://www.google.com/s2/favicons?domain=google.com
I searched for an alternative api on ProgrammableWeb and Google but many of them don't exist anymore and the one I found that actually seems to work isn't free. (http://grabicon.com/)
I need the icon for a VB.NET project that has a list of websites with icons. But 16x16 icons are too small for that.
looks like there is size parameter in google now.
https://www.google.com/s2/favicons?sz=64&domain_url=yahoo.com
Editted:
The below answer is no longer valid, but the code is freely available on github:
Github -> Favicons for all!
Original answer
You can also try Statvoo's Favicon API, e.g.
https://api.statvoo.com/favicon/?url=google.com
https://api.statvoo.com/favicon/?url=stackoverflow.com
etc..
They also have quite a few other API's you can use if you look around. Most of which are free and have been around for years.
Looks like Google has an size attribute too.
https://www.google.com/s2/favicons?sz=64&domain_url=https://stackoverflow.com/
Here's some Favicon Fetchers I have found
Free Favicon-Service by AllesEDV.at - https://f1.allesedv.com/stackoverflow.com
Google Favicon Snatcher - https://www.google.com/s2/favicons?domain=stackoverflow.com
Favicon Grabber - http://favicongrabber.com/api/grab/stackoverflow.com
For Favicon Grabber it will return as JSON list of icon URLs.
Alternatively you can load the main page of the site and figure it out from there: https://stackoverflow.com/a/1990487/
According to https://news.ycombinator.com/item?id=17190599:
Unless that endpoint can also return other resolutions, Favicon Kit
offers more: https://api.faviconkit.com/twitter.com/144
https://api.faviconkit.com/twitter.com/16
(Though, I will say, the URIs returned for Twitter and the image sizes
don't actually align in those cases. The first is actually 192ˣ192
pixels, and the second is 32ˣ32 pixels. That seems odd. Maybe they
should have endpoints like domain/large, domain/medium, domain/small?)
Favicons are specified either as part of the HTML page, the HTTP response to a request for a page, or simply by being hosted at a default location.
That's true for all sites. There's plenty of browser extensions that can help you figure out the favicons a page send, if you don't manage by hand. For example, right clicking in firefox, "Page Info", "Media", "sort by type"->"Icon" should show all icons that a browser can find. It's not usual to have Icons larger than 32x32, and google might not be an exception.
Also be aware that the .ico format can contain multiple Icon sizes that not all tools show. So saving that .ico on your computer and inspecting it with a tool known to deal with all sizes contained in a single file might help.
Last word of advice: You're dealing with the logo, the very core of their brand, of a multi-billion dollar company. You might want to check with their policy of using that logo in your project. Probably it's OK (for example, browser don't seem to get in trouble for having a google logo for their google search box), but I'd still take care not to raise the impression that you're association a product of your own making with their logo.
How to search through all the ajax responses in network tab in Chrome?
I want to do this is because it is difficult for a JavaScript developer to get to know which information is coming from which service call, especially if you are new to the project and business logic is not clear. Also, opening each service in a network tab and searching in responses of so many service calls is difficult and time consuming.
This has now been implemented on the Network tab. Whenever a search criteria is added, Chrome will offer searching through all headers and bodies.
More from offical doc,
Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.
This is similar to another question this morning to search json responses. The solution is the same, star this issue this issue. Starring is triggered via the star icon in the far left area of the blue title are just under search.
Starring issues let's the developers know what people need. The more stars something has, the more likely it is to get worked on sooner.
Currently this functionality is not provided and extensions are unable to add this type of functionality since the network panel isn't extensible in this way.
In Firefox you can save all the responses as a HAR file and then search through the file in a text editor (Chrome truncates the responses).
Inspector of Microsoft Edge browser offer such feature. Useful when you need to search through traffic made by an HTTPS web site that Fiddler cannot inspect (like Facebook web site).
There doesn't seem to be a way to do this in Chrome or Firefox. My solution has been to use Fiddler, which does support it.
Edit: I believe this was working for all resources at the time of writing, but please see comments because people say it is not/no-longer working as expected.
As of Chrome version 91, if you want to search through all resources (not just AJAX/fetched resources), then you need to open DevTools and then press Ctrl+Shift+F to open a search box. If you just type into the "filter" text input then it only searches through the URLs, rather than also searching the contents.
I know that I am supposed to be able to see this in the "resources" tab -section of Chrome developer tools. Maybe I am not getting something, but I don't see any images listed in this section.
Does anyone know if / how this can be accomplished?
Open Google Chrome Console (F12)
Go to Network tab
Enable Filter, if it’s not enabled
Select the "Img" tag to filter for image requests
Refresh the page to see a list of all images as they are requested
DevTools -> Application tab -> Frames in the sidebar -> Images
Contains all the images.
Images are listed specific to each frame. Normally there is only 1 frame on the page. If the page uses the tag there will be others.
Expand "Frames" and then the first item listed (which is the page), below this is the category of images, as well as scripts and stylesheets. Note that the final item is the html of the page itself.
Another way is to use new resource-type filter is available in the Network panel (Chrome 87).
For images just type resource-type:image to focus on the network requests that are images.
Chrome Docs: https://developers.google.com/web/updates/2020/10/devtools#network-filters
If you want to download images :
https://chrome.google.com/webstore/detail/download-all-images/ifipmflagepipjokmbdecpmjbibjnakm
use site sucker app for mac or httrack website copier windows to get all contetn from page you want then select or sort data how you need ))
Hope i helped you ;)
Are there any extensions that offer the ability to have a new column, is XHR, in the Network section of the chrome dev tools? If not, are there any examples of extending chrome to show a new column with it's value deduced to display whether a request is initiated through XHR or not?
I know Chrome offers the ability to "log XMLHttpRequests" and to filter by "XHR." I'm looking for a column that displays whether the request is XHR; should be very simple, but haven't found a solution ...
note - this is a concern because I've enabled the "preserve log" option on the network tab in the chrome dev tools.
There is a type column now that has the response type so document for the initial html request and also things like script, stylesheet, png jpeg... and it also has xhr for xhr requests.
You now can also add Response Headers and even create custom ones if the defaults are not sufficient (right-click somewhere on the column headings to reveal options).