How to recreate Facebook's console warning
Make money for being or staying online/internet.

You will get a $5 starting gift when you join using this link:: GET THE OFFER NOW!!

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

Facebook's console warning message states like this;

Stop!

This 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.

See https://www.facebook.com/selfxss for more information.

So in this tutorial below, I will help you or show you how to recreate the same console warning as Facebook on your website.

Tutorial.
Now, what is %c?

The %c applies CSS style rules to the console log output string as specified by the second parameter as seen in the example below.

copy

var stopCss = "color:red; font-size:65px; font-weight:bold; -webkit-text-stroke: 1px black";
var msgCss = "font-size:20px; background-color:teal;";

console.log('%cStop', stopCss);
console.log('%cThis feature is intended for Developers only.', msgCss);
console.log('%cSee https://ostoncodecypher.com/about for more info.', msgCss);
	

If I am to explain the example above;

%c is the specifier that’s within the first argument of the console.log() which picks up the very next argument as CSS style for the %c pattern argument text.

'Stop' + other texts in other console.log()s are the messages

Then finally stopCss and msgCss are the variables holding the CSS styles.

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» Adding JavaScript to OPEN and CLOSE the Overlay Effect

» A JavaScript library for formatting and manipulating numbers - Numeral.js

» Learn how to animate the value of the placeholder attribute with JAVASCRIPT

» HTML Entities Code Alphabet Discovery Using JavaScript

» Here are some games made with javascript

collections_bookmark Category :: Javascript
date_range Published :: 1 year ago At: 11:40 PM
event_note Detailed Date :: Feb 21st, 2021
person Writer :: Code
  • RECENT POSTS
1 year ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


1 year ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


1 year ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


1 year ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


1 year ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


1 year ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


1 year ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share