It is impossible to actually hide your client side source code without actually removing said code from being accessed client side. The simple reason for this is the fact that the code has to be downloaded to the client for it to be used. Once downloaded, it's visible to the user. No exceptions. You can do things like 'security through obscurity', but that too is not going to prevent people from downloading/viewing the source. It's just going to make the code harder to read.
If you want to prevent users from seeing your code, you're basically forced to handle the parts of the code you wish to hide server side. This way, only the input and output are visible to users, while hiding the logic that processes it.
There are some other tricks you could potentially do to make it harder to acces your code (not impossible by a long shot), but I wouldn't recommend those either. Those are usually reliant on browser security settings, easily prevented through broswer add-ons, etc.
If instead you want to prevent users from seeing your code, because you're handling security sensitive operations client side, I suggest you go back to web development 101 and check why that's an inherently bad idea.
EDIT: To purely detect if DevTools is open, you can use this: https://github.com/sindresorhus/devtools-detect and simply follow the readme.
