I'm debugging javascript of a web application in a context where changing the actual javascript code on the server is very time consuming. How can I hack at the javascript code in the browser and have it persist when reloading?
It is not an option to use break points before the changed section and then re-applying the change. The nature of the bug is one of visual timing so I need to debug it visually without breakpoints.
Is there a browser plugin allowing this?
I went with using Fiddler on Windows in a VM. Not the simplest solution but once it was up and running it solved the problem. Fiddler allowed me to swap requested files for my local copies whenever requested.
See here: How to replace Javascript of production website with local Javascript?
Related
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/
I try to debug my JavaScript but the issue is more about VS2012. When I run the website debugger it creates some dynamic pieces of code which you can study while debugging but all the JavaScript code doesn't update once I run the debugger. In short it runs the same JavaScript code as the first time I saved the respective document containing the current code. It seems to me like a pretty huge bug, and therefore it also encouraged me to investigate it through the internet but I seem to be the only one to experience it.
I think that's because you're trying to change the dynamic scripts. It doesn't work...
Instead of that, you should edit your source files and save them. If you do so, you don't need to stop the debugging process and start it again.
Just do edits in the source files and save them, then refresh your running page in browser and it works...
I need to debug jasvascript loaded by page. Loaded page are not locally placed.
Loaded js is packed. I want to substitute it with unpacked version.
Is there any tricks or browser options to make it?
It looks like Fiddler's AutoResponder tab will do this for you.
You say you want to replace the JS with the "unpacked" version--if you just want to insert line breaks so you can step through in a debugger, the Venkman debugger has a "Pretty Print" button which does that.
It sounds like you are asking for after the application is already deployed somewhere so this might not be as helpful.
If your application already goes through a regular build script or process for debug or at least for release then you could do it there. You could leave the Javascript files as the un-minified/optimized scripts and when building for debug it just copies them over, but for release it runs them through your minifier/optimizer first before copying them over.
I know that jQuery uses a Google Compiler to package the framework up, but there are other tools that just minify the code. Also it gives you a chance to run any kind of quality checking tools (such as JSLint) on your Javascript when you already have it as part of your build process.
Other then that the AutoResponder idea from above sounds promising.
You could use Charles Web Debugging Proxy to map the requested JS file to a local unpacked JS file (or any other location). It costs money, but you can use the trial for 30 minute periods.
Firebug is a really good Firefox extension that lets you manipulate the DOM and you can see the changes as they happen. This will let you insert <script> tags to the page.
Just Edit the <head> piece of html through Firebug and insert the <script src="http://site.com/unpacked.js"></script> somewhere in the page.
I tried to use Firebug Lite (via the bookmarklet and also adding it to one of my web sites).
I seem to get the alert:
Unable to detect the following script "firebug-lite.js" ... if the
script has been renamed then please set the value of
firebug.env.liteFilename to reflect this change
Alot. Especially when I try to close the tab. This happens in Firefox, Camino and Safari.
What I'm wondering is, is this ready for use?, or do I need to copy the code, post it locally and hack it? I already checked the documentation, and it was pretty limited.
I was also looking at the mod dates and the site appears to have been relatively idle since mid-2008.
The javascript file rounds out at 77,305 bytes, so I would think you would not want to use it on a production site unless you were using a dynamic language and could output the script conditionally when you need to do debugging.
(i.e. http://www.somefakesite.com/page?debug=true)
As long as you're only including the file in the page when you are actually debugging, it probably doesn't matter where you pull the script from unless it doesn't work correctly, in which case you would have to modify and serve it yourself.
I am using VS 2008 to write my Javascript code ( mostly in JQuery). However the js file was not updated when I was done with the editing and pressed F5 to call out the debugger. I need to close my vs2008 and reopen it in order to see the latest changes in js file.
Any idea on how to fix this?
Do a CTRL-F5 in the browser to force a hard refresh of all files the page is using.
Clear the cache in your browser. It's usually that it has a locally cached copy.
js is heavily cached. Use a timestamp and append it to the url:
script.js?_s=12345678
this will force a refresh
clear the browser cache.. thats the usual culprit
If you can use Firefox instead, install the Web Developer Toolbar plugin, and you can disable caching for certain sites, i.e. the site you are developing.