Disable Content Editing In Browser DevTools - jQuery Lock

Browser developer tools like Google Devtools provides a source code editing functionality that allows the user to directly edit DOM elements and see what happens in the browser.

Lock is a tiny jQuery plugin to check for DOM changes and 'lock' the document so that the visitor can not edit your web page in the browser Devtools.

How to use it:

1. Download the package and load the jquery.lock.min.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.lock.min.js"></script>

2. Call the function lock on the elements which should be locked.

<h1>jQueryScript.Net</h1>
<p>A jQuery Plugin Website</p>

$(function(){
  $("h1, p").lock();
});

3. Execute a callback function when the user tries to change the content of your webpage in the developer tools.

$(function(){
  $("h1, p").lock({
    alert('The Element Is Locked')
  });
});

4. Define a custom hanlder to change the behavior of the plugin if there is a change in the element HTML.

$(function(){
  $("h1, p").lock({
    customHandler: function(element, updatedHtml, savedHtml) {
      // Block the change  
      $(element).html(savedHtml);
      // Output the updated HTML
      console.log('Change blocked %s', updatedHtml);
    }
  });
});

---

This awesome jQuery plugin is developed by kauegimenes. For more Advanced Usages, please check the demo page or visit the official website.