-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathdebugging.html
More file actions
99 lines (85 loc) · 53.3 KB
/
debugging.html
File metadata and controls
99 lines (85 loc) · 53.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JavsScript - Debugging</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="description" content="Interactive interpreter variables, Breakpoints, Using setters and getters to find what changed a property, Using the console, Automatically pausing execution, Elements inspector, Stepping through code, Break when a function is called">
<meta property="og:site_name" content="DevTut">
<meta property="og:title" content="JavsScript - Debugging">
<meta property="og:description" content="Interactive interpreter variables, Breakpoints, Using setters and getters to find what changed a property, Using the console, Automatically pausing execution, Elements inspector, Stepping through code, Break when a function is called">
<meta property="og:type" content="article">
<meta property="og:url" content="/javascript/debugging.html">
<meta property="og:image" content="/logo.png">
<meta name="twitter:title" content="JavsScript - Debugging">
<meta name="twitter:description" content="Interactive interpreter variables, Breakpoints, Using setters and getters to find what changed a property, Using the console, Automatically pausing execution, Elements inspector, Stepping through code, Break when a function is called">
<meta name="twitter:url" content="/javascript/debugging.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/logo.png">
<meta name="theme-color" content="#ffffff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-TileImage" content="/mstile-150x150.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="google-site-verification" content="76_rKXgwMVIjd-axJC_1zPV9OS4mEjvtgjYOWVkAdnQ">
<link rel="preload" href="/assets/css/0.styles.60619e34.css" as="style"><link rel="preload" href="/assets/js/app.1779e102.js" as="script"><link rel="preload" href="/assets/js/3.2cfa8016.js" as="script"><link rel="preload" href="/assets/js/1731.9dbc593d.js" as="script">
<link rel="stylesheet" href="/assets/css/0.styles.60619e34.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">DevTut</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"> <a href="https://github.com/devtut/generate" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/javascript/" aria-current="page" class="sidebar-link">Disclaimer</a></li><li><a href="/javascript/getting-started-with-javascript.html" class="sidebar-link">Getting started with JavaScript</a></li><li><a href="/javascript/javascript-variables.html" class="sidebar-link">JavaScript Variables</a></li><li><a href="/javascript/built-in-constants.html" class="sidebar-link">Built-in Constants</a></li><li><a href="/javascript/comments.html" class="sidebar-link">Comments</a></li><li><a href="/javascript/console.html" class="sidebar-link">Console</a></li><li><a href="/javascript/datatypes-in-javascript.html" class="sidebar-link">Datatypes in Javascript</a></li><li><a href="/javascript/strings.html" class="sidebar-link">Strings</a></li><li><a href="/javascript/date.html" class="sidebar-link">Date</a></li><li><a href="/javascript/date-comparison.html" class="sidebar-link">Date Comparison</a></li><li><a href="/javascript/comparison-operations.html" class="sidebar-link">Comparison Operations</a></li><li><a href="/javascript/conditions.html" class="sidebar-link">Conditions</a></li><li><a href="/javascript/arrays.html" class="sidebar-link">Arrays</a></li><li><a href="/javascript/objects.html" class="sidebar-link">Objects</a></li><li><a href="/javascript/arithmetic-math.html" class="sidebar-link">Arithmetic (Math)</a></li><li><a href="/javascript/bitwise-operators.html" class="sidebar-link">Bitwise operators</a></li><li><a href="/javascript/constructor-functions.html" class="sidebar-link">Constructor functions</a></li><li><a href="/javascript/declarations-and-assignments.html" class="sidebar-link">Declarations and Assignments</a></li><li><a href="/javascript/loops.html" class="sidebar-link">Loops</a></li><li><a href="/javascript/functions.html" class="sidebar-link">Functions</a></li><li><a href="/javascript/functional-javascript.html" class="sidebar-link">Functional JavaScript</a></li><li><a href="/javascript/prototypes-objects.html" class="sidebar-link">Prototypes, objects</a></li><li><a href="/javascript/classes.html" class="sidebar-link">Classes</a></li><li><a href="/javascript/namespacing.html" class="sidebar-link">Namespacing</a></li><li><a href="/javascript/context-this.html" class="sidebar-link">Context (this)</a></li><li><a href="/javascript/setters-and-getters.html" class="sidebar-link">Setters and Getters</a></li><li><a href="/javascript/events.html" class="sidebar-link">Events</a></li><li><a href="/javascript/inheritance.html" class="sidebar-link">Inheritance</a></li><li><a href="/javascript/method-chaining.html" class="sidebar-link">Method Chaining</a></li><li><a href="/javascript/callbacks.html" class="sidebar-link">Callbacks</a></li><li><a href="/javascript/intervals-and-timeouts.html" class="sidebar-link">Intervals and Timeouts</a></li><li><a href="/javascript/regular-expressions.html" class="sidebar-link">Regular expressions</a></li><li><a href="/javascript/cookies.html" class="sidebar-link">Cookies</a></li><li><a href="/javascript/web-storage.html" class="sidebar-link">Web Storage</a></li><li><a href="/javascript/data-attributes.html" class="sidebar-link">Data attributes</a></li><li><a href="/javascript/json.html" class="sidebar-link">JSON</a></li><li><a href="/javascript/ajax.html" class="sidebar-link">AJAX</a></li><li><a href="/javascript/enumerations.html" class="sidebar-link">Enumerations</a></li><li><a href="/javascript/map.html" class="sidebar-link">Map</a></li><li><a href="/javascript/timestamps.html" class="sidebar-link">Timestamps</a></li><li><a href="/javascript/unary-operators.html" class="sidebar-link">Unary Operators</a></li><li><a href="/javascript/generators.html" class="sidebar-link">Generators</a></li><li><a href="/javascript/promises.html" class="sidebar-link">Promises</a></li><li><a href="/javascript/set.html" class="sidebar-link">Set</a></li><li><a href="/javascript/modals-prompts.html" class="sidebar-link">Modals - Prompts</a></li><li><a href="/javascript/execcommand-and-contenteditable.html" class="sidebar-link">execCommand and contenteditable</a></li><li><a href="/javascript/history.html" class="sidebar-link">History</a></li><li><a href="/javascript/navigator-object.html" class="sidebar-link">Navigator Object</a></li><li><a href="/javascript/bom-browser-object-model.html" class="sidebar-link">BOM (Browser Object Model)</a></li><li><a href="/javascript/the-event-loop.html" class="sidebar-link">The Event Loop</a></li><li><a href="/javascript/strict-mode.html" class="sidebar-link">Strict mode</a></li><li><a href="/javascript/custom-elements.html" class="sidebar-link">Custom Elements</a></li><li><a href="/javascript/data-manipulation.html" class="sidebar-link">Data Manipulation</a></li><li><a href="/javascript/binary-data.html" class="sidebar-link">Binary Data</a></li><li><a href="/javascript/template-literals.html" class="sidebar-link">Template Literals</a></li><li><a href="/javascript/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/javascript/scope.html" class="sidebar-link">Scope</a></li><li><a href="/javascript/modules.html" class="sidebar-link">Modules</a></li><li><a href="/javascript/screen.html" class="sidebar-link">Screen</a></li><li><a href="/javascript/variable-coercion-conversion.html" class="sidebar-link">Variable coercion/conversion</a></li><li><a href="/javascript/destructuring-assignment.html" class="sidebar-link">Destructuring assignment</a></li><li><a href="/javascript/websockets.html" class="sidebar-link">WebSockets</a></li><li><a href="/javascript/arrow-functions.html" class="sidebar-link">Arrow Functions</a></li><li><a href="/javascript/workers.html" class="sidebar-link">Workers</a></li><li><a href="/javascript/requestanimationframe.html" class="sidebar-link">requestAnimationFrame</a></li><li><a href="/javascript/creational-design-patterns.html" class="sidebar-link">Creational Design Patterns</a></li><li><a href="/javascript/detecting-browser.html" class="sidebar-link">Detecting browser</a></li><li><a href="/javascript/symbols.html" class="sidebar-link">Symbols</a></li><li><a href="/javascript/transpiling.html" class="sidebar-link">Transpiling</a></li><li><a href="/javascript/automatic-semicolon-insertion-asi.html" class="sidebar-link">Automatic Semicolon Insertion - ASI</a></li><li><a href="/javascript/localization.html" class="sidebar-link">Localization</a></li><li><a href="/javascript/geolocation.html" class="sidebar-link">Geolocation</a></li><li><a href="/javascript/indexeddb.html" class="sidebar-link">IndexedDB</a></li><li><a href="/javascript/modularization-techniques.html" class="sidebar-link">Modularization Techniques</a></li><li><a href="/javascript/proxy.html" class="sidebar-link">Proxy</a></li><li><a href="/javascript/postmessage-and-messageevent.html" class="sidebar-link">.postMessage() and MessageEvent</a></li><li><a href="/javascript/weakmap.html" class="sidebar-link">WeakMap</a></li><li><a href="/javascript/weakset.html" class="sidebar-link">WeakSet</a></li><li><a href="/javascript/escape-sequences.html" class="sidebar-link">Escape Sequences</a></li><li><a href="/javascript/behavioral-design-patterns.html" class="sidebar-link">Behavioral Design Patterns</a></li><li><a href="/javascript/server-sent-events.html" class="sidebar-link">Server-sent events</a></li><li><a href="/javascript/async-functions-async-await.html" class="sidebar-link">Async functions (async/await)</a></li><li><a href="/javascript/async-iterators.html" class="sidebar-link">Async Iterators</a></li><li><a href="/javascript/how-to-make-iterator-usable-inside-async-callback-function.html" class="sidebar-link">How to make iterator usable inside async callback function</a></li><li><a href="/javascript/tail-call-optimization.html" class="sidebar-link">Tail Call Optimization</a></li><li><a href="/javascript/bitwise-operators-real-world-examples-snippets.html" class="sidebar-link">Bitwise Operators - Real World Examples (snippets)</a></li><li><a href="/javascript/tilde.html" class="sidebar-link">Tilde ~</a></li><li><a href="/javascript/using-javascript-to-get-set-css-custom-variables.html" class="sidebar-link">Using javascript to get/set CSS custom variables</a></li><li><a href="/javascript/selection-api.html" class="sidebar-link">Selection API</a></li><li><a href="/javascript/file-api-blobs-and-filereaders.html" class="sidebar-link">File API, Blobs and FileReaders</a></li><li><a href="/javascript/notifications-api.html" class="sidebar-link">Notifications API</a></li><li><a href="/javascript/vibration-api.html" class="sidebar-link">Vibration API</a></li><li><a href="/javascript/battery-status-api.html" class="sidebar-link">Battery Status API</a></li><li><a href="/javascript/fluent-api.html" class="sidebar-link">Fluent API</a></li><li><a href="/javascript/web-cryptography-api.html" class="sidebar-link">Web Cryptography API</a></li><li><a href="/javascript/security-issues.html" class="sidebar-link">Security issues</a></li><li><a href="/javascript/same-origin-policy-cross-origin-communication.html" class="sidebar-link">Same Origin Policy & Cross-Origin Communication</a></li><li><a href="/javascript/error-handling.html" class="sidebar-link">Error Handling</a></li><li><a href="/javascript/global-error-handling-in-browsers.html" class="sidebar-link">Global error handling in browsers</a></li><li><a href="/javascript/debugging.html" aria-current="page" class="active sidebar-link">Debugging</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/javascript/debugging.html#interactive-interpreter-variables" class="sidebar-link">Interactive interpreter variables</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#breakpoints" class="sidebar-link">Breakpoints</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#using-setters-and-getters-to-find-what-changed-a-property" class="sidebar-link">Using setters and getters to find what changed a property</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#using-the-console" class="sidebar-link">Using the console</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#automatically-pausing-execution" class="sidebar-link">Automatically pausing execution</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#elements-inspector" class="sidebar-link">Elements inspector</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#stepping-through-code" class="sidebar-link">Stepping through code</a></li><li class="sidebar-sub-header"><a href="/javascript/debugging.html#break-when-a-function-is-called" class="sidebar-link">Break when a function is called</a></li></ul></li><li><a href="/javascript/unit-testing-javascript.html" class="sidebar-link">Unit Testing Javascript</a></li><li><a href="/javascript/evaluating-javascript.html" class="sidebar-link">Evaluating JavaScript</a></li><li><a href="/javascript/linters-ensuring-code-quality.html" class="sidebar-link">Linters - Ensuring code quality</a></li><li><a href="/javascript/anti-patterns.html" class="sidebar-link">Anti-patterns</a></li><li><a href="/javascript/performance-tips.html" class="sidebar-link">Performance Tips</a></li><li><a href="/javascript/memory-efficiency.html" class="sidebar-link">Memory efficiency</a></li><li><a href="/javascript/reserved-keywords.html" class="sidebar-link">Reserved Keywords</a></li><li><a href="/javascript/contributors.html" class="sidebar-link">The Contributors</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="debugging"><a href="#debugging" class="header-anchor">#</a> Debugging</h1> <h2 id="interactive-interpreter-variables"><a href="#interactive-interpreter-variables" class="header-anchor">#</a> Interactive interpreter variables</h2> <p>Note that these only work in the developer tools of certain browsers.</p> <p><code>$_</code> gives you the value of whatever expression was evaluated last.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token string">"foo"</span> <span class="token comment">// "foo"</span>
$_ <span class="token comment">// "foo"</span>
</code></pre></div><p><code>$0</code> refers to the DOM element currently selected in the Inspector. So if <code><div id="foo"></code> is highlighted:</p> <div class="language-js extra-class"><pre class="language-js"><code>$<span class="token number">0</span> <span class="token comment">// <div id="foo"></span>
$<span class="token number">0.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'id'</span><span class="token punctuation">)</span> <span class="token comment">// "foo"</span>
</code></pre></div><p><code>$1</code> refers to the element previously selected, <code>$2</code> to the one selected before that, and so forth for <code>$3</code> and <code>$4</code>.</p> <p>To get a collection of elements matching a CSS selector, use <code>$$(selector)</code>. This is essentially a shortcut for <code>document.querySelectorAll</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> images <span class="token operator">=</span> <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Returns an array or a nodelist of all matching elements</span>
</code></pre></div><table><thead><tr><th></th> <th>$_</th> <th>$()¹</th> <th>$$()</th> <th>$0</th> <th>$1</th> <th>$2</th> <th>$3</th> <th>$4</th></tr></thead> <tbody><tr><td>Opera</td> <td>15+</td> <td>11+</td> <td>11+</td> <td>11+</td> <td>11+</td> <td>15+</td> <td>15+</td> <td>15+</td></tr> <tr><td>Chrome</td> <td>22+</td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td></tr> <tr><td>Firefox</td> <td>39+</td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>✓</strong></td> <td><strong>×</strong></td> <td><strong>×</strong></td> <td><strong>×</strong></td> <td><strong>×</strong></td></tr> <tr><td>IE</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td> <td>11</td></tr> <tr><td>Safari</td> <td>6.1+</td> <td>4+</td> <td>4+</td> <td>4+</td> <td>4+</td> <td>4+</td> <td>4+</td> <td>4+</td></tr></tbody></table> <p>¹ <sub>alias to either <code>document.getElementById</code> or <code>document.querySelector</code></sub></p> <h2 id="breakpoints"><a href="#breakpoints" class="header-anchor">#</a> Breakpoints</h2> <p>Breakpoints pause your program once execution reaches a certain point. You can then step through the program line by line, observing its execution and inspecting the contents of your variables.</p> <p>There are three ways of creating breakpoints.</p> <ol><li>From code, using the <code>debugger;</code> statement.</li> <li>From the browser, using the Developer Tools.</li> <li>From an Integrated Development Environment (IDE).</li></ol> <h3 id="debugger-statement"><a href="#debugger-statement" class="header-anchor">#</a> Debugger Statement</h3> <p>You can place a <code>debugger;</code> statement anywhere in your JavaScript code. Once the JS interpreter reaches that line, it will stop the script execution, allowing you to inspect variables and step through your code.</p> <h3 id="developer-tools"><a href="#developer-tools" class="header-anchor">#</a> Developer Tools</h3> <p>The second option is to add a breakpoint directly into the code from the browser's Developer Tools.</p> <h3 id="opening-the-developer-tools"><a href="#opening-the-developer-tools" class="header-anchor">#</a> Opening the Developer Tools</h3> <h3 id="chrome-or-firefox"><a href="#chrome-or-firefox" class="header-anchor">#</a> Chrome or Firefox</h3> <ol><li>Press <kbd>F12</kbd> to open Developer Tools</li> <li>Switch to the Sources tab (Chrome) or Debugger tab (Firefox)</li> <li>Press <kbd>Ctrl</kbd>+<kbd>P</kbd> and type the name of your JavaScript file</li> <li>Press <kbd>Enter</kbd> to open it.</li></ol> <h3 id="internet-explorer-or-edge"><a href="#internet-explorer-or-edge" class="header-anchor">#</a> Internet Explorer or Edge</h3> <ol><li>Press <kbd>F12</kbd> to open Developer Tools</li> <li>Switch to the Debugger tab.</li> <li>Use the folder icon near the upper-left corner of the window to open a file-selection pane; you can find your JavaScript file there.</li></ol> <h3 id="safari"><a href="#safari" class="header-anchor">#</a> Safari</h3> <ol><li>Press <kbd>Command</kbd>+<kbd>Option</kbd>+<kbd>C</kbd> to open Developer Tools</li> <li>Switch to the Resources tab</li> <li>Open the "Scripts" folder in the left-side panel</li> <li>Select your JavaScript file.</li></ol> <h3 id="adding-a-breakpoint-from-the-developer-tools"><a href="#adding-a-breakpoint-from-the-developer-tools" class="header-anchor">#</a> Adding a breakpoint from the Developer Tools</h3> <p>Once you have your JavaScript file open in Developer Tools, you can click a line number to place a breakpoint. The next time your program runs, it will pause there.</p> <p><strong>Note about Minified Sources:</strong> If your source is minified, you can Pretty Print it (convert to readable format). In Chrome, this is done by clicking on the <code>{}</code> button in the bottom right corner of the source code viewer.</p> <h3 id="ides"><a href="#ides" class="header-anchor">#</a> IDEs</h3> <h3 id="visual-studio-code-vsc"><a href="#visual-studio-code-vsc" class="header-anchor">#</a> Visual Studio Code (VSC)</h3> <p>VSC has <a href="https://code.visualstudio.com/docs/editor/debugging" target="_blank" rel="noopener noreferrer">built-in support<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for debugging JavaScript.</p> <ol><li>Click the Debug button on the left or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd></li> <li>If not already done, create a launch configuration file (<code>launch.json</code>) by pressing the gear icon.</li> <li>Run the code from VSC by pressing the green play button or hit <kbd>F5</kbd>.</li></ol> <h3 id="adding-a-breakpoint-in-vsc"><a href="#adding-a-breakpoint-in-vsc" class="header-anchor">#</a> Adding a breakpoint in VSC</h3> <p>Click next to the line number in your JavaScript source file to add a breakpoint (it will be marked red). To delete the breakpoint, click the red circle again.</p> <p><strong>Tip:</strong> You can also utilise the conditional breakpoints in browser's dev tools. These help in skipping unnecessary breaks in execution. Example scenario: you want to examine a variable in a loop exactly at 5<sup>th</sup> iteration.</p> <p><a href="https://i.stack.imgur.com/iz3Mn.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/iz3Mn.png" alt="enter image description here"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="using-setters-and-getters-to-find-what-changed-a-property"><a href="#using-setters-and-getters-to-find-what-changed-a-property" class="header-anchor">#</a> Using setters and getters to find what changed a property</h2> <p>Let's say you have an object like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">'Peter'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Later in your code, you try to access <code>myObject.name</code> and you get <strong>George</strong> instead of <strong>Peter</strong>. You start wondering who changed it and where exactly it was changed. There is a way to place a <code>debugger</code> (or something else) on every set (every time someone does <code>myObject.name = 'something'</code>):</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> myObject <span class="token operator">=</span> <span class="token punctuation">{</span>
_name<span class="token operator">:</span> <span class="token string">'Peter'</span><span class="token punctuation">,</span>
<span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">debugger</span><span class="token punctuation">;</span><span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token operator">=</span>name<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Note that we renamed <code>name</code> to <code>_name</code> and we are going to define a setter and a getter for <code>name</code>.</p> <p><code>set name</code> is the setter. That is a sweet spot where you can place <code>debugger</code>, <code>console.trace()</code>, or anything else you need for debugging. The setter will set the value for name in <code>_name</code>. The getter (the <code>get name</code> part) will read the value from there. Now we have a fully functional object with debugging functionality.</p> <p>Most of the time, though, the object that gets changed is not under our control. Fortunately, we can define setters and getters on <strong>existing</strong> objects to debug them.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// First, save the name to _name, because we are going to use name for setter/getter</span>
otherObject<span class="token punctuation">.</span>_name <span class="token operator">=</span> otherObject<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token comment">// Create setter and getter</span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>otherObject<span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token function-variable function">set</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">debugger</span><span class="token punctuation">;</span><span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> name<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">get</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Check out <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set" target="_blank" rel="noopener noreferrer">setters<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get" target="_blank" rel="noopener noreferrer">getters<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> at MDN for more information.</p> <p>Browser support for setters/getters:</p> <table><thead><tr><th></th> <th>Chrome</th> <th>Firefox</th> <th>IE</th> <th>Opera</th> <th>Safari</th> <th>Mobile</th></tr></thead> <tbody><tr><td>Version</td> <td>1</td> <td>2.0</td> <td>9</td> <td>9.5</td> <td>3</td> <td>all</td></tr></tbody></table> <h2 id="using-the-console"><a href="#using-the-console" class="header-anchor">#</a> Using the console</h2> <p>In many environments, you have access to a global <code>console</code> object that contains some basic methods for communicating with standard output devices. Most commonly, this will be the browser's JavaScript console (see <a href="https://developers.google.com/web/tools/chrome-devtools/debug/console/?utm_source=dcc" target="_blank" rel="noopener noreferrer">Chrome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console" target="_blank" rel="noopener noreferrer">Firefox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://developer.apple.com/safari/tools/" target="_blank" rel="noopener noreferrer">Safari<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, and <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/console/" target="_blank" rel="noopener noreferrer">Edge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for more information).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// At its simplest, you can 'log' a string</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello, World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// You can also log any number of comma-separated values</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">,</span> <span class="token string">"World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// You can also use string substitution</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"%s %s"</span><span class="token punctuation">,</span> <span class="token string">"Hello"</span><span class="token punctuation">,</span> <span class="token string">"World!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// You can also log any variable that exist in the same scope</span>
<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>You can use different console methods to highlight your output in different ways. Other methods are also useful for more advanced debugging.</p> <p>For more documentation, information on compatibility, and instructions on how to open your browser's console, see the <a href="http://stackoverflow.com/documentation/javascript/2288/console" target="_blank" rel="noopener noreferrer">Console<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> topic.</p> <p>Note: if you need to support IE9, either remove <code>console.log</code> or wrap its calls as follows, because <code>console</code> is undefined until the Developer Tools are opened:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>console<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//IE9 workaround</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="automatically-pausing-execution"><a href="#automatically-pausing-execution" class="header-anchor">#</a> Automatically pausing execution</h2> <p>In Google Chrome, you can pause execution without needing to place breakpoints.</p> <p><a href="https://i.stack.imgur.com/OoThh.png" target="_blank" rel="noopener noreferrer"><img src="https://i.stack.imgur.com/OoThh.png" alt="Pause on Exception"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Pause on Exception:</strong> While this button is toggled on, if your program hits an unhandled exception, the program will pause as if it had hit a breakpoint. The button can be found near Execution Controls and is useful for locating errors.</p> <p>You can also pause execution when an HTML tag (DOM node) is modified, or when its attributes are changed. To do that, right click the DOM node on the Elements tab and select "Break on...".</p> <h2 id="elements-inspector"><a href="#elements-inspector" class="header-anchor">#</a> Elements inspector</h2> <p>Clicking the <a href="http://i.stack.imgur.com/uD8b5.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/uD8b5.png" alt="enter image description here"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Select an element in the page to inspect it</strong> button in the upper left corner of the Elements tab in Chrome or Inspector tab in Firefox, available from Developer Tools, and then clicking on a element of the page highlights the element and <a href="http://stackoverflow.com/documentation/javascript/642/debugging/2317/interactive-interpreter-variables#t=201607211329474646179" target="_blank" rel="noopener noreferrer">assigns it to the <code>$0</code> variable<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>Elements inspector can be used in variety of ways, for example:</p> <ol><li>You can check if your JS is manipulating DOM the way you expect it to,
</li><li>You can more easily debug your CSS, when seeing which rules affect the element<br>
(<strong>Styles</strong> tab in Chrome)</li> <li>You can play around with CSS and HTML without reloading the page.</li></ol> <p>Also, Chrome remembers last 5 selections in the Elements tab. <code>$0</code> is the current selection, while <code>$1</code> is the previous selection. You can go up to <code>$4</code>. That way you can easily debug multiple nodes without constantly switching selection to them.</p> <p>You can read more at <a href="https://developers.google.com/web/tools/chrome-devtools/debug/command-line/command-line-reference#section-1" target="_blank" rel="noopener noreferrer">Google Developers<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="stepping-through-code"><a href="#stepping-through-code" class="header-anchor">#</a> Stepping through code</h2> <p>Once you've paused execution on a breakpoint, you may want to follow execution line-by-line to observe what happens. <a href="http://stackoverflow.com/documentation/javascript/642/debugging/2131/breakpoints" target="_blank" rel="noopener noreferrer">Open your browser's Developer Tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> and look for the Execution Control icons. (This example uses the icons in Google Chrome, but they'll be similar in other browsers.)</p> <p><a href="http://i.stack.imgur.com/VWoyZ.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/VWoyZ.png" alt="Resume"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Resume:</strong> Unpause execution. Shorcut:<kbd>F8</kbd>(Chrome, Firefox)</p> <p><a href="http://i.stack.imgur.com/ljs8I.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/ljs8I.png" alt="Step Over"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Step Over:</strong> Run the next line of code. If that line contains a function call, run the whole function and move to the next line, rather than jumping to wherever the function is defined. Shortcut : <kbd>F10</kbd>(Chrome, Firefox, IE/Edge), <kbd>F6</kbd>(Safari)</p> <p><a href="http://i.stack.imgur.com/tpcRp.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/tpcRp.png" alt="Step Into"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Step Into:</strong> Run the next line of code. If that line contains a function call, jump into the function and pause there. Shortcut : <kbd>F11</kbd>(Chrome, Firefox, IE/Edge), <kbd>F7</kbd>(Safari)</p> <p><a href="http://i.stack.imgur.com/Pupr4.png" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/Pupr4.png" alt="Step Out"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <strong>Step Out:</strong> Run the rest of the current function, jump back to where the function was called from, and pause at the next statement there. Shortcut : <kbd>Shift</kbd> + <kbd>F11</kbd>(Chrome, Firefox, IE/Edge), <kbd>F8</kbd>(Safari)</p> <p>Use these in conjunction with the <strong>Call Stack</strong>, which will tell you which function you're currently inside of, which function called that function, and so forth.</p> <p>See Google's guide on <a href="https://developers.google.com/web/tools/chrome-devtools/debug/breakpoints/step-code?hl=en" target="_blank" rel="noopener noreferrer">"How to Step Through the Code"<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for more details and advice.</p> <p>Links to browser shortcut key documentation:</p> <ul><li><a href="https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en#keyboard-shortcuts-by-panel" target="_blank" rel="noopener noreferrer">Chrome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/Keyboard_shortcuts" target="_blank" rel="noopener noreferrer">Firefox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://msdn.microsoft.com/en-us/library/dd565630(v=vs.85).aspx#debugMode" target="_blank" rel="noopener noreferrer">IE<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/developer-tools-keyboard-shortcuts/" target="_blank" rel="noopener noreferrer">Edge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/KeyboardShortcuts/KeyboardShortcuts.html" target="_blank" rel="noopener noreferrer">Safari<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h2 id="break-when-a-function-is-called"><a href="#break-when-a-function-is-called" class="header-anchor">#</a> Break when a function is called</h2> <p>For named (non-anonymous) functions, you can break when the function is executed.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">debug</span><span class="token punctuation">(</span>functionName<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>The next time <code>functionName</code> function runs, the debugger will stop on its first line.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/devtut/generate/edit/master/docs/javascript/debugging.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/javascript/global-error-handling-in-browsers.html" class="prev">
Global error handling in browsers
</a></span> <span class="next"><a href="/javascript/unit-testing-javascript.html">
Unit Testing Javascript
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.1779e102.js" defer></script><script src="/assets/js/3.2cfa8016.js" defer></script><script src="/assets/js/1731.9dbc593d.js" defer></script>
</body>
</html>