Javascript Bug Report - javascript

Is there any javascript framework for reporting bugs?
I'd like to be able to get a copy of the web page the user is currently looking at plus maybe a stack trace on the JS, their current browser etc. and post it to my web application so that when I try to debug the application I spend less time trying to recreate the issue.

ExceptionHub is a service that might be what you're looking for. There is some overhead as it wraps the calls to addEventListener, setInterval, setTimeout, etc. with try catch blocks to get stacktraces.
There isn't a way to get a screenshot of the page without using escalated privileges or a browser extension. The canvas element in Mozilla's implementation has a drawWindow function that can render the current window to a canvas element, with that you could post the pixel data.

Related

Can a browser's dev console continue executing JavaSript after a new page loads?

I'm trying to automate some online work through JavaScript and the Firefox (or Chrome) dev console. The work is mostly inputting the same (or similar) data on the same exact pages for many many people.
Example:
unique id
date 1 and 2
some more numbers
I wrote a very simple script that runs in the console and enters the data just fine.
The Problem
My script stops execution whenever it requires the page to reload or it loads another page. I cannot find any information on how to continue executing a script after a page has loaded.
My Limitations
I'm basically limited to what's on FireFox, Chrome, or Edge. Unfortunately, I cannot download any programs or tools that would make the automation any easier right now. Otherwise, I would just use Selenium and Python.
What I've Tried
First I tried to use the script that I describe above (simple DOM manipulation)
Then I tried to use the Selenium browser add-on, but I had to enter a starting URL for it to run. Selenium was not able to get past the login page of our system which is the only static URL that I can use as a starting point.
I then tried to use the Firefox Browser Console (different from the dev console) because the documentation seemed to suggest that I can use JavaScript on the entire browser (not just one tab). Unfortunately, I cannot find any helpful information on how to use the browser console for DOM manipulation. Everything that I search for points to how you create a browser extension, add-on, or how to use JavaScript on your own website.
What I Want To Do
I want to create a script that runs in a dev console. The script should take all of the data either from a separate page or an array then enter the data on each page for each person. I'll also have it prompt the user to verify the data before submission.
What I'm Looking For
What I'm hoping to get from this question is at least one three things.
An answer to the question's title.
Being directed to documentation or some other solution that can solve any of the above problems.
Being told if this is impossible and why by those who have more experience than me (I don't understand if the problem is just a lack of knowledge or limitations on the tools themselves.)
I think you can create a chrome extension and put your code in the background service worker. or use workers read this link

Detect and deflect Javascript injected from Inspector

Short version:
Is it possible to detect that someone added code to run inside a page from the browser inspector?
Long version:
Stock broker companies give their users the real time value of stocks, other free tools give you a delayed version of such values, for example 15 minutes old information.
There are other types of financial companies that have real time API to give you access to stock market at a cost.
What some people do is to keep their browsers open in the broker site and inject some JS code to observe the changes and post them elsewhere using XHR or web sockets. Not only network calls but also notification API and the draft Serial API can be exploited to put data out of the site.
This usually can't be done automatically due to the secure nature of logins requiring captcha or other methods. But once logged in and injected the hack will work until the tab is closed.
Usually this is not done by injecting script tags with outer files source, just pasting the whole code inside inspector and running it.
Now back to the question: Can a site know that code rogue code is running in their site?
I thought of some methods like a HASH of every variable used and if anything new is created it reloads the page or warn the user. But I'm not sure it is possible in nowadays JS, I guess document.all could help.
So yes, kinda, and also no kinda... there isn't a great cross browser solution to this as their implementation of the debug tools are all slightly different. This solution is probably the best I've found so far.

Don't allow third-party javascript references to freeze site

First some backstory:
We have a website that includes a Google Map in the usual way:
<script src="https://maps.googleapis.com/maps/api/js?v=....></script>
Then there is some of our javascript code that initializes the map. Now suddenly yesterday pages started to load but then freezed up entirely. In Chrome this resulted in having to force quit and restart. Firefox was smarter and allowed the user to stop script execution.
Now after some debugging, I found out that a previous developer had included the experimental version of the Google Maps API:
https://maps.googleapis.com/maps/api/js?v=3.exp
So it's likely that something has changed on Google's servers (which is completely understandable). This has uncovered a bug on our end, and both in combination caused the script to hang and freeze up the website and the browser.
Now ok, bug is found and fixed, no big harm done.
And now the actual question:
Is it possible to somehow sandbox these external script references so that they cannot crash my main site. I am loading a decent amount of external javascript files (tracking, analytics, maps, social) from their own servers.
However such code could change at all times and could have bugs that freeze my site. How can I protect my site? Is there a way to maybe define maximum allowable execution time?
I'm open to all kinds of suggestions.
It actually doesn't matter where the scripts are coming from - whether an external source or your own server. Either way they are run in the clients browser. And that makes it quite difficult to achieve your desired sandbox behavior.
You can get a sandbox inside your DOM with the usage of iframes and the keyword "sandbox". This way the content of this iframe is independent from the DOM of your actual website and you can include scripts independent as well. But this is beneficial mainly for security. I am not sure how it would result regarding the overall stability when one script has a bug like an endless loop or similar. But imho this is worth a try.
For further explanation see: https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/

Is it possible to use Chrome Remote Debugging Protocol from inside the webpage?

Is it possible from Inside the Chrome Browser to connect to the Remote Debugging Protocol? - without installing and creating extension for that purpose.
The purpose would be to test a JavaScript code created inside the HTML page using ACE editor or similar, to allow user to run code snippet within the page and then return the result to the calling page. For example, the code might be running inside an IFRAME.
At least http://brackets.io/ is said to "Brackets is a web-based IDE that uses the Chrome debugging protocol to enable debugging and live HTML/CSS development." - which lets me wonder, is there client JS API for browser to connect with WebSockets to the interface or do you have to write that interface by yourself?
So, there seems to be several options for client, but what about the browser itself?
EDIT: assuming here that the browser was started with --remote-debugging-port=... set to a meaningful value.
Not directly. As far as I can tell, the remote debugging interface is only available if it has explicitly been enabled at startup using the --remote-debugging-port= command-line flag. There doesn't appear to be any way to activate it at runtime; even if it were, you wouldn't be able to access it from a web page.
Keep in mind that Brackets is a standalone application based on Chrome; it doesn't run as a web site. As such, it can do some things that aren't possible in a browser.
Now, that all being said, there may be a way to make some error reporting and debugging features available if you're careful. In particular, if you can inject code into your iframe, you could attach an event handler to the global onerror event to catch exceptions. You may need to use some special tricks to pass events from the frame to the parent page — Window.postMessage may be helpful here — but that should at least get you started.

How would one monitor JavaScript execution in a web browser programmatically?

I would like to be able to know when arbitrary JavaScript successfully executes a command in a web browser. The medium doesn't matter, it could be a log, stack trace, event signal, it just has to be something that can be programmatically analyzed.
I've thought about this problem for some time now and I have not been able to come up with an adequate solution. I'm no expert with JavaScript though, so I'm wondering what ideas you have?
Since you'll probably be wondering why, it's just something I'm very interested in.
Any input is appreciated. Can you help me?
EDIT: I've investigated using something like Firebug to monitor JavaScript functions, however I wasn't able to determine if Firebug can be run programmatically on a simulated Web Browser (like a web-browser control in ASP.NET, which is what I'm currently using.) Does anyone know if it can?
You can use the profiler of Firebug.
Go to the console tab and click Profile. The profiler starts and all the javascript actions are "logged" till you click Profile again. Then you get the list of javascript functions that were executed in this interval.
A similar feature is available in most modern browsers' consoles.
Source: See/Log which javascript function is being executed by the browser
The firefox browser could be used in asp .net using the selenium web driver and it also provide the ability to access all details from a web page. see the document and download api code and integrate it in your project its very easy to integrate using its help.
http://docs.seleniumhq.org/projects/webdriver/

Categories