<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ravin 💻🚀 </title>
    <description>The latest articles on DEV Community by Ravin 💻🚀  (@ravinwashere).</description>
    <link>https://dev.to/ravinwashere</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F86493%2Fb5291996-6678-45af-92e6-16f9c9f6f7eb.jpg</url>
      <title>DEV Community: Ravin 💻🚀 </title>
      <link>https://dev.to/ravinwashere</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ravinwashere"/>
    <language>en</language>
    <item>
      <title>What is a JavaScript console? Explained</title>
      <dc:creator>Ravin 💻🚀 </dc:creator>
      <pubDate>Wed, 14 Sep 2022 11:26:01 +0000</pubDate>
      <link>https://dev.to/ravinwashere/what-is-a-javascript-console-explained-1292</link>
      <guid>https://dev.to/ravinwashere/what-is-a-javascript-console-explained-1292</guid>
      <description>&lt;p&gt;In this article, You will learn about the JavaScript Console and types of console methods with examples of how to use them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a console in JavaScript?
&lt;/h2&gt;

&lt;p&gt;Console in JavaScript is an object that provides access to the browser's web console. It can be coupled with other approaches to achieve a variety of actions. Which is used for debugging and results logging.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All modern browsers have a web console for debugging.&lt;/li&gt;
&lt;li&gt;Console is a global object, meaning it is accessible in the browser window's global scope. You can use it as a straight &lt;code&gt;console&lt;/code&gt; or &lt;code&gt;window.console&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All current browsers provide a console that may be accessed through a keyboard shortcut key. To access the browser console:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;In Chrome and other chromium-based browsers, press the &lt;strong&gt;F12 key&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;For Mozilla Firefox, use the keyboard shortcuts &lt;strong&gt;CTRL + SHIFT + K.&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;In Safari, use the keyboard shortcut keys &lt;strong&gt;Option + ⌘ + C.&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It can also be accessed by right-clicking on a web page and choosing "Inspect" from the menu.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SqcF3RHW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhxegl0e16tg4q86h948.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SqcF3RHW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhxegl0e16tg4q86h948.png" alt="Console option" width="500" height="720"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To open the console, click the Console option:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GnLpdc5R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzk79bfdt1nd9p44h6ej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GnLpdc5R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzk79bfdt1nd9p44h6ej.png" alt="Image description" width="880" height="68"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Console Methods
&lt;/h2&gt;

&lt;p&gt;Console in JavaScript has several different methods. Among all the log methods is most commonly used.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. console.log( )
&lt;/h3&gt;

&lt;p&gt;This method is mainly used to log output to the console. We can use any type within log(), such as a string, array, or object.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OZaFJKmk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b696f8y4u08yt1c4r85s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OZaFJKmk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b696f8y4u08yt1c4r85s.png" alt="Image description" width="880" height="275"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Similarly, &lt;code&gt;console.info&lt;/code&gt; and &lt;code&gt;console.error&lt;/code&gt; can be used to display text on the console:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LMmfUvdo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr0r1mbnlmacdru3r1tt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LMmfUvdo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr0r1mbnlmacdru3r1tt.png" alt="Image description" width="880" height="185"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2. console.clear( )
&lt;/h3&gt;

&lt;p&gt;It's used to clear the console.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PfNMkBI3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vab102qvmoeetkgloexx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PfNMkBI3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vab102qvmoeetkgloexx.png" alt="Image description" width="550" height="74"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WSj78dCj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndli1enwwc1jmc3sxtm9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WSj78dCj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndli1enwwc1jmc3sxtm9.png" alt="Image description" width="550" height="112"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. console.time( ) &amp;amp; console.timeEnd( )
&lt;/h3&gt;

&lt;p&gt;In order to display how many milliseconds a block of code or a function takes to run, use &lt;code&gt;console.time()&lt;/code&gt; and &lt;code&gt;console.timeEnd()&lt;/code&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--P7OGjpKD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw65elli4d8wctut8210.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--P7OGjpKD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw65elli4d8wctut8210.png" alt="Image description" width="750" height="332"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4. console.table( )
&lt;/h3&gt;

&lt;p&gt;It allows us to generate a table inside a console. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1VV9UcKO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do4v80lmr48hdux1bj7y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1VV9UcKO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do4v80lmr48hdux1bj7y.png" alt="Image description" width="880" height="202"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  5. console.group( ) &amp;amp; console.groupEnd( )
&lt;/h3&gt;

&lt;p&gt;It is used to move the output to the next level by indenting it:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DnwK_1ST--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k6ya1n6ccngsf0gp194.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DnwK_1ST--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7k6ya1n6ccngsf0gp194.png" alt="Image description" width="856" height="396"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  6. console.count( )
&lt;/h3&gt;

