{"id":1406,"date":"2019-07-27T19:42:12","date_gmt":"2019-07-27T19:42:12","guid":{"rendered":"https:\/\/www.copahost.com\/blog\/?p=1406"},"modified":"2023-06-26T11:31:00","modified_gmt":"2023-06-26T11:31:00","slug":"debug-javascript-chrome","status":"publish","type":"post","link":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/","title":{"rendered":"How to debug Javascript in Chrome: Examples and screens"},"content":{"rendered":"<p>JavaScript is one of the most complicated languages in the programming world. It is an asynchronous programming language that can make it very complex unless we have proper knowledge of it. How to debug Javascript in Chrome seems to be one of the most difficult steps of coding javascript. Sometimes, it is so hard, we can&#8217;t even find what the <a href=\"https:\/\/www.copahost.com\/blog\/404-error-code\/\">error is because the code<\/a> is working fine. Yes, many times, we think there should be an error but actually, there is not. In this article, we will see an example of such code which is working but not according to our requirements, and then we will use devtools provided by google&#8217;s chrome browser to solve the issue.<\/p>\n<h3>Topics in this article<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#topic1\">Using chrome console for a quick debugging<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#topic2\">How to debug Javascript in Chrome using devtools (extended method)<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#topic3\">Conclusion<\/a><\/li>\n<\/ul>\n<h3>Using console for a quick debugging<\/h3>\n<p>When we write code in <a href=\"https:\/\/www.copahost.com\/blog\/what-is-html\/\">HTML<\/a> and Javascript, we use a <a href=\"https:\/\/www.copahost.com\/blog\/the-difference-between-web-browser-and-web-server\/\">browser<\/a> to see the results. In the google&#8217;s chrome browser, it&#8217;s devtools provide console which shows every error that exists in our javascript code. This makes it easy to debug the code. Let&#8217;s understand the use of console with an example.<\/p>\n<p>The following code has two input fields and a button. It is supposed to work in a way that when the button is clicked, the data from the input fields is displayed below the button.<\/p>\n<pre class=\"lang:default decode:true\">&lt;html&gt;\n    &lt;body&gt;\n        username:&lt;br&gt;\n        &lt;input type=\"text\" id=\"username\"&gt;&lt;br&gt;&lt;br&gt;\n        email:&lt;br&gt;\n        &lt;input type=\"text\" id=\"email\"&gt;&lt;br&gt;&lt;br&gt;\n        &lt;button onclick=\"login()\"&gt;Submit&lt;\/button&gt;&lt;br&gt;\n        &lt;p&gt;&lt;\/p&gt;\n    &lt;\/body&gt;\n    &lt;script&gt;\n        function logien(){\n            var username = document.getElementById('username').value\n            var email = document.getElementById('email').value\n            document.getElementById(\"result\").innerHTML = \"Username is \" + username + \" and email is \" + email\n        }\n        \n    &lt;\/script&gt;\n\n&lt;\/html&gt;<\/pre>\n<p>The output is:<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-1430\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new1.png\" alt=\"\" width=\"242\" height=\"216\" \/><\/p>\n<p>But when we click the button, nothing happens. The data is not displayed below the button. There is some error in the code. Let&#8217;s check the console by pressing <strong>control+shift+I <\/strong>for windows\/linux or <strong>command+option+I <\/strong>for mac.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1431\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new2.png\" alt=\"\" width=\"807\" height=\"199\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new2.png 807w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new2-300x74.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new2-768x189.png 768w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><\/p>\n<p>We can see an error message is displayed in the console. \u00a0It says that login is not defined. We named the function in the <strong>onclick<\/strong> attribute of the button as login. So now we know where is the problem. The task how to debug Javascript in Chrome can be done by this quick method.<\/p>\n<p>In the script tag, there is a spelling mistake when we defined the function.<\/p>\n<pre class=\"lang:default decode:true\">function logien(){<\/pre>\n<p>Let&#8217;s correct the mistake. Let&#8217;s reload the page. Then, fill the details again and click the button.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1432\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new3.png\" alt=\"\" width=\"807\" height=\"271\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new3.png 807w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new3-300x101.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/new3-768x258.png 768w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><\/p>\n<p>We can also see that there are no errors in the console.<br \/>\n<a id=\"topic2\"><\/a><\/p>\n<h3>How to debug Javascript in Chrome using devtools (extended method)<\/h3>\n<p>We will learn how to debug a simple code in javascript using chrome <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\" rel=\"noopener noreferrer\">devtools<\/a>. The example consists of a simple HTML code in which we input two numbers and click the button to get their sum.<\/p>\n<h4>1. Find the bug<\/h4>\n<p>To start the debugging process, first of all, we have to find the bug. We have to find what is the problem we are facing. Observe the following <a href=\"https:\/\/www.copahost.com\/blog\/html-image\/\">image<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1407 size-full\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q1.png\" alt=\"debugging javascript in chrome\" width=\"326\" height=\"308\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q1.png 326w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q1-300x283.png 300w\" sizes=\"(max-width: 326px) 100vw, 326px\" \/><\/p>\n<p>Clearly, the output is wrong. 1 added to 2 should be 3 but it shows 12. We have our bug now.<\/p>\n<h4>2. Getting familiar with the Sources panel UI<\/h4>\n<p>We can open the chrome devtools by pressing <strong><kbd>Control<\/kbd>+<kbd>Shift<\/kbd>+<\/strong><kbd><strong>I<\/strong> for windows\/linux or <strong><kbd>Command<\/kbd>+<kbd>Option<\/kbd>+<\/strong><kbd><strong>I<\/strong> for mac. A new window will pop up from the right.<\/kbd><\/kbd><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1425\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq.png\" alt=\"\" width=\"621\" height=\"294\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq.png 621w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq-300x142.png 300w\" sizes=\"(max-width: 621px) 100vw, 621px\" \/><\/p>\n<p>The devtools provide lots of options like changing <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/\">CSS<\/a>, monitoring networks, checking performance, etc. But what we need is sources UI panel. We can open them by click on the sources tab for that.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1426\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq1.png\" alt=\"\" width=\"807\" height=\"778\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq1.png 807w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq1-300x289.png 300w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/qq1-768x740.png 768w\" sizes=\"(max-width: 807px) 100vw, 807px\" \/><\/p>\n<p>The sources UI has three parts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1410\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q4.png\" alt=\"\" width=\"595\" height=\"485\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q4.png 595w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q4-300x245.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/p>\n<p>These three parts are:<\/p>\n<ol>\n<li>The File Navigator pane<\/li>\n<li>The Code Editor pane.<\/li>\n<li>The Javascript Debugging pane<\/li>\n<\/ol>\n<p>The File Navigator contains all the files requested by the page. The selected file from the File Navigator appears on the Code Editor pane. The JavaScript Debugging pane provides various tools for debugging.<\/p>\n<h4>3. Using breakpoints<\/h4>\n<p>The classic approach of debugging is using console.log() where the bug seems to be. It can solve the problem but there is a faster approach. We can use breakpoints instead of console.log(). We can use breakpoints to pause the code and examine it in-between execution. This can solve many problems and it is very fast. While using console.log(), we have to open code manually and insert console.log() in it. But the breakpoints are provided by devtools and can be applied very easily.<\/p>\n<p>Let&#8217;s stop and think for a moment about the program we used to add two <a href=\"https:\/\/www.copahost.com\/blog\/javascript-parsefloat\/\">numbers<\/a>. We can make a guess that everything was correct until we pressed that click to add those two numbers. By using the breakpoints, we should pause the code before the click event and examine, if we can find any problem there. We can use EventListener breakpoints to do that.<\/p>\n<ol>\n<li>In the Javascript debugging pane, expand the EventListener breakpoints section. We can find many expandable event categories there.<\/li>\n<li>Find the mouse category and expand it.<\/li>\n<li>Check the click option.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1411\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q5.png\" alt=\"\" width=\"762\" height=\"245\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q5.png 762w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q5-300x96.png 300w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/p>\n<p>Now every click event will be paused. Once again, type 1 and 2 in input fields and press the button. The <a href=\"https:\/\/www.copahost.com\/blog\/html-table\/\">HTML<\/a> code will get pause immediately after the button is clicked. Observe line number 15 which is highlighted because the code is paused at that very line.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1423 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q6.png\" alt=\"source code html debug in chrome\" width=\"489\" height=\"594\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q6.png 489w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q6-247x300.png 247w\" sizes=\"(max-width: 489px) 100vw, 489px\" \/><\/p>\n<h4>4. Stepping through the code<\/h4>\n<p>In the last step, we paused our code immediately after the <a href=\"https:\/\/www.copahost.com\/blog\/html-button\/\">button<\/a> was clicked. The code was paused at the following line of code.<\/p>\n<pre class=\"lang:default decode:true\">if (inputsAreEmpty()) {<\/pre>\n<p>In the Javascript debugging pane, find the following the toolbar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1412\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7.png\" alt=\"\" width=\"417\" height=\"37\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7.png 417w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7-300x27.png 300w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/p>\n<p>The second button from the left is used to step over to the function. After clicking it, we can see, the code stepped to the next function.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1413\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q8.png\" alt=\"\" width=\"422\" height=\"223\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q8.png 422w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q8-300x159.png 300w\" sizes=\"(max-width: 422px) 100vw, 422px\" \/><\/p>\n<p>We used this option because we can guess that probably the problem is in the updateLabel() function because all the important operations are performed here.<\/p>\n<p>5. line-of-code breakpoint<\/p>\n<p>The line-of-code breakpoint is the most commonly used breakpoint. We can use it wherever in a line we think, there is some problem. The updateLabel function is where we are fetching both values. Have a look at the last line of the updateLabel() function.<\/p>\n<pre class=\"lang:default decode:true\">label.textContent = num1 + ' + ' + num2 + ' = ' + sum;<\/pre>\n<p>num1 and num2 are the values we typed in the input fields and sum is total of them. We can probably find our problem in this line. Now we have a specific line and thus, we can use a line-of-code breakpoint here.<\/p>\n<p>To the left of this line, we can see a number, i.e. 32. We can set a line of code there to by clicking on it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1414\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q9.png\" alt=\"\" width=\"507\" height=\"25\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q9.png 507w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q9-300x15.png 300w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/p>\n<p>Now we can resume the execution by clicking the first option on the toolbar above Javascript debugging pane.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1415\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7-1.png\" alt=\"\" width=\"417\" height=\"37\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7-1.png 417w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q7-1-300x27.png 300w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/p>\n<p>The execution will resume and it will stop at line number 32 because it is the line-of-code breakpoint. There we can see the values of num1, num2, and sum.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1416\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q10.png\" alt=\"\" width=\"646\" height=\"282\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q10.png 646w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q10-300x131.png 300w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/p>\n<p>Look at these values carefully. Each of the values is wrapped in double-quotes. We never write integers between double-quotes. Only <a href=\"https:\/\/www.copahost.com\/blog\/concatenate-strings-javascript\/\">strings<\/a> are in double-quotes. This is suspicious.<\/p>\n<h4>5. Checking the values<\/h4>\n<p>In the last step, we analyzed line number 32 using line-of-code breakpoint. We can gather more information by using other tools provided by devtools. The following method can help us reach a conclusion.<\/p>\n<h5>Watch expression<\/h5>\n<p>We can use the watch expression to monitor the values of variables over time. Open the watch tab. Click on the add expression(+ sign) and then type &#8220;typeof num1&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1417\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q11.png\" alt=\"\" width=\"350\" height=\"141\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q11.png 350w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q11-300x121.png 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/p>\n<p>We can notice that the type of the first variable is a <a href=\"https:\/\/www.copahost.com\/blog\/php-array-to-string\/\">string<\/a>. Let&#8217;s check for the other variables.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1418 size-full\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q12.png\" alt=\"javascript\" width=\"348\" height=\"168\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q12.png 348w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q12-300x145.png 300w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/p>\n<p>The types of num2 and sum is also a string. That is the reason why we get, 1 + 2 = 22. Adding anything to a string always result in a string in javascript<\/p>\n<h4>6. Fix the code<\/h4>\n<p>As we know, what is the problem, we can solve it now. We can convert the strings into integers by using the parseInt method.<\/p>\n<pre class=\"lang:default decode:true\"> var sum = parseInt(num1) + parseInt(num2)<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1419\" style=\"border: 1px solid black;\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q13.png\" alt=\"\" width=\"329\" height=\"304\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q13.png 329w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/q13-300x277.png 300w\" sizes=\"(max-width: 329px) 100vw, 329px\" \/><br \/>\n<a id=\"topic3\"><\/a><\/p>\n<h3>Conclusion<\/h3>\n<p>Google chrome is the best browser in the world. It is not only the best for surfing, but for developers too. The devtools provided by chrome are very helpful in a number of ways. One of the best tools is the one we learned in this article. We can solve the issue of how to debug Javascript in Chrome either by this quick or the extended methods.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript is one of the most complicated languages in the programming world. It is an asynchronous programming language that can make it very complex unless we have proper knowledge of it. How to debug Javascript in Chrome seems to be one of the most difficult steps of coding javascript. Sometimes, it is so hard, we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1440,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to debug Javascript in Chrome: Examples and screens - Copahost<\/title>\n<meta name=\"description\" content=\"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to debug Javascript in Chrome: Examples and screens - Copahost\" \/>\n<meta property=\"og:description\" content=\"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Copahost\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-27T19:42:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-26T11:31:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\"},\"author\":{\"name\":\"Gustavo Gallas\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\"},\"headline\":\"How to debug Javascript in Chrome: Examples and screens\",\"datePublished\":\"2019-07-27T19:42:12+00:00\",\"dateModified\":\"2023-06-26T11:31:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\"},\"wordCount\":1326,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\",\"name\":\"How to debug Javascript in Chrome: Examples and screens - Copahost\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png\",\"datePublished\":\"2019-07-27T19:42:12+00:00\",\"dateModified\":\"2023-06-26T11:31:00+00:00\",\"description\":\"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png\",\"width\":2000,\"height\":1000,\"caption\":\"how to debug javascript in chrome\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.copahost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to debug Javascript in Chrome: Examples and screens\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"name\":\"Copahost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.copahost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\",\"name\":\"Copahost\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"width\":223,\"height\":40,\"caption\":\"Copahost\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\",\"name\":\"Gustavo Gallas\",\"description\":\"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/\"],\"url\":\"https:\/\/www.copahost.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to debug Javascript in Chrome: Examples and screens - Copahost","description":"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.","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:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/","og_locale":"en_US","og_type":"article","og_title":"How to debug Javascript in Chrome: Examples and screens - Copahost","og_description":"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.","og_url":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/","og_site_name":"Copahost","article_published_time":"2019-07-27T19:42:12+00:00","article_modified_time":"2023-06-26T11:31:00+00:00","og_image":[{"width":2000,"height":1000,"url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png","type":"image\/png"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gustavo Gallas","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#article","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/"},"author":{"name":"Gustavo Gallas","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246"},"headline":"How to debug Javascript in Chrome: Examples and screens","datePublished":"2019-07-27T19:42:12+00:00","dateModified":"2023-06-26T11:31:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/"},"wordCount":1326,"commentCount":0,"publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/","url":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/","name":"How to debug Javascript in Chrome: Examples and screens - Copahost","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png","datePublished":"2019-07-27T19:42:12+00:00","dateModified":"2023-06-26T11:31:00+00:00","description":"A complete guide about how to debug Javascript in Chrome. Explaining quick debugging and extended debugging using devtools. Screens with examples included.","breadcrumb":{"@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#primaryimage","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/logo-debug-javascript-in-chrome.png","width":2000,"height":1000,"caption":"how to debug javascript in chrome"},{"@type":"BreadcrumbList","@id":"https:\/\/www.copahost.com\/blog\/debug-javascript-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copahost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to debug Javascript in Chrome: Examples and screens"}]},{"@type":"WebSite","@id":"https:\/\/www.copahost.com\/blog\/#website","url":"https:\/\/www.copahost.com\/blog\/","name":"Copahost","description":"","publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copahost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.copahost.com\/blog\/#organization","name":"Copahost","url":"https:\/\/www.copahost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","width":223,"height":40,"caption":"Copahost"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246","name":"Gustavo Gallas","description":"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.","sameAs":["https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/"],"url":"https:\/\/www.copahost.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":16,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1406\/revisions"}],"predecessor-version":[{"id":3143,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1406\/revisions\/3143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media\/1440"}],"wp:attachment":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media?parent=1406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/categories?post=1406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/tags?post=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}