mdn · sideshowbarker · Jul 15, 2021 · Jul 15, 2021
@@ -531,7 +531,7 @@ <h3 id="Loops">Loops</h3>
 <ol>
  <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li>
  <li><strong>A condition</strong>: Here we have specified <code>i &lt; 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li>
- <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li>
+ <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are printing the value of <code>i</code> out to the console on every iteration using {{domxref("console.log", "console.log()")}}.</li>
 </ol>
 
 <p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p>

@@ -100,7 +100,7 @@ <h3 id="Finding_the_length_of_an_array">Finding the length of an array</h3>
 <ol>
  <li>Start looping at item number 0 in the array.</li>
  <li>Stop looping at the item number equal to the length of the array. This works for an array of any length, but in this case it stops looping at item number 7 (this is good, as the last item — which we want the loop to include — is item 6).</li>
- <li>For each item, print it out to the browser console with <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
+ <li>For each item, print it out to the browser console with <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code>.</li>
 </ol>
 
 <h2 id="Some_useful_array_methods">Some useful array methods</h2>

@@ -105,7 +105,7 @@ <h3 id="Syntax_errors_round_two">Syntax errors round two</h3>
   <pre class="brush: js">console.log(lowOrHi);</pre>
 
   <div class="note">
-  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p>
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code> is a really useful debugging function that prints a value to the console. So it will print the value of <code>lowOrHi</code> to the console as soon as we have tried to set it in line 48.</p>
   </div>
  </li>
  <li>Save and refresh, and you should now see the <code>console.log()</code> result in your console. <img alt="" src="console-log-output.png" style="display: block; margin: 0 auto;"> Sure enough, <code>lowOrHi</code>'s value is <code>null</code> at this point, so there is definitely a problem with line 48.</li>

@@ -162,7 +162,7 @@ <h2 id="Creating_a_method_binding_it_to_an_event_with_v-on">Creating a method &a
  </li>
 </ol>
 
-<p>If you try submitting the form now, you'll notice that the page doesn't reload. If you open the console, you can see the results of the <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> we added inside our <code>onSubmit()</code> method.</p>
+<p>If you try submitting the form now, you'll notice that the page doesn't reload. If you open the console, you can see the results of the <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code> we added inside our <code>onSubmit()</code> method.</p>
 
 <h2 id="Binding_data_to_inputs_with_v-model">Binding data to inputs with v-model</h2>
 

@@ -144,7 +144,7 @@ <h3 id="Browser_developer_tools">Browser developer tools</h3>
 
 <h4 id="The_Console_API">The Console API</h4>
 
-<p>You may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. For a start, there is a <a href="/en-US/docs/Web/API/Console">Console</a> API that allows JavaScript code to interact with the browser's JavaScript console. It has a number of features available, but the main one you'll use often is <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>, which prints a custom message to the console.</p>
+<p>You may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. For a start, there is a <a href="/en-US/docs/Web/API/console">Console</a> API that allows JavaScript code to interact with the browser's JavaScript console. It has a number of features available, but the main one you'll use often is <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code>, which prints a custom message to the console.</p>
 
 <p>Try inserting the following line just below line 31 (bolded above):</p>
 

@@ -332,7 +332,7 @@ <h3 id="Configuring_our_tools">Configuring our tools</h3>
   }
 }</pre>
 
-  <p>The above eslint configuration says that we want to use the "recommended" eslint settings, that we're going to allow usage of ES6 features (such as <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map()</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set">Set()</a></code>), that we can use module <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements, and that using <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> is allowed.</p>
+  <p>The above eslint configuration says that we want to use the "recommended" eslint settings, that we're going to allow usage of ES6 features (such as <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map()</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set">Set()</a></code>), that we can use module <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements, and that using <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code> is allowed.</p>
  </li>
  <li>
   <p>However, in the project's source files we are using React JSX syntax (for your real projects you might use React or Vue or any other framework, or no framework at all!).</p>

