Chrome Network Dev tools not showing all requests - google-chrome

I am using this website in a presentation as an example of a single page application: https://www.ca.kayak.com/
(Here I am afraid my post will be flagged as spam or advertisement but it is a specific example for those that want to reproduce a possible issue)
Steps:
Open the website on both Edge and Chrome.
Search for hotels in Paris, France.
It will show you the first set of results.
Scroll down and click on "More results".
On Chrome network dev tools we will see this
On Microsoft Edge (this is the first time in my life that I am using Microsoft Edge as a good reference for something :D) we will see this:
Those requests named "More" and the number of the pagination "3" (for instance) are empty. The actual content returned is returned on the POST HotelSearchPoll?p=3 (where 3 is the number of the page).
My question is: is there a way to show these requests on Chrome? Is this a bug?

Related

Is it possible to modify the Chrome or Firefox developer tools network page?

Both Chrome and Firefox provide "Network" pages in their DevTools, which are very useful. I'm working with software which adds headers to HTTP responses to communicate performance information. I would like to be able to see this information at-a-glance in the Network panel, but looking at the relevant Chrome and MDN docs, I can't see any way to modify existing DevTools panels.
Is it possible to do this? If so, how?
Both Google Chrome and Firefox allow you to modify the shown columns and to show specific header values. It seems however that only in Chrome you can also add custom headers.
To do so, open the Network tab in the Dev Tools and make sure there is at least one entry in the list. Then right click on one of the table headers (like Name, Path, Method, etc.) to open the context menu that allows you to select which columns you want to show. From this context menu go to "Response Headers" -> "Manage Header Columns...". Then in the modal that pops up click "Add custom header..." and enter the name of the header you want to show. Click "Add" and it should now be part of the overview table.
In Firefox it works the same, but you can only select one of the predefined headers.

Google Chrome Extension Top Sites Images

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?
Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.
It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

How to block a URL in Chrome's developer tools network monitor

