You simply can’t.
Code inspectors are designed for debugging HTML and JavaScript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they’re generated by JavaScript. Some inspectors even shows the code inside Iframes.
How about some JavaScript to disable keyboard / mouse interaction…
There are some JavaScript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.
Try theses:
- Firefox: ☰ > Tools > Web Developer > Inspector
- Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of JavaScript.
Big Picture
Think about this:
- Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your JavaScript. They are “guarding all the doors and holding all the keys”.
- Browsers want web sites to properly work on them or their users would despise them.
- As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
Basically, browsers are god to your JavaScript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.
You’re waging war against god and you’re doomed to fail.
Conclusion
To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place.