log ( "%cThis is a green text", "color:green" ) Then we start the console message, which is usually a String with the specifier followed by the message we intend to log, and, finally, the styles we want to apply to the message: console. To add CSS styling to the console output, we use the CSS format specifier %c. As seen in the Elements panelįormats the value as an expandable JavaScript objectĪpplies CSS style rules to the output string as specified by the second parameter Specifierįormats the value as a floating point valueįormats the value as an expandable DOM element. This is a list of CSS format specifiers and their respective outputs. We can pass in properties as the second parameter to effect changes on the String (console message) in respective order or to insert values into the output String. Format specifiers contain the % symbol, followed by a letter that specifies the kind of formatting that should apply to the value. Format Specifierīefore we dive into it, let’s take a moment to understand exactly how it works. Without further ado, let’s start by logging a simple “Hello World!” and applying styles to it. We hope that by the end of this article, you would have learned all you need to know to style your console contents. In this post, we’ll be demonstrating how to apply styles when logging items to the console. As a result, it is only right that we find a way to give it an appealing look and feel, given how constantly we interact with it directly and indirectly. We use it to log items for various reasons, to view data, to keep certain data for later use, and so on. The console is a very useful part of every development process. We'll also touch on manipulating console.log output colors and fonts. Learn how the console.log output can be styled in DevTools using the CSS format specifier.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |