We Keep Coding

Detect and deflect Javascript injected from Inspector

Short version:
Is it possible to detect that someone added code to run inside a page from the browser inspector?
Long version:
Stock broker companies give their users the real time value of stocks, other free tools give you a delayed version of such values, for example 15 minutes old information.
There are other types of financial companies that have real time API to give you access to stock market at a cost.
What some people do is to keep their browsers open in the broker site and inject some JS code to observe the changes and post them elsewhere using XHR or web sockets. Not only network calls but also notification API and the draft Serial API can be exploited to put data out of the site.
This usually can't be done automatically due to the secure nature of logins requiring captcha or other methods. But once logged in and injected the hack will work until the tab is closed.
Usually this is not done by injecting script tags with outer files source, just pasting the whole code inside inspector and running it.
Now back to the question: Can a site know that code rogue code is running in their site?
I thought of some methods like a HASH of every variable used and if anything new is created it reloads the page or warn the user. But I'm not sure it is possible in nowadays JS, I guess document.all could help.

So yes, kinda, and also no kinda... there isn't a great cross browser solution to this as their implementation of the debug tools are all slightly different. This solution is probably the best I've found so far.

How to access the `browser` object in JavaScript (or TypeScript, or Dart)

There are some APIs which are still a bit mysterious to me. I'm not really sure if they represent a compatibility problem, but often I find tutorials online where they can access these variables/objects by default, and I simply cannot reproduce them locally, even after trying it on different browsers, environments and languages.
One of these is the browser variable. When and how can I access it?
For example, MDN's manifest.json documentation shows a very simple way for an extension to access typed shortcuts from the browser:
browser.commands.onCommand.addListener(function (command) {
if (command === "toggle-feature") {
console.log("Toggling the feature!");
}
});
It even shows an example here.
But I just can't access this browser variable/object anywhere. I've tried, with no success, doing so through JS, TS, Dart, both in website and extension environments; and the browser console on Chrome, Microsoft Edge and Firefox. How and when can I access it? — the chrome variable is also another one that seems inconsistent to me, sometimes I can access it, sometimes I simply cannot.

To directly answer your question: The browser object is only available when you develop a brower extension, not a web application. Therefore, what you ask for is not possible (access browser object from web page).
The longer answer is that the availability of infrastructure depends on the execution context: Is it a web page? Is it an extension? Or Javascript running on a server? Firefox? Chrome? etc. Unfortunately, lots of information on the internet assumes that it is "obvious" which execution context they are referring to.
In Chrome you have access to the chrome object on a web page. (you can check this on the console). Maybe that helps in your situation?
Last, regarding compatibility. Check out libraries like webextension-polyfill that unify behavior across browsers. But again, this only helps with browser extensions, not web applications.

javascript eval v.s. browser console tampering, in terms of security differences

Is there anything different in what you can do with eval v.s. what you can do in the browser developer console? is it not safer to use eval, as at least, your code evaluates the user input in a certain context, and, it can also log (and scan) the input prior to execution....

Browser console and eval() are two different things...
in my opinion can't be compared just like that.
Browser console its built into browser (and as it, it's browser specific javascript interpreter)
Lets you execute code besides many other things.
firefox The Web Console: Logs information associated with a web page: any network requests,
JavaScript, CSS, security errors and warnings as well as error,
warning and informational messages explicitly logged by JavaScript
code running in the page context Enables you to interact with a web
page by executing JavaScript expressions in the context of the page.
*The Browser Console is like the Web Console, but applied to the whole
browser rather than a single content tab.
google-chrome The Chrome DevTools Console panel is your focal point for direct
interaction with a page in real time. The Console lets you use
standard JavaScript statements and Console-specific commands while a
page is live in the browser to help you debug the page. View
diagnostic messages, display both raw and structured data, control and
filter output, examine and modify page elements, measure execution
time, and more.
eval() its a javascript method
The eval() method evaluates JavaScript code represented as a string.
So yes, there's a BIG difference between them and what you can do...
...but most important is how you do it.
Now, you ask about security implications with both "options", but I think this is too ambiguous in the way you pose the question, could be user specific answer depending on how we interpret about what you're trying to clarify..
I believe you will need to clarify/elaborate a little more your question and give us some real examples of what you're after.
or maybe not, and this mini explanation is enough to clarify your doubt

I guess using eval within your code runs in the context where eval is being called in your code, whereas the developer console can only access globals, and hence can only access your code-as-written but not necessarily live data created by its execution, but am not sure about that nor about loopholes.

Is it possible to use Chrome Remote Debugging Protocol from inside the webpage?

Is it possible from Inside the Chrome Browser to connect to the Remote Debugging Protocol? - without installing and creating extension for that purpose.
The purpose would be to test a JavaScript code created inside the HTML page using ACE editor or similar, to allow user to run code snippet within the page and then return the result to the calling page. For example, the code might be running inside an IFRAME.
At least http://brackets.io/ is said to "Brackets is a web-based IDE that uses the Chrome debugging protocol to enable debugging and live HTML/CSS development." - which lets me wonder, is there client JS API for browser to connect with WebSockets to the interface or do you have to write that interface by yourself?
So, there seems to be several options for client, but what about the browser itself?
EDIT: assuming here that the browser was started with --remote-debugging-port=... set to a meaningful value.

Not directly. As far as I can tell, the remote debugging interface is only available if it has explicitly been enabled at startup using the --remote-debugging-port= command-line flag. There doesn't appear to be any way to activate it at runtime; even if it were, you wouldn't be able to access it from a web page.
Keep in mind that Brackets is a standalone application based on Chrome; it doesn't run as a web site. As such, it can do some things that aren't possible in a browser.
Now, that all being said, there may be a way to make some error reporting and debugging features available if you're careful. In particular, if you can inject code into your iframe, you could attach an event handler to the global onerror event to catch exceptions. You may need to use some special tricks to pass events from the frame to the parent page — Window.postMessage may be helpful here — but that should at least get you started.

Can outside developers access closure variables during runtime?

Essentially I want to store a variable in the client that I don't want people viewing or changing.
In the following code example:
(function () {
var foo = 'bar';
})();
Can anybody use tools or the browser to access and/or (more importantly) change the value of foo? Links to more information or tools that might do this would be appreciated. I'll be researching more in the mean time.
Thanks in advance

Yes they can modify the values of foo. As a general rule, if you don't want the client to manipulate the value, don't give them access to it (I.e. put user id's or this type of information in the DOM or client side). You may have to do a bit of state management research, encrypted cookies, sessions or if you're using ASP.NET the ViewState/ViewBag etc.

It is possible to inject javascript into any page, and from there you can manipulate every javascript object/variable on the page. Therefore any data that the javascript is receiving should be encrypted (if security is your concern).
To give you a little hint, try open your developer tools. In chrome, Control-Shift-I. Click the scripts tab, then you will see all the variables the scripts is using. It is possible to double-click anywhere within the script and add/remove pieces of code.
F.Y.I if you are using Firefox, I highly recommend Firebug. It surpasses chrome's dev tools, but I find chrome faster.. At least on my slow laptop (Ubuntu FTW).
Hope this helped