<h1 id="web-development-tools">Web Development Tools</h1>
<p><strong>Summary</strong>: in this tutorial, you will learn how to open the Console tab of web development tools to view the messages.</p>
<p>Web development tools allow you to test and debug the JavaScript code. Web development tools are often called devtools.</p>
<p>Modern web browsers such as Google Chrome, Firefox, Edge, Safari, and Opera provide the devtools as built-in features.</p>
<p>Generally, devtools allow you to work with a variety of web technologies such as HTML, CSS, DOM, and JavaScript.</p>
<p>In this tutorial, you will learn how to open the Console tab of the devtools to view messages output by JavaScript.</p>
<h2 id="google-chrome">Google Chrome</h2>
<p>First, open the <a href="https://www.javascripttutorial.net/sample/devtools.html">devtools.html</a> file.</p>
<p>The <code>devtools.html</code> file has the following JavaScript code:</p>
<pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Hello, devtools!'</span>);
<span class="hljs-comment">// the following code causes an error</span>
<span class="hljs-keyword">let</span> greeting = msg;
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Code language: HTML, XML (xml)
</code></pre>
<p>Second, press <code>F12</code> on Windows or <code>Cmd+Opt+J</code> if you are on Mac.</p>
<p>The devtools will open the Console tab by default. It will look like this:</p>
<p><img src="https://www.javascripttutorial.net/wp-content/uploads/2019/12/web-development-tool-console-tab.png" alt="web development tool - console tab"></p>
<p>The first message is <code>'Hello, DevTools!'</code> which is the output of the following command:</p>
<pre><code class="hljs language-sh">console.log(<span class="hljs-string">'Hello, DevTools!'</span>);Code language: JavaScript (javascript)
</code></pre>
<p>To output the value of the <a href="https://www.javascripttutorial.net/javascript-variables/">variable</a>, you use the following <code>console.log()</code> method. For example:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">let</span> message = <span class="hljs-string">'Good Morning!'</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message);<span class="hljs-title class_">Code</span> <span class="hljs-attr">language</span>: <span class="hljs-title class_">JavaScript</span> (javascript)
</code></pre>
<p>The second message that appears on the Console tab is an error.</p>
<pre><code class="hljs language-sh">Uncaught ReferenceError: msg is not definedCode language: JavaScript (javascript)
</code></pre>
<p>This is because the variable <code>msg</code> has not been defined in the code but was referenced in the assignment.</p>
<p>Now, you can see both normal messages issued by the <code>console.log()</code> and the error messages. It’s enough to start. We’ll dive into the devtools in the later tutorial.</p>
<h2 id="firefox-and-edge">Firefox and Edge</h2>
<p>Typically, you open the Console tab of the devtools in Firefox and Edge using <code>F12</code>. They have similar user interfaces.</p>
<h2 id="safari">Safari</h2>
<p>If you are using Safari browser on Mac, you need to enable the Developer Menu first:</p>
<p><img src="https://www.javascripttutorial.net/wp-content/uploads/2019/12/Safari-Step-1.png" alt="img"></p>
<p><img src="https://www.javascripttutorial.net/wp-content/uploads/2019/12/Safari-Step-2.png" alt="img"></p>
<p>And then press <code>Cmd+Opt+C</code> to toggle the Console window:</p>
<p><img src="https://www.javascripttutorial.net/wp-content/uploads/2019/12/Safari-Step-3.png" alt="img"></p>
<p>In this tutorial, you have learned how to open the Console tab of the devtools for checking messages issued by JavaScript code.</p>