@@ -107,7 +107,7 @@ <h3 id="PAC_file_environment">PAC file environment</h3>
 <ul>
  <li>any DOM functions (for example, <a href="/en-US/docs/Web/API/Window">window</a> or any of its properties)</li>
  <li>any WebExtension APIs except <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code> and <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code></li>
- <li>the <a href="/en-US/docs/Web/API/Console">console API</a> - to log messages from a PAC, send a message to the background script:</li>
+ <li>the <a href="/en-US/docs/Web/API/console">Console API</a> - to log messages from a PAC, send a message to the background script:</li>
 </ul>
 
 <pre class="brush: js">//  pac.js

@@ -133,7 +133,7 @@ <h3 id="Viewing_log_output">Viewing log output</h3>
  <li>content scripts.</li>
 </ul>
 
-<p>It includes messages your code logs using the <a href="/en-US/docs/Web/API/Console">Console API</a> as well as any error messages logged by the JavaScript engine as it executes your code.</p>
+<p>It includes messages your code logs using the <a href="/en-US/docs/Web/API/console">Console API</a> as well as any error messages logged by the JavaScript engine as it executes your code.</p>
 
 <p>Let's try it with the example above: select the Console tab in the Browser Toolbox, open a web page, and click a link to see messages logged from the content script and the background script:</p>
 

@@ -15,7 +15,7 @@ <h3 id="Developer_Tools">Developer Tools</h3>
 
 <ul>
  <li>Vastly improved web console - Arrays are shown inline without clicking to bring up in the right inspector, window objects show their url, etc.</li>