I am currently analysing my page connections and I want to block some tracking scripts and other external URL calls in my network monitor inside Chrome's developer tools.
I quickly want to check how the page behaves without some libraries.
Chrome itself does not provide any functions like this and the famous blocking extensions only block URLs which the user enters manually into the navigation bar.
As pointed out by #calavera.info, #iman.Bahrampour, and #Asim K T this feature is now available in Chrome 59. You can select a URL or domain to block in the Network panel. See this release note and these Screenshots where the StackOverflow logo has been blocked from this page. #iman.Bahrampour also shares two extensions below that will also do this ("HTTP Request Blocker" and "Request Blocker").
As abd3721 mentioned this is available directly within chrome DevTools (You don't need to be on canary anymore), however it is still behind a flag and in the hidden experimental features menu. As of the time of this comment, Chrome stable is on version 53.
To enable it, open this link and click the enable link under the appropriate flag:
chrome://flags/#enable-devtools-experiments
Then in DevTools open up the settings panel(F1) and click on the experiments tab.
This lists all currently available DevTools experiments but it is still in yet another hidden set of features.
Press Shift 6 times while in the experiments tab to show even more hidden features, one of them will be Request Blocking.
NOTE: These features are considered experimental and may be buggy or incomplete. Use with caution.
For blocking requests in google chrome you have 3 options:
1. Google Chrome with pattern matching:
In network tab, right click on request and then select block request URL
There is a plus sign that adds patterns for blocking requests
For example I have 7 request URLs:
http://www.test.com?userid=5
http://www.test.com?username=username
http://www.test.com?email=email
http://www.test.com?name=x
http://www.test.com?family=q
http://www.test.com?family=y
http://www.test.com?family=z
I can block requests that have a specific pattern by adding a pattern(for example the pattern *family* blocks 3 below requests):
http://www.test.com?family=q
http://www.test.com?family=y
http://www.test.com?family=z
Be careful! Because patterns are case sensitive
2. HTTP Request Blocker extension:
This extension has pattern matching for blocking requests:
Match patterns
3. Request blocker extension:
This is a useful extension that has pattern matching for blocking requests.
The most useful features of this request blocker are importing and exporting lists for using by other People.
For exporting a list and using in another computer(or future used): click on Direction down and select Export.
Open the exported list with import list button.
Good Luck
From Chrome 59 you can block specific requests from Network tab of developer tools itself.
https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests
Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.
This is now achievable in Chrome 59 developer tools by blocking respective requests: https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests. With this approach it is somehow difficult to turn off all the stylesheets, but it's easier to turn off just the most annoying ones.
As for Google Chrome 94, it's possible to exclude network activity for entire domain:
1. Go to "Network" panel of DevTools:
2. Rigth click on item of domain you want to block, click on "Block request domain" in the context menu:
3. Type "status-code:0" into "Filter" and click on "Invert" checkbox:
To manage blocked domains, press ESC button when in DevTools, and click on "Network request blocking" tab in the bottom panel:
Will changing host file help.
Your system (windows, linux, mac) all check host before requesting DNS lookup. I use it when I wan tot block some slow advertisers.
windows:
c:\Windows\system32\drivers\etc\hosts
linux & mac
/etc/hosts
* BE VERY CAREFUL TO MAKE BACK UPS *
An existing bug report is requesting this feature. You can star that issue to show support for it being added.
Well, i have been looking for an answer for this too, as I had this issue of choices by counterfeit, and nothing seemed to work for me.
But then I tried to analyze the requests and other things until I figured out, that there was this site which was loading ads onto my pages and redirecting me to advertisements. And also changing the google search bar on new tabs to some unknown search engine. I was able to temporarily block the request on one page. but after opening a new tab, the ads would appear again.
So googling for request blocker, I came up with a chrome extension "HTTP Request Blocker" and added the address which was causing all the crazy ads, has now solved the problem fully.
I hope it will be of help to you too or anyone else.
In the original question, the author states:
the famous blocking extensions only block URLs which the user enters manually into the navigation bar.
This is no longer the case. I have really enjoyed using mokku, which can intercept and mock all types of requests. You can specify what the status code should be, so it will definitely solve this problem as well as adding other functionality that is helpful. It works by another tab in the chrome dev tools. Here is a link to the extension: https://chrome.google.com/webstore/detail/mokku-mock-api-calls-seam/llflfcikklhgamfmnjkgpdadpmdplmji?hl=en

Does the latest Instagram iOS app support caption in URL scheme?

Formerly it was possible in iOS to use the hook instagram://camera?caption=YourCaptionHere (from Mobile Safari, or elsewhere) to have the Instagram app open in camera mode with a pre-filled caption. However, that no longer seems to be the case as my previously working URL (hook) no longer populates a caption (though it does still open Instagram in camera mode).
I'm having trouble finding any current information on this, though the caption query string variable seems to have never been documented in the first place.
Does anyone know if this feature is still available under a different query string variable?
To be more clear, I have a link on a web page that attempts to open Instagram in camera mode with a caption. I have a JavaScript click event that checks after 500ms to see if the page is still open, then alerts the user to download the app if the link didn't work:
Open Instagram
Instagram provides documentation on iOS hooks. That documentation does not make any mention of a caption parameter, except sharing a photo via Obj-C (in which they call it annotation). Given the different naming, you could try instagram://camera?annotation=YourCaptionHere and it might even work, but this doesn't seem to be an officially-supported use case.
Further, to support your second paragraph, searching through the history of the docs on the wayback machine doesn't turn up any mention that caption was ever a supported argument... like you said. Interestingly, one of their co-founders claimed this was available 2 years ago... I guess they never made it official, then removed it?

'Back' button and 'history.go(-1)' not working with Chrome

Got an odd problem, only persistent in Chrome browser. Can't imagine what would be the problem. Chrome's "Back" button doesn't work, nor does history.go(-1), but works fine on all other browsers. To see the problem simply click this link, which will asynchronously initiate searches on two separate services, or sites if you will. Upon click on any search result list item, we traverse to another page, but "Back" doesn't work for Chrome.
http://vps-net.com/MSSMine/?search=some
Any suggestions or ideas are welcome.
I found the problem with the page you have linked, I don't believe it to be an issue with Chrome.
When you load the page, it also loads two iFrames as the request to the site finishes. Chrome takes a somewhat different approach to history, allowing you to navigate not simply from changes in the URL displayed, but through every new individual browser-initiated request. When the iFrames load, Chrome adds history for each step of the page loading process, creating 4 separate history items. When you go back 1 "page load", it takes you back to the site you linked to, at a different step in the process. You aren't seeing anything change because as soon as that page loads, any unloaded iFrame now loads again.
If you do history.go(-8) or some other large number, you should see the page at that many pageloads ago. However, if the link is opened "in a new tab" then the history begins for that tab at the URL you told it to open, effectively limiting the history to the pages that occurred during that tab's lifespan.
This was tested on Chrome 34.0.1847.116 running under Ubuntu 13.10.
My back button was not working as well, but it would not work with any browser. I went into my add/delete software and deleted what software was added the night before - BOOM! All is fine now.