How to inspect WebSocket frames in Chrome properly? - websocket

I've entered echo.websocket.org as it was suggested, opened Network tab and WS filter in Chrome Developer Tools, but I do not see any frames. I see connection entries, but Frames tab always stays empty. Is there anything special I should do to see the frames?
Screenshot:

Click Network, WS, select the original HTTP connection and then click the Frames tab. Be aware that the content of this tab may be hidden by another pane, so you need to drag the bar down to see the WebSocket frames.

As of December 10, 2019, the process is slightly different to debug WebSockets with Chrome.
Open Chrome Developer Tools.
Click on the Network tab.
Click on the filter WS (for WebSockets).
Reload the page to make sure you see your connection in the Name column.
Click on Messages.
Now you should see all your communications with your WebSockets, with 3 columns: Data, Length and Time.

Did you send any data on the page? You need to try sending a message after clicking Connect:
There is also a useful area in Chrome where you can view all your active sockets:
You can access it at here: chrome://net-internals/#events&q=type:SOCKET%20is:active
Update:
After seeing your newly added screenshot, it looks like your Data table is squashed up and you need to drag it down to see the entries.

Another gotcha is that in the new Edge the Developer Tools menu option and the Network/WS display looks very similar to Chrome. I forgot I was using Edge and spent 20 minutes trying to find the JSON messages, which I don't think are available in Edge.

There's another way you can have a problem here - if you are using livereload in your development flow.
This (apparently, for me at least) causes multiple instances of the socked to appear, all with empty messages.
It turns out that only the first one is the "real" one, and has messages:

Related

Chrome policy "ExternalProtocolDialogShowAlwaysOpenCheckbox" not working

I am using the library https://github.com/aik099/PhpStormProtocol/ to get links to my IDE (PHPStorm) from the browser (Chrome). Everytime xdebug prints a warning, it attaches a link with an href like this:
phpstorm://open?file={filepath}&line={line}
That works perfect. The problem is that every time I click in the link I get a pop-up like this:
I have tried following the steps I found here:
https://superuser.com/questions/1481851/disable-chrome-to-ask-for-confirmation-to-open-external-application-everytime
After enabling that policy in the register of windows, and validating it also in my browser I still have the same pop-up without the checkbox to allow this protocol forever.
The problem is, that you want to open your url handler over a "http" connection.
But you get only the square if you have a "https" connection.
You can solve your problem if you set a rule, that your "http" connection is trusted.
For chrome write "chrome://flags/" in your address bar and write your url into the option "Insecure origins treated as secure" and set this to enable.
enter image description here
The External​Protocol​Dialog​Show​Always​Open​Checkbox does work on https websites only.
You can instead add you protocol phpstorm://* to Chrome's URLAllowlist, for example via the Windows registry :
The user will not see the popup at all and the software will open automatically.

Extend time duration for displaying "PR_CONNECT_RESET_ERROR" error in Mozilla Firefox?

When a site receives high traffic, the tab in Mozilla Firefox stops loading and displays this error message "PR_CONNECT_RESET_ERROR" as shown in screen shot.
What I want is, the tab should continuously keep loading until it receives the response from the site's server without displaying this error or I want to increase the duration(time or number) for which it keeps trying to connect to that site's server by default.
I don't know whether it is possible or not but what I tried is, I changed some of the configurations from about:config. I increased network.http.keep-alive.timeout from 120 to 215 and network.http.max-persistent-connections-per-server from 6 to 20. But I don't find any noticeable change.
Are there better possibilities for achieving my expectations ?
Note: I approximately make 30-40 requests to same url(www.example.com) from different tabs with different sessions.

Prevent browser-sync log data in firebug console

I often use gulp and its plugin browser-sync.
Every time i open firebug console tab, i see its full of logs like :
GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=1457523519574-0 200 OK ۳ms browser...11.1.js (line 2)
I can use clear button but logs are interminable! they will appear twice.is there any persistent way to ride of these(browser-sync) logs?
Yes, there is. Just uncheck the option Show XMLHttpRequests within the Console panel's options menu.
Though note that this will disable the logging for all XMLHttpRequests, (aka AJAX requests).
There is currently no way to filter out specific logs. There are already two enhancements requests for that: issue 4507 and issue 6835 targetting Firebug 2, but as Firebug 3 will be built upon the DevTools, it is probably wiser to follow the DevTools related requests. The closest one to your issue is bug 905978 to filter out messages for blackboxed sources, but I've also filed bug 1102797 some time ago for allowing to blackbox sources from within the Console panel and bug 1255311 right now for ignoring specific log messages.

Chrome Cast Sender "session_error" NOT_FOUND

I can't get a basic sender app set up. I've tried the CastHelloText sender example, put in my own AppId and get an error immediately after chrome.cast.requestSession() is called when I select my device from the top-right Google Cast extension button. My receiver is based off of Cast-Simple-Receiver. I've done the whole unplugging power/plugging back in thing to restart ChromeCast, but that doesn't resolve my issue.
Resources out there seem kind of slim at the moment, but is there a place that explains everything in-depth without having to jump from site to site? Also, take a look at the image I've attached. I can't figure out what that other URL is supposed to be.
My specific error from the requestSession() looks like this:
{code: "session_error", description: "NOT_FOUND", details: null}
EDIT: I've verified that I can connect to the default chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID but my receiver app can't be connected to. I've registered my device and restarted it multiple times. I've now removed it and am trying to re-register it to see if that helps (even though it said it was ready for dev).
Check these; hopefully they get things sorted out:
Make sure you have registered your chromecast device on the developer console. Double check the serial number since sometimes it is hard to read it.
During the chromecast setup, there was a box stating something like "Send the serial number ..", make sure that is checked
Wait 1/2 hour or so and reboot your chromecast
Check whether you can access http://<chromecast-ip>:9222 from a chrome browser on the same wifi network; if you can, then your device is ready for development
As for the area on the image that you have pointed to, that is more for informational purposes at this point

