{"id":6147,"date":"2019-09-01T13:58:08","date_gmt":"2019-09-01T20:58:08","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=6147"},"modified":"2020-05-23T01:05:52","modified_gmt":"2020-05-23T08:05:52","slug":"how-to-debug-javascript-with-chrome","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/","title":{"rendered":"How to Debug JavasScript with Chrome"},"content":{"rendered":"\n

Even for professionals, coding isn\u2019t easy. That\u2019s probably why developers spend a large amount of their time hunting down bugs in their code. Sometimes a bug is obvious, causing the entire program to break all at once. Other times a bug is very subtle, producing correct-looking output which nevertheless contains flaws. 
<\/p>\n\n\n\n

As counterintuitive as it may seem, obvious bugs are better because they\u2019re easier to find. A sneaky bug can lurk for years in software used everyday. 
<\/p>\n\n\n\n

Think of it this way: if you were in a building that was slowly filling with poisonous gas, would you want the gas to be odorless, tasteless, and colorless, or bright purple and smelling like gunpowder? 
<\/p>\n\n\n\n

Because debugging is such a crucial step in the development process<\/a>, there exist many tools for doing so. Today we\u2019re going to discuss debugging Javascript in Chrome. Javascript is far and away one of the most popular overall languages, and probably the most popular language for web development. Similarly, Chrome is one of the most widely-used web browsers. 
<\/p>\n\n\n\n

As someone who will soon be an in-demand web developer<\/a>, it\u2019s a good idea to be familiar with debugging Javascript with Chrome. I encourage you to follow along with this nifty example web page<\/a> built specifically to practice debugging. 
<\/p>\n\n\n\n

Using the Source Panel <\/strong><\/h2>\n\n\n\n
\"\"
Lots of professions have the equivalent of a control panel, and you have to learn to use the web-developer equivalent. 
<\/figcaption><\/figure>\n\n\n\n

Chrome comes built with a number of powerful tools which allow developers to inspect the source code of a website, including the HTML, CSS, and Javascript.
<\/p>\n\n\n\n

This is a fantastic way to read the code of websites you enjoy, and to learn to debug them.
<\/p>\n\n\n\n

Looking Around<\/strong> 
<\/h3>\n\n\n\n

As of 2019 and the most recent version of Chrome, accessing the developer tools is as simple as going to View -> Developer -> Developer Tools in the browser menu at the top of your screen. This opens up the Chrome developer panel with its many useful tabs. 
<\/p>\n\n\n\n

The \u2018Elements\u2019 tab lets you inspect the HTML and Javascript making up the web page. The \u2018Console\u2019 tab furnishes a place for you to tinker with Javascript. Open up the console for the  example page linked in the previous section and type console.log(\u2018hello\u2019). This Javascript command should be executed in-browser.
<\/p>\n\n\n\n

The \u2018Sources\u2019 tab shows you the actual content of the page\u2019s source files and gives you a way to set breakpoints and inspect the call stack.
<\/p>\n\n\n\n

Breakpoints and debugger;<\/strong><\/h3>\n\n\n\n

Along with print statements, breakpoints are one of the basic techniques developers use for debugging.
<\/p>\n\n\n\n

Setting a breakpoint in the Chrome console is easy: just click on the line number you\u2019re interested in. A breakpoint is a place where code automatically pauses in its execution. This allows you to inspect everything that\u2019s happened up to this point, including things like the current value of every variable and all the transformations that have taken place. 
<\/p>\n\n\n\n

Breakpoints are a great way to check the progress of your code to see if anything has gone wrong. 
<\/p>\n\n\n\n

We can manually achieve the same effect by placing debugger; into our code wherever we want to begin the debugging process. 
<\/p>\n\n\n\n

By setting multiple breakpoints we can get a close-up view of everything our code is doing, which makes it much easier to spot errors. 
<\/p>\n\n\n\n

Conclusion<\/strong>
<\/h3>\n\n\n\n

While this certainly isn\u2019t everything you need to master the art of debugging, it\u2019s quite a head start. Most of successfully fixing code comes down to very patiently and very clearly thinking through what you wanted<\/em> your code to do and comparing that to what you actually told<\/em> your code to do. <\/p>\n\n\n\n

With the information above, you\u2019re well on your way to debugging Javascript with Chrome.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"Even for professionals, coding isn\u2019t easy. That\u2019s probably why developers spend a large amount of their time hunting down bugs in their code. Sometimes a bug is obvious, causing the entire program to break all at once. Other times a bug is very subtle, producing correct-looking output which nevertheless contains flaws.  As counterintuitive as it…","protected":false},"author":35,"featured_media":6148,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-6147","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":[],"is_guest_post":[]},"yoast_head":"\nHow to Debug JavaScript with Chrome | Career Karma<\/title>\n<meta name=\"description\" content=\"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-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 JavasScript with Chrome\" \/>\n<meta property=\"og:description\" content=\"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-01T20:58:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-23T08:05:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Trent Fowler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Trent Fowler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\"},\"author\":{\"name\":\"Trent Fowler\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba\"},\"headline\":\"How to Debug JavasScript with Chrome\",\"datePublished\":\"2019-09-01T20:58:08+00:00\",\"dateModified\":\"2020-05-23T08:05:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\"},\"wordCount\":648,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\",\"name\":\"How to Debug JavaScript with Chrome | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg\",\"datePublished\":\"2019-09-01T20:58:08+00:00\",\"dateModified\":\"2020-05-23T08:05:52+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba\"},\"description\":\"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Debug JavasScript with Chrome\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba\",\"name\":\"Trent Fowler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-11-16-at-3.07.12-PM.png\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-11-16-at-3.07.12-PM.png\",\"caption\":\"Trent Fowler\"},\"description\":\"Trent Fowler is a data scientist and writer with an interest in machine learning, blockchain technologies, and futurism.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/trent-fowler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Debug JavaScript with Chrome | Career Karma","description":"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.","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:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/","og_locale":"en_US","og_type":"article","og_title":"How to Debug JavasScript with Chrome","og_description":"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.","og_url":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2019-09-01T20:58:08+00:00","article_modified_time":"2020-05-23T08:05:52+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg","type":"image\/jpeg"}],"author":"Trent Fowler","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Trent Fowler","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/"},"author":{"name":"Trent Fowler","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba"},"headline":"How to Debug JavasScript with Chrome","datePublished":"2019-09-01T20:58:08+00:00","dateModified":"2020-05-23T08:05:52+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/"},"wordCount":648,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/","url":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/","name":"How to Debug JavaScript with Chrome | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg","datePublished":"2019-09-01T20:58:08+00:00","dateModified":"2020-05-23T08:05:52+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba"},"description":"Using the Chrome debugger to fix your Javascript is an important skill for developers. Click here to learn how to do it.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/09\/photo-1558152290-219fa2130958.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/how-to-debug-javascript-with-chrome\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"How to Debug JavasScript with Chrome"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/768fb9a38d2c1b146588954736f79aba","name":"Trent Fowler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-11-16-at-3.07.12-PM.png","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2019\/11\/Screen-Shot-2019-11-16-at-3.07.12-PM.png","caption":"Trent Fowler"},"description":"Trent Fowler is a data scientist and writer with an interest in machine learning, blockchain technologies, and futurism.","url":"https:\/\/careerkarma.com\/blog\/author\/trent-fowler\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/6147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=6147"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/6147\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/6148"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=6147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=6147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=6147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}