&lt;p&gt;It is used to count the number of times the function is called using this counting method.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PerYWe6X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1jcsheee1zuy3fkzgqw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PerYWe6X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1jcsheee1zuy3fkzgqw.png" alt="Image description" width="780" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  7. custom console logs.
&lt;/h3&gt;

&lt;p&gt;Users can add styling to the console logs in order to make logs custom.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--viffY46C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0tom2dnla8jxow3klsw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--viffY46C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0tom2dnla8jxow3klsw.png" alt="Image description" width="880" height="363"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping up
&lt;/h2&gt;

&lt;p&gt;Many developers utilise the console to log data in order to see whether or not their code is functioning correctly. It enables the developer to read, edit, and modify JavaScript code while the browser is running.&lt;/p&gt;

&lt;p&gt;JavaScript has a console object that can be used to log information to the browser's console.&lt;/p&gt;

&lt;p&gt;If you enjoyed this article, then don't forget to give 💚 and If you have any suggestions or tips, feel free to leave a comment or contact me on Twitter at &lt;a href="https://twitter.com/ravinwashere"&gt;@ravinwashere&lt;/a&gt;. see you later!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Learn How To Contribute To Your First Opensource Project In 5 Minutes</title>
      <dc:creator>Ravin 💻🚀 </dc:creator>
      <pubDate>Thu, 03 Feb 2022 13:33:36 +0000</pubDate>
      <link>https://dev.to/ravinwashere/learn-how-to-contribute-to-your-first-opensource-project-in-5-minutes-2pm7</link>
      <guid>https://dev.to/ravinwashere/learn-how-to-contribute-to-your-first-opensource-project-in-5-minutes-2pm7</guid>
      <description>&lt;p&gt;Have you ever wanted to contribute to a project you liked on Github but didn't know how to?&lt;/p&gt;

&lt;p&gt;Here's is a complete guide for you. ↓&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Explore
&lt;/h2&gt;

&lt;p&gt;Find a project that you want to contribute to. Here I use as an example one of my favourite open source project &lt;a href="https://github.com/supertokens/supertokens-core"&gt;SuperTokens&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--592Hcjuw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643881098939/wSQFhSCoD.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--592Hcjuw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643881098939/wSQFhSCoD.png" alt="Supertoken_1.png" width="880" height="410"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Read guidelines
&lt;/h2&gt;

&lt;p&gt;Most projects will have contributions guidelines that you have to follow. &lt;/p&gt;

&lt;p&gt;Note: Mostly will be in a file similar to the "Contribution MD" file. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ViabHz0y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643881791530/FBx007HTi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ViabHz0y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643881791530/FBx007HTi.png" alt="Supertoken_2.png" width="880" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Fork the repository
&lt;/h2&gt;

&lt;p&gt;This will create a copy of the project under your profile. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---6HTkDdR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643882194249/M4du3QdWu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---6HTkDdR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643882194249/M4du3QdWu.png" alt="Supertoken_3.png" width="880" height="188"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Clone the repository
&lt;/h2&gt;

&lt;p&gt;To obtain a copy of the code in your local machine with which you can work. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kZpkTlIY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643882661632/7PpDrOlIz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kZpkTlIY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643882661632/7PpDrOlIz.png" alt="Supertoken_4.png" width="880" height="317"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Add your code
&lt;/h2&gt;

&lt;p&gt;Please create a new branch, add your changes to the code and push it back to the repository. &lt;/p&gt;

&lt;p&gt;Here's a simple git reference guide for you → &lt;a href="https://gitsheet.wtf/"&gt;Gitsheet&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 6: Pull request
&lt;/h2&gt;

&lt;p&gt;This will let the maintainers of the original repository that we want to submit some contribution. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OaYWB605--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643883456933/7sVRAvgtC.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OaYWB605--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1643883456933/7sVRAvgtC.png" alt="Supertoken_5.png" width="880" height="202"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 7: Provide a description
&lt;/h2&gt;

&lt;p&gt;Explain the all changes you made, which issues it fixes and whatever the reviewers know. &lt;/p&gt;

&lt;h2&gt;
  
  
  Step 8: Discuss
&lt;/h2&gt;

&lt;p&gt;The reviewers will go through your code, ask questions and provide suggestions to which you have to respond to.&lt;/p&gt;

&lt;p&gt;Make changes to your code and push them. Once the reviewers are happy, they will merge your code with the main project.&lt;/p&gt;

&lt;p&gt;That's it! If you run into any issues or have questions, feel free to reach out to me on &lt;a href="https://twitter.com/ravinwashere"&gt;Twitter&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>codenewbie</category>
      <category>github</category>
      <category>git</category>
    </item>
  </channel>
</rss>
