I am doing some debugging and would like to see the full URLs in developer tools, but I could not find a way for that.
Therefore I would like to know:
Is there a way to achieve it? If not, then how do I deal with it?
Why Chrome by default is not showing this info? I don't think it could be a security issue, as Chrome is displaying all other sensitive info.
Example:
When I go to https://stackoverflow.com/abc#qwerty:
This is what I see in the network tab:
What you see in the dev tools are the request that are sent to the server. What’s behind the # is actually not sent to the server, it’s used by SPA (single page application) to keep track of the state between pages
You can use Firefox for this case, their Dev Tools show the full URI including the fragment identifier after the hash sign.
Alternatively, you can view it in JS console using location.hash property:
screenshot
Related
I would like to be able to open a tab in Chrome and enter something like gs://bucket-name/path/to/file and have it open the corresponding page in the GCP Web Console https://console.cloud.google.com/storage/browser/bucket-name/path/to/file. I saw there are external protocol handlers in Chrome, but I don't want to open an external application. I just want it to open another page based on the URI. I also don't want to put up any of my own servers for this simple purpose. Perhaps a Chrome Extension that can do some simple JS on the URI after I enter it into the address bar?
I think it is possible now with link you gave (works for me).
#shiv turned my attention on fact that this is question about automated link replacement under the hood in address bar when you write "gs://bucket-...". So such handler just collects address and modifies it and uses modified version to go further.
Well then looks like you need something like this Set custom protocol handler in Firefox? (in case of Firefox) but unfortunately I cannot help more.
I want to use the resource hint "prerender" (W3C) to speed up a website, but prerender is depricated in Chrome since v58. I read that NoState-Prefetch should be used instead (Google Dev), but I don't find anything on how to use it.
Does anybody know how I can prerender a site with the current version of Chrome or how to use "NoState-Prefetch"?
I'm grateful for every suggestion. Many thanks in advance.
Prerender is not deprecated, in fact it's part of the w3 standards. Though the standards are clear in that the user agent SHOULD fetch, however later it describes that it May preprocess, and adds a point later that the user agent might decide not to do anything.
Chrome initiated the prerender resource hint, previously it meant that the whole page should be pre-rendered in a hidden renderer process, but currently chrome does NoState-Prefetch which is less powerful than a full render but should still save time - in case the browser actually do it.
You can take a look at the following document to dig deeper, into why chrome changed the implementation of prerender, and when/what does No-State Prefetch do exactly.
To check that the browser did prerender locally:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
I'm using a class to register my protocol, lets say lorem: to operating system. Its working perfect but I would like to do couple of things.
I want to create something like Skype Click to Call. People will share uri's like lorem://12345678 and when others click this the event handler will redirect that request to my windows application. I want to make this uri clickable. How can identify this new scheme to browsers so when a page contains lorem://12345678, browser will transform it something like
lorem://12345678 and users be able to click it.
Can I do it with browser configuration or should I write some kind of extension to implement this rule. It must support all browsers so is that means I need to write same extension for Chrome, Firefox and IE? And how can I install all extensions with my software setup?
Straight to point question: I want to transform lorem://ipsum text to My URL! on most popular browsers
as i understood -- you need to write extensions for each browser, check out this question:
how do I create my own URL protocol? (e.g. so://...)
and this is an example of browser approach:
Custom protocol handler in chrome
When I'm viewing the downloaded resources for a page in the Chrome web inspector, I also see the HTML/JS/CSS requested by certain extensions.
In the example above, indicator.html, indicator.js and indicator.css are actually part of the Readability Chrome extension, not part of my app.
This isn't too big a deal in this particular situation, but on a more complex page and with several extensions installed, it can get quite crowded in there!
I was wondering if there was a way to filter out any extension-related resources from this list (i.e. any requests using the chrome-extension:// protocol).
Does anyone know how I could achieve this?
Not quite the solution I was after (I'd have preferred a global setting), but there is now a way to filter out requests from extensions, as mentioned by a commenter on the issue I originally opened.
In the network tab filter box, enter the string -scheme:chrome-extension (as shown below):
This is case-sensitive, so make sure it's lowercase. Doing this will hide all resources which were requested by extensions.
Just enter "-f" in Network field
Was having the same question when my extension adds a lot of noise in the network tab.
Some extensions also fire a lot of data like data:text/image etc, you can append more filter with - like:
-scheme:chrome-extension -scheme:data
Another way to get the http/https requests is to just use scheme:https without - because the resources that extensions request are usually from their local bundle:
scheme:https
An Incognito Window, can be configured to include or exclude extensions from the extensions page of Chrome settings.
One alternative is to go to "Network Request blocking" tab and add "chrome-extension:" to the list, thus extension requests will be blocked and coloured red so it's easy to visually filter them out.
you can simply enable this option and requests from extension will be group.
Update: It can only group requests that create by the extension that draw iframe, such as cVim
How can I intercept the post data a page is sending in FF or Chrome via configuration, extension or code? (Code part makes this programming related. ;)
I currently use Wireshark/Ethereal for this, but it's a bit difficult to use.
You could just use the Chrome Developer Tools, if you only need to track requests.
Activate them with Ctrl+Shift+I and select the Network tab.
This works also when Chrome talks HTTPS with another server (and unless you have the HTTPS private key you cannot use Wireshark to sniff that traffic).
(I copied this answer from this related query.)
With Firefox you can use the Network tab (Ctrl+Shift+E or Command+Option+E). The sub-tab "Params" shows the submitted form data.
Reference: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_details#Params
Alternatively, in the console (Ctrl+Shift+K or Command+Option+K) right click on the big pane and check "Log Request and Response Bodies". Then when the form is submitted, a line with POST <url> will appear. Click on it; it will open a new window with the form data.
As of the time of originally writing this reply, both methods messed up newlines in textarea fields. The former deleted them, the latter converted them to blanks. I haven't checked with a newer version.
Do you have control of the browser POSTing the data?
If you do, then just use Firebug. It's got a lot of usefull features, including this
For Firefox there is also TamperData, and even more powerful and cross-browser is Fiddler.
Programatically, you can do this with dBug - it's a small code module you can integrate into any website.
I use it with CodeIgniter and it works perfectly.
In network tab of Web Developer tools in firefox right click on the PUT, POST or any type of request, you will find "Use as Fetch in Console" option. Here we can seed the data we are passing.
Do the respective steps sequentially.