Suppose I am writing a bookmarklet script to modify a webpage. Most websites (using webpack, etc) follow a structure something like this:
<html>
<script type="text/javascript">
const buttonClicked = (() => {
let internal_variable = 0;
const _internal_buttonClicked = () => {
internal_variable++;
document.getElementById("myButton").innerText = `Clicked ${internal_variable} times!`;
};
return _internal_buttonClicked.bind(this);
})();
</script>
<body>
<button id="myButton" onclick="buttonClicked()">Clicked 0 times!</button>
</body>
</html>
I would like to access internal_variable and set it to -100. With a debugger, this is simple; I breakpoint inside _internal_buttonClicked(), and then change internal_variable directly.
How can I do this without
- using the debugger
- modifying the page source to add a reference?
- making this a purely visual change to the DOM?
Related: How to get parameters that have been bound by JavaScript’s .bind() function