I'm trying to debug a web app using websockets to pass binary data. Chrome DevTools has this handy network tab that can display websocket frames... except for binary frames it just says Binary Frame (Opcode 2), and that's it. I have no idea why they stopped at this, when it is so easy to provide more information. I even found a pull request for this feature from 2 years ago.
Anyhow, I'm looking for alternatives. I'd also like to add some custom parsing logic for the binary data.
So far the best solution I've found - undock devtools window, open another devtools for the devtools (press Ctrl+Shift+I in Elements tab), navigate to source file for network tab, place a breakpoint on the line that sets frame's text content, and add JS code to modify local variables in edit breakpoint menu. I get something like this, which is pretty much perfect, but it is quite a hassle to set up, and difficult to use with more complex parsing code.
Ideally something like this would be done by a chrome extension, but it seems that devtools extensions can only go as far as catch regular network requests.
Another alternative is to use Wireshark, but this requires SSL key log, and then there's no clear documentation on how to make a custom dissector parse the output of SSL decoder instead of raw TCP data (there's a question about it here with no answer). Besides, I have a large amount of JS code for parsing the binary data, and translating everything into LUA would be quite a pain.
Update: I managed to make an extension for this using debugger API. This requires making your own UI that lists frames, but in the end it's working just as I wanted it.
DevTools in Chrome 74 support binary view out of the box
updates/2019/03/devtools
Related
My idea is to have an arduino board that will communicate with the browser.
I want the arduino board to react (eg. blink led) when user is connected to a certain website.
User inputs on the board ( eg. press button) will affect the browser (eg. close tab, switch tab).
I started learning and creating simple examples using chrome extensions tutorial.
However, since I am not myself a skilled programmer, I'd like to know if it is possible to achieve those things aforementioned.
How I imagine it right now it will be:
Chrome extension writes into a json. Arduino reads data from json -> blink led.
Arduino writes values in json. Chrome extension can automatically see changes in the file and react accordingly -> close tab( so, without having a user re-installing each time the extension).
Are this scenarios possible? Which would be the easiest way to achieve this?
I would recommend to take a look at firebase. That's a really easy real-time database with a lot of good tutorials (even some by Google).
Then you should use a library like this one on your Arduino.
(there are some examples to look at)
And in your chrome extension you can fetch the values from the database really easy again.
When deploying a Polymer app to production, what's the recommended way to avoid requests for Polymer's source map files? The files platform.js.map and polymer.js.map weigh in at ~800K. Even if those downloads are deferred, surely there is some user impact (e.g., on mobile devices) simply spending bandwidth getting those files, isn't there?
Currently, my deployment process simply skips over the .map files, but when looking at the production site, I still see the browser trying to find them. Those requests fail with a 404, since the files aren't deployed. In theory the 404s shouldn't slow anything down, but it's still distracting to see 404s show up. It makes it look like there's a problem when in fact there isn't.
I could write a Grunt task to strip off the //# sourceMappingURL line from the associated .js files, but I was wondering if anyone has experimented with other means by which to drop the source maps. Or have people found that there is literally no impact on user experience when including those files?
I would consider it a browser bug if any browser loaded source maps when the user isn't using debug tools on the site in question. Are you noticing a significant number of requests to your source maps in your logs?
If you're using Google Chrome Devtools and want the source maps to be ignored, you can go to settings and uncheck the corresponding "Enable Javascript source maps" check box.
I appreciate this question may appear broad. But it is because I am looking anywhere and everywhere for a possible solution to do something very simple.
The goal is from a web page opened in Chrome, to scan the DOM, extract specific elements and save them silently in some way that I can then access.
There is no intention for any of this to be published as an app or extension, it is simply me wanting to access my own rendered browser data and extract and store this data on my own computer. For this reason, I am currently finding Chrome's exhaustive sandboxing security frustrating and irrelevant to say the least.
I have a working Chrome Extension which extracts all of the data I want, has a list of 5 strings that I want to save and that's as far as I have gotten.
I have looked into these areas:
Existing NPAPI Plugins (could not get npapi file io to work).
Creating my own NPAPI Plugin - seems like a huge overhead and learning exercise simply to get external access to 5 strings
Every aspect of Chrome extension (and even App) apis (particularly their localstorage which is not accessible from outside the extension)
Any other thoughts?
I realise there is a solution through creating my own NPAPI plugin but I would like to believe that there is another approach that allows me to link a constructed DOM with my local system. I am open to any other option? (I have considered a Linux purely bash approach but I need to generate the DOM as though it was in my browser).
I just want to be able to access specifically extracted parts of a DOM on my local system, not write an entirely new C++ plugin to facilitate this very basic feature.
I have an HTML5/jquery mobile web app at http://app.bluedot.mobi. It is used for long distance races to track competitors via SPOT satellite tracking. The issue I have not yet resolved is that when loading the app when no data connection exists, the browser throws a "no data connection" alert popup as it is attempting to fetch the manifest during the checking event. Even when a data connection is present, loading the app can take a very long time. There are ~ 500 files to check. The fastest way to load the app (from a phone) is to be in airplane mode and dismiss the browser's alert - not so elegant.
Rather than force an update on users who tend to be in the backcountry with a spotty connection, I want to use applicationCache.update() programmatically, giving the user control over the process and speeding up app load whether on or offline.
Is this currently possible with the HTML5 spec and respective browser implementations?
Sounds like you need the abort() method. Unfortunately it is very new, and it will probably be a while before it is implemented by the majority of mobile browsers.
There are ~ 500 files to check.
It sounds like you're implying that the browser checks each file to see if there's any of them which has changed. This is not correct. The browser only checks the manifest file if that has changed, and that is a simple byte check. If the manifest file has not changed, the browser believes nothing has changed.
So if your application is slow to start, it might be your because your application is complex and there's alot of HTML and Javascript to parse. I would advise you to take a look at the application and see if there's anything you can optimize. In that case, you might want to take a look at Yahoo's Best Practices for Speeding Up Your Web Site page.
For example, I noticed you have a lot of Javascript code in the HEAD section. The beforementioned article advices us to move all Javascript (To the extent of what's possible) to the bottom of the page, so that the browser can start rendering the page as soon as possible. And there's a lot of other sound advice in the article. So take a look, I'm sure you'll find it useful. :-)
For debugging purposes it'd be nice if I could make my error page display clickable file names in exception stack traces that would open them up in my favorite editor. However this would require me to execute a full command line - a simple link to a file will not do. Can this be done?
The solution can be IE-only and it can use techniques that require full trust (I don't expect it to be otherwise anyway). People are only going to use this on localhost, I will in fact disable this functionality when viewing the page remotely.
You can add a new protocol to Windows as outlined here .
This is especially nice because it works across browsers, and doesn't require any browser specific settings.
Just be careful with it - adding a new protocol handler opens potential, although very remote, vulnerabilities. When setting this up, never let the incoming URL be somehow a parameter to a generic command interpreter (like cmd). Always link it to an existing application that is not able to do anything destructive, not even through command line switches.