We Keep Coding

Rerun whole page without reloading/refetching scripts

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?

Chrome insists on keeping stale/old javascript code and won't reload the recent version

I'm doing some very simple web dev and using chrome's debugger. The included javascript never seems to update when I modify the source. I can delete the contents of the whole file and it still loads stale code (unless I restart chrome). If I remove permissions on the file, it notices and won't load the page but when replacing permissions the old code is back. This happens both when fetching via http and the local file directly. No amount of spamming reload or ctrl-F5 works. I've tried clearing and manually deleting the cache and even setting the don't cache option in the developer options. I don't think chrome's in local modifications mode but I can never tell (this "feature" is amazingly buggy if not sometimes quite desirable). I don't have this issue in firefox but specifically want to test chrome at the moment.
Has anyone seen this before? What are the common causes? What can I do to prevent this happening?
I'm running fedora 18 with google-chrome 31.0.1650.39-1 - and after noting a newer version - 32.0.1700.19-1. Both have the same issue.

I think ctl-shift-r does a "hard reload," ignoring any cache.

I normally get this problem with Dreamweaver, the new code refreshes fine in the dreamweaver window but when I wanna test on chrome it loads the old code. It generally just takes a couple refreshes for the code to catch up - I assumed the problem was because I was running the files off an appache server which could be causing the delay however it's still local

How to force the current script to be used?

I have an asp.net mvc 3 project that I am developing in Visual Studio 2010. In the scripts section I have a library that I wrote. I made a change to the library. However, I notice that the change does not show up when the program is run in the browser. When I look in the debugger of firefox it shows the old version loading. I have tried cleaning the project, rebuilding, building, closing firefox, ctrl f5 on the page. How can I get the current version of the script to load?

There are two commonly accepted ways of doing this:
Option 1
Best option, in my opinion. Give the script a version number. Must remember to change the version number with every release
<script src="mylib_v4.3.js"></script>.
Option 2
The other is nowhere near as good because it can kill caching. Some browsers will re-request the script each invocation. (I really don't know the which browsers have which behavior.)
<script src="mylib.js?version=4.3"></script>
Option 3
The other option is to keep your scripts in a version directory.
Actually, in my PHP code I have
<script src="/js/ver##VERSION##/mylib.js"></script>
and my php code does a replace of ##VERSION## with the release version. This way my build scripts create a directory tree to upload and set paths right. If you have server side support, this method works very well.

Add a "version parameter" to the script reference :
<script src="/scripts/myscript.js?version=0.2"></script>
That method has the advantage of also doing the job when the your application is being used by clients, and you want to force their browsers to get the newest version when you update your app.

Clear your browser cache and disable it.

What's a simple way in Google Chrome to insert Javascript into sites?

I would like to be able to add custom snippets of javascript to any site that matches a regex. This is mostly because of sites that I use daily because of specialized content, but which have a poor design. I want to be able to do something like:
Visit site See that sidebar overwrites content
Whip out developer tools, find div id for sidebar
Edit a snippet of javascript which is executed on document.ready for this domain:
$('#sidebar-right').remove();
A bit of searching for user scripts tells me that I need to be writing a Chrome extension, which seems unfortunate and overkill. Is there not an easier way, or an extension which is nothing but a javascript editor that assigns snippets to domains? I'd really like to be able to edit in Chrome itself, or at least have a file that I can just leave open in MacVim all the time. An extension requires unloading/installing to update as far as I can tell.
If I just had one big javascript file, that would be fine. I'd just wrap my customizations in domain checks.
Bonus love if I can write in CoffeeScript.

The answer is to use the Tampermonkey chrome extension.
https://chrome.google.com/webstore/detail/dhdgffkkebhmkfjojejmpbldmpobfkfo

Why not dotjs http://defunkt.io/dotjs/ ? It's local, you can version it with git, you can easily take it to another computer...

Another alternative that neatly solves the problem is Custom JavaScript for websites. You just need to install the extension, which takes around 2 seconds, and then you can immediately start typing your custom JavaScript for the specified website.
The extension automatically recognizes the current website, so all you need to do is write your code and click on Save. You can also easily import jQuery or your external scripts for convenience.

Custom JavaScript for Websites 2 is an alternative to Custom JavaScript for Websites, with some bug fixes and sync scripts across devices feature.

Snippets are available directly in Chrome Devtools
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets

Witchcraft is another Google Chrome extension for loading custom Javascript and CSS, and it is supposedly for more avanced users. The older dotjs project repository lists Witchcraft as its successor.

What you're looking for is Greasemonkey. But wait, Greasemonkey is for Firefox only, right? Turns out, you can install Greasemonkey user-scripts as native Chrome add-ons. Just go to userscripts.org and hit the Install button on one of them, and Chrome will automatically convert it into a native add-on. Then, write your own and install it using Chrome.
Note: This only works in Chrome 4.0.

Using Firebug Lite (1.2) would you use it in production sites?

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.