Console Tips and Tricks
<p>Here are some quick commands for the console.</p>
<h3>Getting to the console in your browser</h3>
<p>Press F12 and Find the console tab.</p>
<p><img src="https://i.imgur.com/OgMZ9NO.png" /></p>
<p>That little blue <span style="color: #236fa1;"><strong>></strong></span> there is the console. this is in brave or chrome, but on different browsers the shortcut to get there may be in settings. </p>
<h3>What can we do in the console?</h3>
<p>The most common thing to do here is check for script errors, but you can do tons more things like run javascript functions or anything the browser is capable of if you know the commands. </p>
<h3>Test some variables</h3>
<p>Log some variables to the console. </p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">var test = 10;<br />var anothertest = "kruxor";<br />console.log(test);<br />console.log(anothertest);</code></pre>
<p>Log as an object to see the variable name and value by adding {} to the variable name. </p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">console.log({test});<br />console.log({anothertest});</code></pre>
<p><em><img src="https://i.imgur.com/9vkk350.png" /></em><br /><em>Example Console Result</em></p>
<p>Or you can just log them all together creating a single object.</p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">console.log({test}, {anothertest});</code></pre>
<p><img src="https://i.imgur.com/I3UzLrT.png" /><br /><em>Example logging multiple objects in one log.</em></p>
<p>You can then use the console.table to show the data in a tabular format rather then just the raw objects.</p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">console.table({test});<br />console.table({another_test});</code></pre>
<p><img src="https://i.imgur.com/aKaSvAD.png" /><br /><em>Example of console.table result.</em></p>
<h3>Other types of console messages</h3>
<p>Here are some other message options in red and orange and just normal console message format. </p>
<h4>Javascript</h4>
<pre><code class="javascript hljs">console.log("This is a log message") // normal log<br />console.info("This is information") // another way to do a standard display<br />console.error("This is an error message") // highlight the message in red and flag it as an error<br />console.warn("This is a warning") // highlight the message in orange and flag it as a warning</code></pre>
<p><img src="https://i.imgur.com/G2Q6tRc.png" /><br /><em>Example console messages</em></p>
Javascript
// Log some variables to the console.
var test = 10;
var another_test = "kruxor";
console.log(test);
console.log(another_test);
// Log this as an object so you can see the variable name and value.
// just add some curly bracers to the main variable name.
console.log({test});
console.log({another_test});
// Or you can just log them all together creating a single object.
console.log({test}, {another_test});
// You can then use the console.table to show the data in a tabular format rather then just the raw objects.
console.table({test});
console.table({another_test});
// Other types of console messages.
console.log("This is a log message") // normal log
console.info("This is information") // another way to do a standard display
console.error("This is an error message") // highlight the message in red and flag it as an error
console.warn("This is a warning") // highlight the message in orange and flag it as a warning