3 ms·

What's your process of editing client side JS? Is there some method to capture scripts before they load so you can make your modifications?

rahkiin 7y ago
You can run a new script that overrides any reachable function. Right from the console. Say there is a function named ‘verifyPassword()’ you can simply run ‘verifyPassword=function(pass){ return true }’
recrof 7y ago
chrome does have overrides in developer tools - it supports persistent script editation. https://developers.google.com/web/updates/2018/01/devtools#overrides https://developers.google.com/web/updates/2018/01/devtools#o...
- darkkindness 7y ago
  Ah, thanks for the link, that's super neat! I was looking for making changes that would persist across page loads or browser restarts, and this is exactly that. It's a shame that it's not a feature in Firefox's dev tools (not yet anyways)
ehsankia 7y ago
In chrome, if you open the dev tools and go to Sources, you can see the files and modify them right there. If they are executed once at page load time, you need to set a breakpoint and refresh, edit, save, then press Run again. Often times when I'm fixing sites, there's an actual error thrown in the console, which will take you to the line in the code where the exception happens (or any line along the stack trace), so you can set a breakpoint right there and fix the code. If the code is minified, there's also a button near the bottom of the code section to reformat it./ The only tricky part is if the JS is embedded inside the html, then Chrome doesn't let you edit it, but often then, it's in the global Window namespace, so you can literally override the function by typing in the console. Hope this helps! As a hands-on example, you can open hn.js on this page, add `alert('hello')` to vote(){}, save, then try upvoting my comment :)

3 ms·

What's your process of editing client side JS? Is there some method to capture scripts before they load so you can make your modifications?

by darkkindness 7y ago

rahkiin 7y ago
You can run a new script that overrides any reachable function. Right from the console. Say there is a function named ‘verifyPassword()’ you can simply run ‘verifyPassword=function(pass){ return true }’
recrof 7y ago
chrome does have overrides in developer tools - it supports persistent script editation. https://developers.google.com/web/updates/2018/01/devtools#overrides https://developers.google.com/web/updates/2018/01/devtools#o...
- darkkindness 7y ago
  Ah, thanks for the link, that's super neat! I was looking for making changes that would persist across page loads or browser restarts, and this is exactly that. It's a shame that it's not a feature in Firefox's dev tools (not yet anyways)
ehsankia 7y ago
In chrome, if you open the dev tools and go to Sources, you can see the files and modify them right there. If they are executed once at page load time, you need to set a breakpoint and refresh, edit, save, then press Run again. Often times when I'm fixing sites, there's an actual error thrown in the console, which will take you to the line in the code where the exception happens (or any line along the stack trace), so you can set a breakpoint right there and fix the code. If the code is minified, there's also a button near the bottom of the code section to reformat it./ The only tricky part is if the JS is embedded inside the html, then Chrome doesn't let you edit it, but often then, it's in the global Window namespace, so you can literally override the function by typing in the console. Hope this helps! As a hands-on example, you can open hn.js on this page, add `alert('hello')` to vote(){}, save, then try upvoting my comment :)