Google Chrome isn't saving Javascript on navigation - javascript

Hi I know that there's a question about this already, but all of the answers don't seem to be working for me.I'm trying to make the JS console not reset on navigation.I know there's the "Preserve log upon navigation" checkbox/button, but it's not working for me.Whatever I entered is cleared and the page is loaded as default. How can I make it save what I changed, like a kind of add-on? (preferably without installing any additional tools)..Or am I misunderstanding the use of the preserve log upon navigation thing? Anyway, how can I achieve what I'm hoping to?Thanks in advance!

The "Preserve log upon navigation" setting doesn't store any changes you've made to the DOM using the console, it only preserves the log of what has been output to the console.
As far as I know there is no way to preserve the changes you've made via the console across links/refreshes since you are always loading/reloading the page. I doubt there are even add-ons to preserve that kind of thing.

As winterblood stated in his answer, there's no way to preserve the changes made to any js file or the dom after a page refresh.
What you CAN preserve however are the breakpoints in the code. So if you need to place a change very early on, you can search the first script to be loaded, put a breakpoint in it, and refresh the page. When the page refreshes, then you can make any changes on it that you wish.
Another solution is to use a proxy like charles or fiddler, and do a "map local" of a local js file with your changes in it. See this link for that. I do this a lot in my work. It's dead easy to copy/paste a file from the chrome console into a local file, then use charles to do a map local of the request for that file and reload the page. If everything goes well, you will be able to do any changes you want to that file without modifying anything else in the page.

Related

Breakpoints and changes stopped working in Chrome DevTools

I have a weird problem that I hope someone encountered, because I don't know if I can provide much detail about it (sorry).
I'm working with TiddlyWiki as a local HTML file. It's a wiki that is entirely in one HTML file. It has javascript plugins, also in the file. When it loads it sets them up as separate scripts in devtools.
I want to modify one of these on the fly. What I used to do was open the script (it opens in its own tab), edit it, save, and the changes would take effect until reload.
All of a sudden, this stopped working. Not only my changes don't take effect, but breakpoints in the script, which used to work fine no longer work. If I make the change while in a breakpoint, and save, the browser jumps to the script that calls the method in the changed script. The breakpoint no longer works and I can't step into any method in the modified script. The modifications don't take effect.
I tried using local overrides, adding, removing, resetting, deleting the files. Everything I could think of. Note that I didn't need these in the past (that is, until a few days ago).
Turns out this was probably due to something with encoding. I use vi to copy&paste the text and then save as ascii, then copied that to the wiki and everything started working as expected

Force console to be open on load within iframe - chrome

I am trying to create some simple tutorials, which involve people using the console in chrome. Ideally I would like to build them in a codecademy style - so instead of saying 'browse to this element in the console' and the user having to go to a separate demo page and do this, it would be built into one page.
So, I would have the tutorial, and then an iframe containing the demo page. I need the console to be open in the iframe page (and stay contained within it), but still be usable.
I know in chrome you can change which iframe you are viewing in the dev tools, and if needs be I will simply instruct users to do that, but I feel it would be more effective / smoother if the console was actually within the iframe and was automatically there.
Is there any way to do this?
Thanks in advance.

Dashing doesn't detect change of coffescript

I'm working on some dashing widgets in a dashboard project.
Normally if I work on a coffeescript and I save it, I have to reload the page in the browser, and I can see the effect of my changes in the widget.
For some time the change won't do any effect in the browser. I thought, it may be a browser cache issue and I tried clear the cache, but nothing changed. I tried another browser, same issue.
I can see my changes in the browser only if I change the classname off the widget.
Is there any simpler method?
I encountered a similar issue. The widget would not refresh to reflect my html changes (new <h2> tag). Restarting / clear-cache were the first things I tried. I use Chrome and I found this note in the Dashing-Workshop :
Note: Chrome is sometimes weird, and it's possible that your browser isn't showing the number anymore in the widget. If that's the case load dashing in a brand new tab to clear the cache.
I resolved my issue by turning off caching "Developer Tools > Networking > Disable cache [x]"
It shall work, Use chrome developer tool to debug it
console.log to print to console
use inspect element to see the html/css

hide source of HTML page using javascript

I saw How to hide html source & disable right click and text copy? . One of the answers say use ctrl+u to view the source. But, using shortcut.js I can override ctrl+u as well. How do I view source in that case.
There is no way to prevent this. Someone could easily download the page using a non-browser tool like curl or wget, or log all HTTP traffic with Wireshark.
Use this. http://www.fiddler2.com/
Depends on the browser, but you can go to View -> Page Source in most to view the source. You cannot override that, however.
Furthermore, it's considered bad practice, and someone could also just as easily override the functionality through a tool like Firebug.
You can't stop people. It will be passed over the network, and sniffable through Fiddler, or someone can use a text based browser, or disable Javascript entirely, or look through their cache folder for the files they downloaded from your site.
You cannot stop people from seeing your source.
Well it's not possible to prevent users from seeing your script. But what you can do is to make it mire harder that user quits trying after few common methods.
I recommend you to load an initial page. Then load the whole page by using ajax. You can show a friendly loading gif too. This technique has following adanages,
browsers don't show generated HTML. Developers knw how to see this. But Normal user will not find it easily
if any user just press Ctrl+u it'll show the initial page.
wget, curl tool will not work at the first time.
additionally you can obfuscate the main page (which you are going to load by Ajax).
It's nearly impossible to stop people fetching the HTML from your website. I don't see any reason you'd want to hide it in the first place anyway. Hiding something?
Want to view the source no matter what javascript is being used to hide it? cURL the page.
Even if you disable right-click, you can still do a snapshot by pressing the prt scrn key on your keyboard then pasting it into an image editor.
You can't disable it. There are ways to encrypt it, but way more trouble than it's worth.
It's impossible to hide the source, HTML and Javascript are interpreted languages, that mean the browser will "compile" the code on the clients machine.

How to prevent execution of javascript from a browser's address bar?

If I go to this page and then delete the url from my browser's address bar, and then enter
javascript:document.getElementById('rsidebar').value='dsf';
The whole part refreshes. How can I prevent a page from refreshing when executing javascript from the address bar?
Also, are there any other techniques to manipulate a page without having access to the page source like the above method?
No, you cannot stop the user from manipulating the DOM.
You don't need to worry about people manipulating the DOM from the client-side. These changes only effect their local experience. They aren't actually affecting your site for other users.
You can easily manipulate the DOM using tools like Firebug, IEDeveloperToolbar, or Greasemonkey (Javascript engine).
When you do javascript:stuff(); and stuff() produces a return value, the whole page is replaced by it. You can prevent that by using javascript:void(stuff()); or javascript:stuff();void(0);
Already answered by others :)
For Q1: I think this isn't possible because the browser runs every website in its own 'sandbox'
For Q2: I believe Firebug will let you execute javascript on any webpage...
Question 1: As the earlier responders said, nothing you can do I don't think.
Question 2: Check out bookmarklets, some very cool things can be done by running your own JavaScript against pages from various sites. People have written bookmarklets to highlight things on the page, put warning indicators next to links that will open in a new window, or go to aPDF, etc.

Categories

Resources