Develop Reference

How to edit a website's HTML and then have it be there when you reload but only for you?

So say I use a website very often but I don't like a certain aspect of the design, I obviously don't own the website but I don't like to have to go in every time I load a page and edit the HTML, I'd like to be able to save some HTML and every time I open this website it should replace the code automatically, or it could run some Javascript or something, or even change some of the CSS, is this possible and if so, how?

The easiest way to do something like this would be to install a userscript manager like Tampermonkey. Then you can create a userscript for the site that changes the HTML to how you want it to be, and (if you've written the code properly) it'll automatically run every time you load the site.
For example, due to a bug in Stack Exchange's CSS/Javascript, quickly double-clicking on a snippet when it's loading results in errors, so I currently have the following userscript to fix it:
// ==UserScript==
// #name Stack Snippet Modal Fixer
// #description Prevents snippet double-clicking from breaking the snippet interface
// #author CertainPerformance
// #version 1.0.0
// #include /^https://(?:(?:(?:codereview|gamedev|codegolf|meta)\.)(?:[^/]+\.)?stackexchange\.com|(?:[^/]+\.)?stackoverflow\.com)/(?:questions/(?:\d|ask/)|posts/\d+/edit|review/(?:reopen|helper|low-quality-posts|suggested-edits)(?:/\d+|$))/
// #grant none
// ==/UserScript==
document.body.appendChild(document.createElement('style')).textContent = `
.snippet-modal {
pointer-events: auto !important;
}
`;
This uses Javascript to append a <style> tag to the document, but you can make whatever other changes you want to the document as well (like changing HTML of a page, or removing style rules of an existing inline <style>, etc).
The only limits to a userscript are the limitations of Javascript on a page, but most things one would want to tweak can probably be achieved with Javascript.
Personally, I would have a hard time browsing many of the sites I frequent without the ability to write userscripts to customize sub-optimal interfaces.

You could use the browser extension Stylus, which allows you to add custom css on a per-website or on a global basis and it will load that css every time you visit any page on the specified site(s) until you turn it off.
For Chrome:
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
For Firefox:
https://addons.mozilla.org/en-GB/firefox/addon/styl-us/

If you are interested in doing a little work, you can write a Google Chrome extension to do what you're asking. Take a look at https://developer.chrome.com/extensions/getstarted to get started.

I think there is already a plug in that does exactly that. I don't use it, I just remembered from years ago and find it in the Chrome Extensions store. Give it a try:
Monkey Wrench

MutationObserver reports no changes in framset within asp page

I'm trying to write a userscript on Opera using Tampermonkey (although I tried ViolentMonkey already with the same results) that will run on my router's config page and calculate some values based on the statistics displayed.
The problem is, it is an .asp page, with only a frameset (no body element, although I have no idea if this is normal for asp or not, never used it) and 3 frame elements within it. After trying some DOM methods, which work but require some very inelegant approaches to actually detecting what's on the page since the url doesn't change, I stumbled upon MutationObserver which kicks ass, but I can't seem to get it to return any events, no matter what I do.
The MutationObserver works when I try it on google.com and reports normally. My code so far is just this test for MutationObserver functionality, so it's pretty much a copy/paste from here and looks like this (slightly modified):
// ==UserScript==
// #name meh
// #match http://192.168.1.1/cgi-bin/index.asp
// #run-at document-end
// ==/UserScript==
// MDN code starts here
var target = document.body;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
var config = { attributes: true, childList: true, characterData: true, subtree: true };
observer.observe(target, config);
// end of userscript
This exact code works perfectly fine on google.com. Also my #match directive isn't the problem since I log the observer to the console (not shown here) to make sure it matches the proper url.
I've tried various elements as targets (in case that was the problem) such as window.frames['framename'].document.body and the like, and I've tried with and without subtree in the configuration, as well as using document-start for the #run-at directive. No matter what, I get no mutations logged into the console.
I haven't been able to find anything online concerning this particular case so I need to ask, is there anything special about .asp pages that can mess with MutationObserver or is this something to do with frames and framesets?
edit - quite ironically, the only place online I could find to test my code other than the router's interface is The World's Worst Website. Not even jsfiddle and codepen will put up with frameset and frame.

I'm going to put this to rest. I originally wanted to approach my problem this way in order to avoid using the greasemonkey api to store values (because if I'm within a frame's context and I refresh, stored variables are wiped) and to use a more elegant and simple way of checking whether a specific frame is loaded with a specific url. Turns out browsers (Chrome, Firefox, Opera) will not spawn an event when a new url is loaded within a frame (I don't know if for iframes the behavior is the same, due to sandboxing, or iframes behave differently than ancient frames).
All in all, if you need to do something like this (maintain a variable in a userscript between refreshes of a frame), target the frame you specifically want to monitor with the #match directive and use the greasemonkey api (or whatever api your userscript extension has for storing values permanently). If you want to do this on a website you're making yourself, don't use frames (preferrably), or use postMesssage or attach event handlers where you need them.
The gist is, frames are terrible.