- <li>Added the <a href="/en-US/docs/Web/API/Console">console API</a> to Web Workers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=620935">bug 620935</a>). Now you can log messages to the Web Console from Web Workers.</li>
+ <li>Added the <a href="/en-US/docs/Web/API/Console_API">console API</a> to Web Workers (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=620935">bug 620935</a>). Now you can log messages to the Web Console from Web Workers.</li>
  <li>The <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> tool now shows performance statistics using pie charts ({{bug(846601)}}).</li>
  <li>On the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, preview tooltips of CSS transforms are now available ({{bug(726427)}}).</li>
  <li>DOM elements seen in the debugger and console can be removed or inspected directly, via the new buttons to the right of the variable listing.</li>

@@ -12,7 +12,7 @@ <h3 id="Developer_Tools">Developer Tools</h3>
 <ul>
  <li>A Box Model Highlighter has been implemented ({{bug(663778)}}).</li>
  <li>Anywhere a DOM node appears in the console output, it is highlighted when you hover over that console output ({{bug(757866)}}). Similarly all JS functions and objects are highlighted in the console output ({{bug(584733)}}). More information about the console improvement can be found in this <a href="https://www.robodesign.ro/mihai/blog/web-console-improvements-episode-30">blog post</a>.</li>
- <li>Support for {{domxref("Console.count()")}} has been added ({{bug(922208)}}).</li>
+ <li>Support for {{domxref("console.count()")}} has been added ({{bug(922208)}}).</li>
 </ul>
 
 <h3 id="CSS">CSS</h3>
@@ -53,7 +53,7 @@ <h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
  <li>The non-standard {{domxref("ArchiveReader")}} and {{domxref("ArchiveRequest")}} are no longer exposed to the Web ({{bug(968883)}}).</li>
  <li><a href="https://dxr.mozilla.org/mozilla-central/source/dom/webidl/">WebIDL constructors</a> cannot be called as functions anymore. They need to be preceded by the keyword <code>new</code>. ({{bug(916644)}})</li>
  <li>Added support for a new value (<code>alpha</code>) for the second, optional, parameter of the {{domxref("HTMLCanvasElement.getContext()")}} method allowing to define if alpha blending must be stored or not for this context. When not, the per-pixel alpha value in this store is always <code>1.0</code>. This allows the back-end to implement a fast-track. ({{bug(982480)}})</li>
- <li>{{domxref("GlobalWorkerScope.console")}} now returns for the regular {{domxref("Console")}}; <code>WorkerConsole</code> has been removed ({{bug(965860)}}).</li>
+ <li>{{domxref("GlobalWorkerScope.console")}} now returns for the regular {{domxref("console")}}; <code>WorkerConsole</code> has been removed ({{bug(965860)}}).</li>
  <li>The {{domxref("WebGL_debug_shaders")}} WebGL extension has been implemented ({{bug(968374)}}).</li>
 </ul>
 

@@ -19,7 +19,7 @@ <h3 id="Developer_Tools">Developer Tools</h3>
  <li><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector: a new tool enabling you to view data stored by web pages</a></li>
  <li><a href="/en-US/docs/Tools/Performance">Performance tool: revamped Profiler UI and frame rate timeline</a></li>
  <li><a href="/en-US/docs/Tools/Working_with_iframes">Frame switching: point the developer tools at a specific iframe in the page</a></li>
- <li><a href="/en-US/docs/Web/API/Console/table">console.table support</a></li>
+ <li><a href="/en-US/docs/Web/API/console/table">console.table support</a></li>
  <li><a href="/en-US/docs/Tools/Page_Inspector#examining_event_listeners">jQuery events are visible in the Page Inspector</a></li>
 </ul>
 

@@ -77,7 +77,7 @@ <h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3>
  </li>
  <li>In keeping with the evolving WebRTC specification, we have deprecated {{domxref("RTCIceServer.url")}} in favor of {{domxref("RTCIceServer.urls")}}, which lets you specify more than one URL for a given ICE server.</li>
  <li>Some key names of <code>KeyboardEvent.key</code> are changed for conforming <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-key.html">the latest DOM Level 3 Events spec</a>. See <a href="/en-US/docs/Web/API/KeyboardEvent/key#key_values">the tables of <code>KeyboardEvent.key</code> values in MDN</a>. The green cells are new values. And purple values are still unstable. Be careful if you use them (meta bug for these changes is {{bug(900372)}}).</li>
- <li>The {{domxref("Console")}} interface is now working on {{domxref("ServiceWorker")}} and {{domxref("SharedWorker")}}. It was previously available but not working ({{bug(1058644)}}).</li>
+ <li>The {{domxref("console")}} interface is now working on {{domxref("ServiceWorker")}} and {{domxref("SharedWorker")}}. It was previously available but not working ({{bug(1058644)}}).</li>
  <li>The value of {{domxref("KeyboardEvent.key")}} was incorrectly being reported as <code>"RomanCharacters"</code> when the <kbd>英数</kbd> (<kbd>Eisu</kbd>) key was pressed. Now it correctly returns <code>"Eisu"</code>.</li>
 </ul>
 

@@ -141,7 +141,7 @@ <h4 id="IndexedDB">IndexedDB</h4>
 <h4 id="Dev_Tools">Dev Tools</h4>
 
 <ul>
- <li>The property {{domxref("Console.timeStamp")}} has been added ({{bug(922221)}}).</li>
+ <li>The property {{domxref("console.timeStamp")}} has been added ({{bug(922221)}}).</li>
 </ul>
 
 <h3 id="MathML">MathML</h3>

@@ -134,7 +134,7 @@ <h3 id="Other_changes_2">Other changes</h3>
  <li>Support for microsummaries has been removed; these were never widely used, were not very discoverable, and continuing to support them was making improvements to the Places (bookmark and history) architecture difficult.</li>
  <li>WebGL now supports the <a class="external" href="http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a> extension.</li>
  <li>The new <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> tool provides a handy place to experiment with JavaScript code.</li>
- <li>The <code>console.trace()</code> method has been added to the <a href="/en-US/docs/Tools/Web_Console">ConsoleAPI </a>(see {{ bug('585956') }}).</li>
+ <li>The <code>console.trace()</code> method has been added to the <a href="/en-US/docs/Web/API/Console_API">Console API </a>(see {{ bug('585956') }}).</li>
 </ul>
 
 <h2 id="Changes_for_Mozilla_and_add-on_developers">Changes for Mozilla and add-on developers</h2>

@@ -93,8 +93,8 @@ <h4 id="DOM">DOM</h4>
  <li>The {{domxref("Navigator.registerContentHandler()")}} method has been disabled by default in preparation for being removed entirely, as it's been obsolete for some time ({{bug(1460481)}}).</li>
  <li>The {{domxref("DataTransfer.DataTransfer", "DataTransfer()")}} constructor has been implemented ({{bug(1351193)}}).</li>
  <li>{{domxref("Document.domain")}} can no longer return <code>null</code> ({{bug(819475)}}). If the domain cannot be identified, then <code>domain</code> returns an empty string instead of <code>null</code>.</li>
- <li>Added the {{domxref("Console.timeLog()")}} method to display the current value of a console timer while continuing to track the time ({{bug(1458466)}}).</li>
- <li>Added {{domxref("Console.countReset()")}} to reset a console counter value ({{bug(1459279)}}).</li>
+ <li>Added the {{domxref("console.timeLog()")}} method to display the current value of a console timer while continuing to track the time ({{bug(1458466)}}).</li>
+ <li>Added {{domxref("console.countReset()")}} to reset a console counter value ({{bug(1459279)}}).</li>
 </ul>
 
 <h4 id="DOM_events">DOM events</h4>

@@ -57,7 +57,7 @@ <h2 id="Browser_Console_logging">Browser Console logging</h2>
 
 <ul>
  <li><a href="/en-US/docs/Tools/Web_Console#http_requests">HTTP requests</a></li>
- <li><a href="/en-US/docs/Tools/Web_Console#warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/Console">console</a> API)</li>
+ <li><a href="/en-US/docs/Tools/Web_Console#warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/console">Console API</a>)</li>
  <li><a href="/en-US/docs/Tools/Web_Console#input.2foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them</li>
 </ul>
 
