{"id":68186,"date":"2019-08-27T12:57:30","date_gmt":"2019-08-27T07:27:30","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=68186"},"modified":"2019-08-27T12:57:30","modified_gmt":"2019-08-27T07:27:30","slug":"javascript-debugging-and-testing","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/","title":{"rendered":"JavaScript Debugging and Testing &#8211; Ultimate tutorial to grab major concepts"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1435,&quot;href&quot;:&quot;https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Time_travel&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251007203751\\\/https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/Time_travel&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 07:02:37&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-19 09:24:59&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-01-23 08:12:31&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-02-03 23:29:48&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-05 17:02:12&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-15 05:59:06&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-21 06:03:00&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-05-20 19:06:18&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-05-20 19:06:18&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Every time you write new code, most probably you face an error of some kind. After everything we learned in JavaScript so far, you must be wondering if you can test your code. In our previous <a href=\"https:\/\/data-flair.training\/blogs\/javascript-errors\/\"><em><strong>tutorial on JavaScript Errors<\/strong><\/em><\/a>, we discussed various errors you may encounter while programming. But how do you know where the error occurred? Because you can\u2019t resolve any issue if you don\u2019t recognize the reason for it. In a complex application, you need a sophisticated technique to test your code, improving its efficiency. That&#8217;s where JavaScript debugging comes in the picture.<\/p>\n<p><em>The process of searching for the errors and finding them is called debugging<\/em>. Debugging JavaScript code is difficult because the browser doesn\u2019t show any error message or any indication to the location of the error. Fortunately, all modern browsers come with a built-in JavaScript debugger you can turn on and off. You can also set breakpoints and examine variables during the code execution. This tutorial explains different approaches to tackle the problem.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68629\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png\" alt=\"JavaScript Debugging and Testing Tutorial\" width=\"802\" height=\"420\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png 802w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing-150x79.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing-300x157.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing-768x402.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing-520x272.png 520w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/a><\/p>\n<h2>Debugging and Testing JavaScript<\/h2>\n<h3>The console.log() method<\/h3>\n<p>We used this method in many of our previous tutorials: working with the Browser Console. You can easily open the console by right-clicking on the page, then selecting the <strong>Inspect<\/strong> tab. Or you can use the shortcuts <strong>Ctrl+Shift+I<\/strong> or <strong>F12<\/strong> for the same purpose. Let\u2019s write a small program to get an overview of how a console works. Open a blank tab by typing <strong>about:blank<\/strong> in the address bar, open the console and start coding.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var var1 = \"DataFlair\"\r\nvar var2 = 2019\r\nvar var3 = var1 + var2\r\nconsole.log(var3) \/\/runs effortlessly\r\n\/\/DataFlair2019\r\nundefined\r\nconsole.log(var4) \/\/error detected\r\n\/*Uncaught ReferenceError: var4 is not defined\r\n    at &lt;anonymous&gt;:1:13*\/\r\n\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68192 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_.jpg\" alt=\"console.log - JavaScript Debugging and Testing\" width=\"1300\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/console.log_-520x296.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<h3>Setting Breakpoints<\/h3>\n<p>The above method is only practical if you are working on a small program. In a complicated program, it won\u2019t be reliable. The alternate you have here is that you can set breakpoints to analyze your code. At each breakpoint, JavaScript stops executing, allowing you to examine the JavaScript values. You can resume execution after doing so (usually with a play button). The steps to add a breakpoint in a document is as follows:<\/p>\n<ol>\n<li>Open your HTML file in the browser and use any of the shortcuts discussed above.<\/li>\n<li>Click on the Source tab and open the file containing the line of code where you want to add a break.<\/li>\n<li>Go to the specific line of code. When you click on it or the line number column (on the left of the line of code), a blue icon appears on top of the line number column.<\/li>\n<\/ol>\n<p>The code below sets a breakpoint in the code with this approach.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;body&gt;\r\n        &lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n        &lt;p&gt;Breakpoint. Resume after examining...&lt;\/p&gt;\r\n        &lt;!-- we want to add a breakpoint here--&gt;\r\n        &lt;p&gt;&lt;\/p&gt;\r\n\r\n        &lt;script&gt;\r\ndocument.querySelectorAll('p')[1].innerHTML = \"Executing the rest of the code\"\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68193\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint.jpg\" alt=\"breakpoint - JavaScript Debugging and Testing\" width=\"1300\" height=\"744\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-300x172.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-768x440.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-1024x586.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-520x298.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><strong>Output (before continuing):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68194 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before.jpg\" alt=\"breakpoint output before - JavaScript Debugging and Testing\" width=\"1298\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before.jpg 1298w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before-768x439.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before-1024x585.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-before-520x297.jpg 520w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/a><\/p>\n<p><strong>Output (after pressing F8 or clicking the play button):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68195 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after.jpg\" alt=\"breakpoint output after - JavaScript Debugging and Testing\" width=\"1299\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after.jpg 1299w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/breakpoint-output-after-520x297.jpg 520w\" sizes=\"auto, (max-width: 1299px) 100vw, 1299px\" \/><\/a><\/p>\n<h3>The debugger keyword<\/h3>\n<p>In JavaScript, the <strong>debugger<\/strong> keyword stops the execution and if available, calls the debugging function. The keyword works the same way as setting a breakpoint. In the absence of debugging, the debugger statement has no effect. With the debugger turned on, this code stops executing when it encounters a debugger statement.<\/p>\n<p>The following code generates the same result as the one above. The only noticeable difference is in the Source tab. Observe all the differences in the two approaches to understand how they work.<\/p>\n<p><strong>Code:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;html&gt;\r\n    &lt;body&gt;\r\n        &lt;h1&gt;DataFlair&lt;\/h1&gt;\r\n        &lt;p&gt;&lt;\/p&gt;\r\n        &lt;p&gt;&lt;\/p&gt;\r\n\r\n        &lt;script&gt;\r\n        var para = document.querySelectorAll('p')\r\n        para[0].innerHTML = \"Breakpoint. Resume after examining...\"\r\n                \/\/debugger statement: code execution pauses here\r\n        debugger;\r\n            para[1].innerHTML = \"Executing the rest of the code\"\r\n        &lt;\/script&gt;\r\n\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Screenshot:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68196\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger.jpg\" alt=\"debugger - JavaScript Debugging and Testing\" width=\"1300\" height=\"738\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-150x85.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-300x170.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-768x436.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-1024x581.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-520x295.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><strong>Output (before continuing):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"img-gray-border aligncenter wp-image-68197 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before.jpg\" alt=\"debugger output before \" width=\"1300\" height=\"741\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-before-520x296.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><strong>Output (after pressing F8 or clicking the play button):<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-68198\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after.jpg\" alt=\"debugger output after\" width=\"1300\" height=\"742\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after.jpg 1300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after-150x86.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after-300x171.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after-768x438.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after-1024x584.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/debugger-output-after-520x297.jpg 520w\" sizes=\"auto, (max-width: 1300px) 100vw, 1300px\" \/><\/a><\/p>\n<p><strong>Note:<\/strong>\u00a0The debugger will only pause the execution while working with the console. Thus, when you run the program in your browser, open the Browser Console, and then refresh the page.<\/p>\n<h3>Debugging Tools in JavaScript<\/h3>\n<p>Some of the most popular debugging tools available to the developers are as follows:<\/p>\n<h4>1. Cypress.io<\/h4>\n<p>This is a powerful open-source, front-end testing tool that allows us to debug JavaScript applications rather easily. This is the most straightforward tool to set up, write, run, and debug test codes in JavaScript. Cypress.io provides the developer with amazing features, including <a href=\"https:\/\/en.wikipedia.org\/wiki\/Time_travel\">time travel<\/a> (taking snapshots as tests run) and real-time reloading. This framework is easy to use, with polished documentation.<\/p>\n<p><em><strong>Learn about different types of JavaScript Applications in <a href=\"https:\/\/data-flair.training\/blogs\/javascript-architecture\/\">JavaScript Architecture Tutorial<\/a><\/strong><\/em><\/p>\n<h4>2. Chrome DevTools<\/h4>\n<p>This is the tool we\u2019ve been using in all our programs; we are familiar with it. Google Chrome DevTools is a set of profiling, web authoring, and debugging tools. You can use these tools to quickly and efficiently debug JavaScript code right from the Chrome browser (they are inbuilt). You get to interact with HTML, CSS, and JavaScript; all from the browser by merely clicking the Inspect Element button.<\/p>\n<h4>3. Mocha<\/h4>\n<p>It is a NodeJS dependent test framework for unit and integration testing. It is lightweight and easy to use, with numerous features like browser support, timeout support, etc. Being lightweight, it doesn\u2019t demand extreme computer resources, boosting the speed of testing.<\/p>\n<h2>Summary<\/h2>\n<p>In this JavaScript tutorial, we discussed the various techniques for debugging and testing our JavaScript code. It is a crucial topic to learn if you want to develop new applications. The knowledge of this concept will help you in detecting the errors in your application. I suggest that you read this tutorial at least twice before moving on to the next one. Try all the codes explained in your browser and see what happens. Refer this JavaScript debugging tutorial or ask any query if you get stuck.<\/p>\n<p><em><strong>Did you checked our Latest <a href=\"https:\/\/data-flair.training\/blogs\/javascript-project-to-do-list\/\">JavaScript Project on To-do List<\/a><\/strong><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every time you write new code, most probably you face an error of some kind. After everything we learned in JavaScript so far, you must be wondering if you can test your code. In&#46;&#46;&#46;<\/p>\n","protected":false},"author":7,"featured_media":68629,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[20905,20904,20901,20902,20903],"class_list":["post-68186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-console-log-method","tag-debugger-keyword","tag-javascript-debugging","tag-javascript-debugging-and-testing","tag-javascript-debugging-tools"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Debugging and Testing - Ultimate tutorial to grab major concepts - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about JavaScript debugging and testing in a detailed manner with console.log() method, setting breakpoints, debugger keyword &amp; debugging tools in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Debugging and Testing - Ultimate tutorial to grab major concepts - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about JavaScript debugging and testing in a detailed manner with console.log() method, setting breakpoints, debugger keyword &amp; debugging tools in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-27T07:27:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png\" \/>\n\t<meta property=\"og:image:width\" content=\"802\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Debugging and Testing - Ultimate tutorial to grab major concepts - DataFlair","description":"Learn about JavaScript debugging and testing in a detailed manner with console.log() method, setting breakpoints, debugger keyword & debugging tools in JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Debugging and Testing - Ultimate tutorial to grab major concepts - DataFlair","og_description":"Learn about JavaScript debugging and testing in a detailed manner with console.log() method, setting breakpoints, debugger keyword & debugging tools in JavaScript.","og_url":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-08-27T07:27:30+00:00","og_image":[{"width":802,"height":420,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png","type":"image\/png"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd"},"headline":"JavaScript Debugging and Testing &#8211; Ultimate tutorial to grab major concepts","datePublished":"2019-08-27T07:27:30+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/"},"wordCount":885,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png","keywords":["console.log() method","debugger keyword","JavaScript Debugging","JavaScript Debugging and Testing","JavaScript Debugging Tools"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/","url":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/","name":"JavaScript Debugging and Testing - Ultimate tutorial to grab major concepts - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png","datePublished":"2019-08-27T07:27:30+00:00","description":"Learn about JavaScript debugging and testing in a detailed manner with console.log() method, setting breakpoints, debugger keyword & debugging tools in JavaScript.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/08\/JavaScript-Debugging-and-Testing.png","width":802,"height":420,"caption":"JavaScript Debugging and Testing Tutorial"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/javascript-debugging-and-testing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Debugging and Testing &#8211; Ultimate tutorial to grab major concepts"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/beb0cab24b7aa54423a3b50e669a9dcd","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c322416204232f4dd97ef3901b0a499a5d34d7ba7fe333f4bfe53a907873d293?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team specializes in creating clear, actionable content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Backed by industry expertise, we make learning easy and career-oriented for beginners and pros alike.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam3\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=68186"}],"version-history":[{"count":6,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68186\/revisions"}],"predecessor-version":[{"id":68630,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/68186\/revisions\/68630"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/68629"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=68186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=68186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=68186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}