NS_BINDING_ABORTED Shown in Firefox with HttpFox

I am seeing some of the server calls (Used for tracking purpose) in my site getting aborted in Firefox while seeing through HttpFox. This is happening while clicking some link that loads another page in the same window. It works fine with popup. The error type shown is NS_BINDING_ABORTED. I need to know is the tracking call is hitting the server or not.
It works perfectly with Internet Explorer. Is it any problem with the tool? In that case can you suggest any that can be used in Firefox too.
Because your server is not sending HTTP Expires headers, the browser is checking to see if what is in its cache is current.
The way it does this is to send the server a request saying what the date of what it has in the cache is, and the server is sending 304 status telling the client that what it has is current. In other words, the server is not sending the entire content again but instead sending just a short header to say the existing cache content is current.
What you probably need to fix, is to add Expires headers to what you are serving. Then you will see the NS_BINDING_ABORTED message change to (cache), meaning the browser is simply getting content out of its cache, knowing it has not yet expired.
I should add that, when you do a FireFox forced refresh, it assumes that you want to double-check what is in the cache, so it temporarily ignores Expires.
You shouldn't be worried just because you see something that looks like a failure code (NS_BINDING_ABORTED).
In one post a Firefox developer confirms that NS_BINDING_ABORTED is simply an indication that a page load has been stopped.
It seems perfectly normal that opening a page while another page is being loaded cancels the loads on the first page. It doesn't necessarily mean the loads were aborted before the request got sent to the server, which seems to be what you care about.
[edit: reworded & removed the bit about me not being familiar with HttpFox, as people who see this in 2022 are probably not using it anyway.]
What other javascript do you have on the page? Some javascript might be firing causing the request to be aborted.
I noticed the same thing in my application. I was redirecting the page in javascript (window.location = '/some/page.html') but then further down the block of code, I was calling 'window.reload()'. The previous redirection was aborted because window.reload was called.
I don't know what tracking you are using but it's possible that the request is being sent to your server but the request is aborted because another request was issued afterwards.
I have experienced a similar problem, but have identified the cause.
I have a link in the first cell of a table row, and some Javascript that replicates that link across the other TD's of the row. When I click on the 'real' link (in the first cell) I get this unwanted side-effect; when I click on other cells in the row, all is fine. I feel it's because the script is adding a second link to that first cell, when it already has one.
Hence, two instantaneous requests for the same page, with the first being aborted by the second.
This technique is fairly common, so something to look out for.
NS_BINDING_ABORTED error - Best Approach -Using a JavaScript “setInterval” method with the time delay of Min ‘0’ to max ‘100’ milliseconds based on the page load, we can execute our track link request after the default page submit request is processed.
World best solution:
var el = document.getElementById("t");
el.addEventListener("click", avoidNSError, false); //Firefox
function avoidNSError(){
ElementInterval = setInterval(function () {
/* Tracking or other request code goes here */
clearInterval(ElementInterval);
},0);
};
In my case, same NS_BINDING_ABORTED error, but it was because a "button" element, which I clicked to trigger an event, was missing the attribute "type" value "submit" = How to prevent buttons from submitting forms
The error NS_BINDING_ABORTED can have a variety of reasons.
In my case it was garbage in the response headers received from the server, basically a HTTP protocol violation.
Using a web debugging proxy such as Fiddler may sometimes reveal such issues better than the browser's own debugging console (which today does what, I assume, HttpFox did, just better), or at least show more detailed information or clearer error messages.
I know this is a very old question but this happened to me recently with Firefox 95. The images of an ancient application made by a collegue of mine were not loaded (or loaded randomly) because of this code:
window.addEventListener('focus', function() {
// omit other code...
location.reload();
}
Once nested this code into a 'load' listener, the issue completely disappeared.
in my case experience, NS_BINDING_ABORTED occurred because missing closed tag between <form>...</form>
example:
<form name="myform" action="submit.php" method="post">
<div class="myclassinput">
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="submit" value="Submit">
</form>
there is I am forget to write closing </div> tag before </form>.
I note my experience here, just in case... For me it was a website on a local dev server (adress 192.... etc) which was put online on an already used URL like www.something.com
The consequence was that an MP4 video (through the H5P library) didn't play, but allowed to be scrolled through the progress bar. And when I copy/paste the URL to this video, this NS_BINDING_ABORTED error appeared on my laptop, while my colleague on the same internet connection had no problem to view it.
I made an ipconfig /release and /renew, then restarted my computer, and it was fixed... maybe it was some old data conflict with the previous content on this already used URL domain? I don't know.
For me reason was in Firefox browser preventDefault function not worked in form submit event. This answer helped to solve: https://stackoverflow.com/a/56695472/2097494

Resources