@@ -85,7 +85,7 @@ <h4 id="Console.jsm"><code>Console.jsm</code></h4>
 <p>Learn more:</p>
 
 <ul>
- <li><a href="/en-US/docs/Web/API/Console">console API reference</a></li>
+ <li><a href="/en-US/docs/Web/API/console">Console API reference</a></li>
  <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm source code in the Mozilla DXR</a></li>
 </ul>
 

@@ -12,7 +12,7 @@
 ---
 <p>{{ToolsSidebar}}</p>
 
-<p>Sometimes you want to view a value in your code but you don't want to pause execution. Rather than sprinkle <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> statements throughout your code, you can use a special type of breakpoint, the logpoint. Logpoints print a message to the Console panel instead of pausing code execution.</p>
+<p>Sometimes you want to view a value in your code but you don't want to pause execution. Rather than sprinkle <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code> statements throughout your code, you can use a special type of breakpoint, the logpoint. Logpoints print a message to the Console panel instead of pausing code execution.</p>
 
 <p>The logpoint is especially useful in cases where breaking the execution breaks testing procedures, such as when you are debugging popup windows, or executing focus-related logic.</p>
-Original file line number
+Diff line change
@@ Expand Up @@
      </li>
     </ol>
-    <p>If you try submitting the form now, you'll notice that the page doesn't reload. If you open the console, you can see the results of the <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> we added inside our <code>onSubmit()</code> method.</p>
+    <p>If you try submitting the form now, you'll notice that the page doesn't reload. If you open the console, you can see the results of the <code><a href="/en-US/docs/Web/API/console/log">console.log()</a></code> we added inside our <code>onSubmit()</code> method.</p>
     <h2 id="Binding_data_to_inputs_with_v-model">Binding data to inputs with v-model</h2>
@@ Expand Down @@