Easier way of testing and adding Javascript to a page in Firefox?

I am trying to extend some Javascript in one of my pages and for quick "will this work" code it's a huge pain. Basically it consists of editing code in my IDE and save, switch to Firefox, reload page, set breakpoint in Firebug, examine and repeat
Are there any Firefox extensions that will aid me in this respect?
The only thing I can find is using javascript: ... in the address bar, but that's a huge pain, can only hold a single line, and there is no way of making the test code persist across a page reload.

Try jsfiddle.net. You can experiment with html, css and code within your browser and debug that with firebug for example. You can use a diversity of js-frameworks (or none), simulate XHR, and add your own (js/css)resources. It's not ideal, but much better than the practice you described.
You can also try using KomodoEdit, which offers 'view in browser' functionality, even for URLS and with a preset browser.

just use the js console that comes with firebug. You can write all manner of code in there and even declare functions and variables that can be referenced. if you need more than one line, firebug can do that too.
EDIT: except page reload.... if you need to do page reload it needs to be saved somewhere. I would use a Greasemonkey script

You can use the Web Console (new in Firefox 4 and higher) - press Ctrl-Shift-K to open it for a particular page. The command line is at the bottom, press Shift-Enter on the command line to enter more than one line.

Firebug doesn't load JavaScript files or stop execution on breakpoints

I'm new to Firebug and having a lot of trouble.
JavaScript files usually show up empty, or load partially (some of the time)
Lines are not available to set breakpoints on frequently (line numbers are greyed out)
When I do set breakpoints, script execution often does not stop on them
I'm using Firebug 1.3.3 and Firefox 3.0.11. I have disabled all other Add-ons. I'm loading Javascript from localhost. Sometimes closing the window and re-opening the page I was on clears things up, but that never lasts for more than a couple page loads.
I'm working on learning jQuery, which obviously has a huge library, but I imagine many other people use Firebug for the same, so that shouldn't be a problem. Also, most of the time (but not always), Firefox loads and executes the JavaScript no problem; just Firebug can't see it.
Due diligence:
These discussions seem to cover the same problem, but have no answers:
"Firebug not showing Javscript errors" - http ://groups.google.com/group/firebug/browse_thread/thread/443848cd11be48e1?pli=1
"firebug does not always load javascript" - http ://code.google.com/p/fbug/issues/detail?id=1644&q=empty%20javascript&colspec=ID%20Type%20Status%20Owner%20Test%20Summary
(Sorry I'm new, and not allowed to hyperlink those)

A couple suggestions. Make sure that you have the console, net, and script panels of Firebug all turned on.
You should see in the net panel what js files have downloaded. In the console panel, you should be able to type console.log(jQuery) and get back function().
This should confirm that jQuery is actually loaded and running.
Then go to your script panel, and you should see four options across the top. Inspect, Edit, Static, and then a drop down list of your scripts. That's the one you want. Select the script that you want to debug.
Based on your question, you probably know some of this already, but confirm that all of that is working first.
When you don't see jQuery in the scripts list, can you do console.log(jQuery)?
PS. It's not a matter of size. I routinely load js files that are 10x the size of jQuery.
Edit: A few more suggestions:
1) Reduce to simplest case and add back. Remove all your scripts other than jQuery and then add your other scripts incrementally. Is there one that consistently breaks it.
2) Put try / catch statements around suspicious code blocks. I've often found that FB stops reporting errors after an uncaught exception has been thrown.
try {
// your code here
} catch (e) {
console.log(e)
}
3) Setup another FF profile to test if you get the same problem.

