Searching for errors in programming code is called code debugging. Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user.

With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing. Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your browser with the F12 key, and select “Console” in the debugger menu.

Have you recently checked out Google Plus because they implement some awesome effects?  I opened the console and same the following message:
WARNING!
Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS.
Do not enter or paste code that you do not understand.

I know you are not surprised to see that message but what have you notice was that the first text was red and the background was yellow. The text was even a bit bigger. How did they do it? Pretty easily:
For first line:

console.log("%c%s","color: red; background: yellow; font-size: 24px;","WARNING!")

For second line:

console.log("%c%s","color: black; font-size: 18px;","Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS.\n Do not enter or paste code that you do not understand.")

Note:  The first argument is the order of style and message, the second is the style set, and the last is the desired message.
With some trickery you can inject images too!

console.log("%cDhiraj Kumar", "color:transparent; font-size: 16pt; line-height: 125px; padding:20px; padding-top:20px; padding-bottom:40px; background-image:url(http://www.css-jquery-design.com/favicon.png); background-repeat:no-repeat; ", "\nhttp://www.css-jquery-design.com\nPowerd by\nDhiraj Kumar\n\n\n");

Browser Compatibility

Firefox supports this as well, and only IE prints both, the format string as the string itself into F12 (console).

Major Browsers’ Debugging Tools

Normally, you activate debugging in your browser with F12, and select “Console” in the debugger menu.

Otherwise follow these steps:

Chrome

  • Open the browser.
  • From the menu, select tools.
  • From tools, choose developer tools.
  • Finally, select Console.

Firefox Firebug

  • Open the browser.
  • Go to the web page:
    http://www.getfirebug.com
  • Follow the instructions how to:
    install Firebug

Internet Explorer

  • Open the browser.
  • From the menu, select tools.
  • From tools, choose developer tools.
  • Finally, select Console.

Opera

  • Open the browser.
  • Go to the webpage:
    http://dev.opera.com
  • Follow the instructions how to:
    add a Developer Console button to your toolbar.

Safari Firebug

  • Open the browser.
  • Go to the webpage:
    http://extensions.apple.com
  • Follow the instructions how to:
    install Firebug Lite.

Safari Develop Menu

  • Go to Safari, Preferences, Advanced in the main menu.
  • Check “Enable Show Develop menu in menu bar”.
  • When the new option “Develop” appears in the menu:
    Choose “Show Error Console”.

Did You Know?

Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.
The first known computer bug was a real bug (an insect), stuck in the electronics.

That’s it!

I hope it’s been an interesting tutorial and not too hard to follow.

view demo

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!