Chrome inspect elements have become a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users.

Here's a list of what you can possibly do.

1. View and change the DOM
2. View and change a page style (CSS)
3. Debug JavaScript
4. View messages and run JavaScript in Console
5. Optimize website speed
6. Inspect network activity
7. More...

The list may seem endless, but you catch the trips.

The development/production process of an app can be overwhelming, but with a clear understanding of all tabs within the inspect box, you can discover that the DevTools can be a serious boost to your productivity.

With great power comes great responsibility — Tom Precious

Launching Chrome's DevTool is quite easy and has several shortcuts.

1. Right-click -> Inspect
2. Ctrl + Shift + I
3. Ctrl + Shift + J
4. Ctrl + Shift + C
5. F12

With all you can do with Chrome DevTool why would you want it disabled? I'll share 2 scenarios

• You built an app with access control, with the logic that if x user is_admin, button should be active, else, the button is disabled, but there is no back-end check when a query comes before the action runs.

Flaw: A user can easily inspect the button element, remove the disable, and click on the button with an active state, and it'll work just fine.

• You integrated Paystacks on your web store, you copied and paste their quick-code, and replaced the API_KEY spot with your Api code from Paystack dashboard.

Flaw: A user can easily inspect, edit, and modify the code, replace your API key with his, and still pays this money, this time, it works, and Paystack returned a transaction_reference showing it worked. but the only problem is, it wasn't paid to you, but you update your database column to 1 showing item has been purchased, without backend check to confirm transaction went through, this would probably be a disaster in time.

It's not the Job of this article to tell you the right way to code or integrate APIs but before this disaster comes, or you start refactoring your codes to protect cheap hacks like this, Chrome offers you a way to say, don't show my code to no one

document.onkeydown = function(e) {
  if(event.keyCode == 123) {
    console.log('You cannot inspect Element');
     return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
    console.log('You cannot inspect Element');
    return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
    console.log('You cannot inspect Element');
    return false;
  }
  if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
    console.log('You cannot inspect Element');
    return false;
  }
  if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
    console.log('You cannot inspect Element');
    return false;
  }
}