在控制台中警告用户并在Javascript中隐藏错误日志

Question

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

Answer 1

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/

Answer 2

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

Answer 3

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.

Answer 4

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.