I am working on a website that will deal with user data and I was wondering how can someone warn a user when he clicks on console tab in developper tools within the browser. something like this from facebook:
And also hide javascript errors in the log.
Thank you in advance
Try adding something like this:
<script type="text/javascript">
const warningTitleCSS = 'color:red; font-size:60px; font-weight: bold; -webkit-text-stroke: 1px black;';
const warningDescCSS = 'font-size: 18px;';
console.log('%cStop!', warningTitleCSS);
console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Facebook feature or \"hack\" someone's account, it is a scam and will give them access to your Facebook account.", warningDescCSS);
console.log('%cSee https://www.facebook.com/selfxss for more information.', warningDescCSS);
</script>
https://gist.github.com/tosbourn/f556ee09c4a551e91d1dfde2f7b254f4
If you just want the formatting, you can do something like this:
console.log('%cSTOP!', 'font-size:24px;color:red;')
To not show js errors in the console, the easiest and best-practice way is to not have them in the first place and/or catch them and deal with them when they occur.
try this: https://github.com/icodeforlove/Console.js
Or you can do it simply this way:
console.log("%cThis is a %cConsole.log", "background:black ; color: white", "color: red; font-size:25px");
Also check out this article: http://voidcanvas.com/make-console-log-output-colorful-and-stylish-in-browser-node/
I founded out an old post on this site that talks about that :
How does Facebook disable the browser's integrated Developer Tools?
Different approches are listed but the result may depend upon the browser. I tried some and I could still execute from console, but the link is helpful for some reasons.
