Edit JavaScript code in chrome and reload page - javascript

Very often I hack and play with the JavaScript code on some website. Many times JavaScript code is secured in a function:
(function(){
var = ...
...
}());
and I cannot access the object defined in that scope.
Moreover such code is only executed once, when the page loads, thus modifying it with the chromium/google-chrome developer console (Sources toool) is useless.
Is there any simple way to live-edit some JavaScript code in a page and reload the page so that it runs the modified code?

Have a look at using something like Tampermonkey https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
the Chrome equivalent of Firefox's Greasemonkey
EDIT: you could use this in combination with adblock to disable the loading of the script you are targeting: https://stackoverflow.com/questions/13919183/how-to-turn-off-one-javascript-or-disable-it-under-chrome

I wouldn't call it simple, but something like Intercept Proxy might be able to do it -- replacing one file with another.

I found a way to achieve what I needed.
Using Chromium's debugger I can set a breakpoint on any statement of the source code.
Once that statement is executed, the code suspends and Chromium's console gives me access to whatever is in the stack of the current function.

Related

Is it possible to make and run changes in javascript files using chrome developer tools or firebug without refreshing?

I am working an issue and problem is code is huge and deployed on some remote location and takes a lot of time to go through this process. Now, I know that in chrome developer tools we can open javascript files and modify/save them but problem is, changes are not reflected in application. for example, hello.js has something like this,
sayHello : function() {
// some existing code here.
}
now, developer tools allows to modify this file to look like,
sayHello : function() {
// some existing code here.
// additional code added at runtime.
}
but problem I am facing is, this additional code is not reflected when I execute
sayHello()
function again.
Note: I am not trying to load any new script here.
It's hard to say without some more input on your action, but could be that you are changing the source code (in the browser cache) and you expect the object already in memory to change as well? In case put a break point before the object is instantiated and change the code at that moment and see what happens.

Expose variable to the devtools console without making it global on window

Is it possible to make a variable easily accessible by the debug console without actually making it global? For example, something like this in the code:
console.$ = jQuery
And then in the console, I'd like this to work:
$('#foo')
Not while the page isn't paused at a breakpoint, no. But when the page is paused at a breakpoint, the console has access to all variables that are in-scope at the point where it's stopped.
Of course, your console.$ = jQuery example does make it possible to do
console.$("#foo")
...in the console.
Side note: console.$ = jQuery and $("#foo") aren't great examples, as jQuery is almost always global, and even if you don't have jQuery loaded on your page at all, Chrome provides its own $ function in the console, and I think at least one other browser does as well...

Keep and run code in debugger every time the page is reloaded

I have a function that will reload the current page after a period of time. I want this function to run automatically every time the page is reloaded (using the debugger).
function reloadPage() {
window.location.reload(false);
}
setInterval(reloadPage,3000)
The problem is that every time the page is reloaded, the code in the debugger will be cleaned and the function will not be called. How to fix this?
A very simple solution: Rather than putting the Javascript into the console, consider putting it in your application but disabling it when you're not debugging.
For example, you could have a GET parameter in your URL that, when present, triggers the function. A good explanation of how to retrieve a GET parameter in Javascript is at How to retrieve GET parameters from javascript?
An even simpler alternative would be to simply leave this code commented out, and comment it in when you want to debug. (This is not a good practice and I will scold you for it during code review, but it is a real thing that real people do, and it has the advantage of being easy and working.)
-
An alternative: You could detect when the console is open, and only run your code when the console is detected (though this would annoy power users like me who tend to always have developer tools open). It's not trivial to detect, but there's a library you can use: https://github.com/zswang/jdetects

source code for the alert() function

What is the source code for the default alert() function in Javascript(method of the window object)? I am trying to write an alert function myself so I would really like to get a peek at the original function code.It is so hard to google it.
The alert() function, like a number of other standard functions, is a part of the browser's Javascript runtime. It cannot be replicated with Javascript code (other than by calling alert()), and there is no platform-independent Javascript source code to the function.
It's a compiled function, probably different for every browser, so there is no source JS code for it.
You've noticed when you call it how it takes over the whole browser - it's not a part of the webpage like a popup or something; so if you're trying to achieve something like that (control at a lower level of the browser), there's no way to do it from JS. If you only need a popup, there are tons of online resources about how it do it.
The source code for alert() is... alert()
It is a primitive Word. If you want details, they are yet in another language.
Interpreted directly by the browser.

Calling an overridden and frozen function

I'm building a security framework which injects a javascript file which will always be executed first, and blocks some functions to be executed.
The developers will make their own webapps and the script will make sure that some functionalities cannot be called.
Let's suppose the "blocking" script is like this:
window.alert = function(){Object.freeze(this)}
Is there any way for an application to circumvent this block, without using iframes/external files?
delete(window.alert) doesn't work in this scenario.
not if you can't stop that script running first, otherwise you could asign the original alert to something else:
var oldAlert = window.alert;
window.alert = function(){Object.freeze(this)}
How/why are you using alert? if its for debugging you'd be better off using console.log. if you are using it to notify users then maybe a dedicated modal would be the better option
Based on your updated question, it depends how your framework is loaded.
Lets say you provide the script to the developer to use, in that case they could very easily alter what your script does. if the code is running on in a env that isn't yours then you can assume it's not secure. browser plugins can block scripts, there would bypass any security based in a javascript file.
based on the work of #Abdennour TOUMI on this post : Opposite of Object.freeze or Object.seal in JavaScript, you can do something like that :
window.alert = function(){Object.freeze(this)} ;
Object.unfreezeAlert=function(){
return window.prompt;
}
window.alert = Object.unfreezeAlert(window.alert);
alert ('test4');
http://jsfiddle.net/scraaappy/pxv51zqg/
You need to set the alert property on Window.prototype, not on window. Otherwise:
Window.prototype.alert.call(window, 'This works.');

Categories

Resources