Do not allow change in source code

Can not block this. What you can do is store all the code in a variable and use the setInterval function to check if the content has been modified, but this can cause conflicts with some plugins, for example Slideshows .

These plugins change the site's default code, and in that case, this method would not work correctly.

But ... Here is an example code.

const sourceCode = document.body.outerHTML;

setInterval( () => {
  
  if (sourceCode !== document.body.outerHTML) {
    document.body.innerHTML = sourceCode;
  }
  
}, 500);

<h1>Tente alterar esse conteúdo via inspetor de elemento</h1>

But obviously this is not perfect and can be easily circumvented. Whether blocking JavaScript in the browser or by stripping the code and removing it.

  

This also increases memory consumption.

There are other things like locking the keys and the right mouse button, for example.

window.addEventListener("keydown", ev => {
  switch( true ) {
    /* Previne F12 */
    case ev.keyCode === 123:
    
    /* Previne Ctrl + Shift +  */
    case ev.ctrlKey && ev.shiftKey && event.keyCode == 74:
    
    /* Previne Ctrl + U */
    case ev.ctrlKey && ev.keyCode == 85:
      console.log("Tecla bloqueada");
      ev.preventDefault();
      return false;
  }
})

/* Previne clique direito do mouse */
window.addEventListener("contextmenu", ev => {
  ev.preventDefault();
  return false;
});

<input type="text" />

In addition to the forms already mentioned, you can also use MutationObserver . With this API you can monitor the elements you want.

To use this class, simply instantiate it, using a callback function, and use the observe method to start the procedure.

In the observe method, we can use two parameters: element and the options we want to monitor.

The available options are:

• childList : Monitors additions and deletions of the child elements of the last element;
• attributes : Monitors changes in the attributes of the last element;
• characterData : Monitors changes in element data;
• subtree : Monitors child elements;
• attributeOldValue : Informs if you want to pass the old value in the callback function ;
• characterDataOldValue : Sets true if characterData receives true and the target data before the mutation needs to be written;

• attributeFilter : Define an array of local attributes (without namespace ), otherwise all attributes will be monitored.

    

  All options, except attributeFilter , are given a Boolean value.

Example:

function observe(element) {
  const node = element.outerHTML;

  new MutationObserver(event => {
    element.outerHTML = node;
  }).observe(element, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true,
    attributeOldValue: true,
    characterDataOldValue: true
  })
}

observe(document.querySelector("h1"));

<h1>Tente alterar o elemento
  <code>&lt;h1&gt;</code>, via inspetor de elementos.</h1>

In this way, the function will monitor all events that occur on object h1