Safari issues with javascript + css

I have some strange behavior going on with safari, im using the jQuery.GridLayout plugin and css for styling.
Just for some context, this website layout is a simple header followed by the content which are a collection of blocks (each block is a div) positioned by the javascript and rearranged every time the window is re-sized.
When I direct safari to the website url all the blocks overlap to some degree (like 50%) but as I re-size the window if they have to move, automatically all goes to the correct place and only breaks if I refresh the page.
So it seems that loading the page is messing it up either because something fails to register or because something does not happen until I re-size the window.
As anyone experienced such behavior within safari?
It works perfectly in firefox and opera, its an valid html 4.01 transitional page and the css is also validated (wc3 wise that is).
I know that publishing the code is invaluable to sort this kind of issues but this is a production project and I'm obliged not to it.
Either way I appreciate any advice on were to start looking?
How do one goes about debugging this issues in safari?
Thank you.

Safari fires DomReady before linked resources are loaded. This race condition regarding calculating sizes of elements defined in CSS can usually be avoided by loading your CSS resources before any JavaScript (eg: make sure the tags appear in the before ANY tags (which are blocking, but give a change for CSS to load asynchronously). Worse case scenario, move your blocks to the last element in , leaving your tags above.
CSS concatenation of multiple files (if you have them) is also recommended.

If you aren't able to post the actual code of the page for us, you might find your solution while trying to reproduce the problem without your specific content. In the past, I've solved some of my own problems while trying to generate a page that shows the problem to post on IRC / SO. If you are able to reproduce the problem without your content, post it for the community, and an answer will be much easier to find.
My shot-in-the-dark guesses lead towards:
You may find that one of your content blocks is causing the issue.
You may find that a different library you are using is causing the issue.
Some javascript code for your layout may be running before everything is ready / filled in. From my memory, Safari is quick to display pages before images are loaded for instance.
Perhaps you need to specify the an exact width/height of some of your Grid Containers.

Small update:
(new update at bottom)
http://www.howtocreate.co.uk/safaribenchmarks.html
And also something that is working is this small script:
<script language="JavaScript">
// CREDITS:
// Automatic Page Refresher by Peter Gehrig and Urs Dudli www.24fun.com
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http:
//www.hypergurl.com
// Configure refresh interval (in seconds)
var refreshinterval=20
// Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
var displaycountdown="yes"
// Do not edit the code below
var starttime
var nowtime
var reloadseconds=0
var secondssinceloaded=0
function starttime() { starttime=new Date() starttime=starttime.getTime() countdown()
} function countdown() { nowtime= new Date() nowtime=nowtime.getTime() secondssinceloaded=(nowtime-starttime)/1000
reloadseconds=Math.round(refreshinterval-secondssinceloaded) if (refreshinterval>=secondssinceloaded)
{ var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes")
{ window.status="Page refreshing in "+reloadseconds+ " seconds"
} } else { clearTimeout(timer) window.location.reload(true) } } window.onload=starttime
</script>
I find it odd that a refreshing script solves the issue in safari, but if i manually refresh the page the page havoc ensues...
########UPDATE##########
Well I finally got some more time to work on this and after doing some reading a rather obvious thing came to my mind, let the content load and then format it, so for now all of my js sits between </body> and </html>.
Its not perfect since now you can catch a glimpse of the content without being properly placed when the page first loads.
Maybe ill try calling the js a second time after a few ms have passed of loading.
I know this was proposed a bit upper the thread I just needed time to get my hands dirty thanks all, Ill keep updating till I get it solved in a more proper fashion :)