{"id":10255,"date":"2016-01-14T12:47:18","date_gmt":"2016-01-14T10:47:18","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10255"},"modified":"2016-01-19T17:19:14","modified_gmt":"2016-01-19T15:19:14","slug":"secrets-of-the-javascript-ninja-debugging-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/","title":{"rendered":"Secrets of the JavaScript Ninja &#8211; Debugging JavaScript"},"content":{"rendered":"<p><strong>Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code!<\/strong><\/p>\n<p><a href=\"https:\/\/www.manning.com\/books\/secrets-of-the-javascript-ninja-second-edition\" rel=\"attachment wp-att-10266\"><img decoding=\"async\" class=\"alignright  wp-image-10266\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/JS-Ninja-Pic.png\" alt=\"JS Ninja Pic\" width=\"175\" height=\"215\" \/><\/a>In this article, excerpted from <a href=\"https:\/\/www.manning.com\/books\/secrets-of-the-javascript-ninja-second-edition\">Secrets of the JavaScript Ninja, Second Edition<\/a>, we introduce you to some of the tools that can be used for debugging JavaScript.<\/p>\n<p>For a long time, the development of JavaScript applications was hindered by the fact that the only way to debug our JavaScript code was to scatter <code>alert<\/code> statements, that would notify us about the value of the alerted expression, all around the code that\u2019s acting strangely. As you might imagine, debugging (hardly ever a fun activity), was made even more difficult by this lack of basic debugging infrastructure.<\/p>\n<p>Luckily for us, around 2007, Firebug, an extension to Firefox, was developed. Firebug holds a special place in the hearts of many web developers, since it was the first tool that has provided us with a debugging experience that closely matched debugging in state of the art integrated development environments (IDE\u2019s), such as Visual Studio or Eclipse. In addition, Firebug has inspired the development of similar developer tools for all major browsers: <em>F12 Developer Tools<\/em>, included in Internet Explorer and Microsoft Edge; WebKit Inspector, included in Safari; Firefox DevTools, included in Firefox, and <em>Chrome DevTools<\/em> included in Chrome and Opera. Let\u2019s explore them a bit.<\/p>\n<h2>Firebug<\/h2>\n<p>Firebug, the first advanced web application debugging tool, is available exclusively for Firefox, and is accessed by pressing the \u201cF12\u201d key (or by right-clicking anywhere on the page and selecting \u201cInspect element with Firebug\u201d). You can install Firebug by opening the page: <a href=\"https:\/\/getfirebug.com\/\">https:\/\/getfirebug.com\/<\/a> in Firefox and following the given instructions. Firebug is shown in the following figure.<\/p>\n<figure id=\"attachment_10256\" aria-describedby=\"caption-attachment-10256\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1.png\" rel=\"attachment wp-att-10256\"><img decoding=\"async\" class=\"size-large wp-image-10256\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1-1024x626.png\" alt=\"Figure 1 Firebug, available only in Firefox, was the first advanced debugging tool for web applications.\" width=\"620\" height=\"379\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1-1024x626.png 1024w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1-300x183.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1-768x470.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-1.png 1122w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/a><figcaption id=\"caption-attachment-10256\" class=\"wp-caption-text\">Figure 1: Firebug, available only in Firefox, was the first advanced debugging tool for web applications.<\/figcaption><\/figure>\n<p>Firebug offers a number of advanced debugging functionalities, some of which it has even pioneered. For example, we can easily explore the current state of the DOM by using the \u201cHTML\u201d pane (the pane shown in figure 1), run custom JavaScript code within the context of the current page by using the console (the bottom of figure 1), explore the state of our JavaScript code by using the \u201cScript\u201d pane, and even explore network communications from the \u201cNet\u201d pane.<\/p>\n<h2>Firefox DevTools<\/h2>\n<p>In addition to Firebug, if you\u2019re a Firefox user, you can use the built-in Firefox DevTools, shown in the following figure.<\/p>\n<figure id=\"attachment_10257\" aria-describedby=\"caption-attachment-10257\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2.png\" rel=\"attachment wp-att-10257\"><img decoding=\"async\" class=\"size-large wp-image-10257\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2-1024x662.png\" alt=\"Figure 2 Firefox DevTools, built into Firefox, offer all the Firebug features and then some.\" width=\"620\" height=\"401\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2-1024x662.png 1024w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2-300x194.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2-768x497.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-2.png 1166w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/a><figcaption id=\"caption-attachment-10257\" class=\"wp-caption-text\">Figure 2: Firefox DevTools, built into Firefox, offer all the Firebug features and then some.<\/figcaption><\/figure>\n<p>As you can see from figure 2, the general look and feel of Firefox DevTools is very similar to Firebug (apart from some minor layout and label differences, for example the \u201cHTML\u201d pane from Firebug is called \u201cInspector\u201d in Firefox DevTools).<\/p>\n<p>Firefox DevTools are built by the Mozilla team, and they have taken advantage of this close integration with Firefox by bringing in some additional features, such as the \u201cPerformance\u201d pane with which we can get detailed insight about the performance of our web applications. In addition, Firefox DevTools are built with the modern web in mind. For example, they offer the \u201cResponsive Design mode\u201d which helps us explore the look and feel of our web applications across different screen sizes, which is something we have to be careful about, since nowadays users access our web applications not only from their PCs, but also from mobiles, tablets, and even TV\u2019s.<\/p>\n<h2>F12 Developer tools<\/h2>\n<p>In case you\u2019re in the Internet Explorer (IE) camp, you\u2019ll be happy to know that IE and Microsoft Edge (the successor to IE) also offer their own developer tools, the F12 developer tools. (Quickly, try to guess which key toggles them on and off.) The F12 developer tools are shown in the following figure.<\/p>\n<figure id=\"attachment_10258\" aria-describedby=\"caption-attachment-10258\" style=\"width: 814px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-3.png\" rel=\"attachment wp-att-10258\"><img decoding=\"async\" class=\" wp-image-10258\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-3.png\" alt=\"Figure 3 F12 developer tools (toggled by pressing F12) are available in Internet Explorer and Edge\" width=\"814\" height=\"307\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-3.png 915w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-3-300x113.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-3-768x290.png 768w\" sizes=\"(max-width: 814px) 100vw, 814px\" \/><\/a><figcaption id=\"caption-attachment-10258\" class=\"wp-caption-text\">Figure 3: F12 developer tools (toggled by pressing F12) are available in Internet Explorer and Edge<\/figcaption><\/figure>\n<p>Again, notice a number of similarities between the F12 developer tools and Firefox\u2019s DevTools (with only slight differences in labels); the F12 tools also enable us to: explore the current state of the DOM (the \u201cDOM Explorer\u201d pane, figure 3), run custom JavaScript code through the console, debug our JavaScript code (the \u201cDebugger\u201d pane), analyze the network traffic (\u201cNetwork\u201d), deal with responsive design (\u201cUI Responsiveness\u201d), and analyze performance and memory consumption (\u201cProfiler\u201d and \u201cMemory\u201d).<\/p>\n<h2>WebKit inspector<\/h2>\n<p>If you are a Mac OS user, you can use WebKit Inspector, which is offered by Safari, as shown in the following figure.<\/p>\n<figure id=\"attachment_10259\" aria-describedby=\"caption-attachment-10259\" style=\"width: 620px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4.png\" rel=\"attachment wp-att-10259\"><img decoding=\"async\" class=\"size-large wp-image-10259\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4-1024x462.png\" alt=\"Figure 4 WebKit Inspector, available in Safari\" width=\"620\" height=\"280\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4-1024x462.png 1024w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4-300x135.png 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4-768x347.png 768w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-4.png 1466w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/a><figcaption id=\"caption-attachment-10259\" class=\"wp-caption-text\">Figure 4: WebKit Inspector, available in Safari<\/figcaption><\/figure>\n<p>While the UI of Safari\u2019s WebKit Inspector is slightly different than that of F12 developer tools or Firefox\u2019s DevTools, rest assured that the WebKit Inspector also supports all important debugging features.<\/p>\n<h2>Chrome DevTools<\/h2>\n<p>We\u2019ll complete our little survey of different developer tools with Chrome DevTools. In our opinion, it\u2019s the current flagship of web application developer tools that\u2019s been driving a lot of innovations lately. As you can see in figure 5, the basic UI and features are again quite similar to the rest of the developer tools.<\/p>\n<figure id=\"attachment_10260\" aria-describedby=\"caption-attachment-10260\" style=\"width: 679px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-5.png\" rel=\"attachment wp-att-10260\"><img decoding=\"async\" class=\"size-full wp-image-10260\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-5.png\" alt=\"Figure 5 Chrome DevTools, available in Chrome and Opera\" width=\"679\" height=\"367\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-5.png 679w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/Secrets-of-the-JavaScript-Ninja-Pic-5-300x162.png 300w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/a><figcaption id=\"caption-attachment-10260\" class=\"wp-caption-text\">Figure 5: Chrome DevTools, available in Chrome and Opera<\/figcaption><\/figure>\n<p>Most of the developer tools offer basically the same features (and if one of them offers something new, the others catch up quickly), so you can just as easily use the developer tools offered by your browser of choice.<\/p>\n<p><strong>Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount!<\/strong><\/p>\n<p>Use code <strong>wcg16<\/strong> to get your discount for the book <a href=\"https:\/\/www.manning.com\/books\/secrets-of-the-javascript-ninja-second-edition\">Secrets of the JavaScript Ninja<\/a>. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this article, excerpted from Secrets of the JavaScript Ninja, Second Edition, we introduce you to some of the tools that can be used for debugging JavaScript. For &hellip;<\/p>\n","protected":false},"author":131,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[307],"class_list":["post-10255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-debugging"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this\" \/>\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.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-14T10:47:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-19T15:19:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Resig\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jeresig\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Resig\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\"},\"author\":{\"name\":\"John Resig\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0319f9a04331534f91b419ddfa605e5a\"},\"headline\":\"Secrets of the JavaScript Ninja &#8211; Debugging JavaScript\",\"datePublished\":\"2016-01-14T10:47:18+00:00\",\"dateModified\":\"2016-01-19T15:19:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\"},\"wordCount\":959,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"debugging\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\",\"name\":\"Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-01-14T10:47:18+00:00\",\"dateModified\":\"2016-01-19T15:19:14+00:00\",\"description\":\"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Secrets of the JavaScript Ninja &#8211; Debugging JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0319f9a04331534f91b419ddfa605e5a\",\"name\":\"John Resig\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/55b7dafdfa621773a3f08e5efbcaa6dc9d105760b03d865e89c3a4d59f05f669?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/55b7dafdfa621773a3f08e5efbcaa6dc9d105760b03d865e89c3a4d59f05f669?s=96&d=mm&r=g\",\"caption\":\"John Resig\"},\"description\":\"John Resig is a developer at Khan Academy and the creator of the jQuery JavaScript library. He\u2019s also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja.\",\"sameAs\":[\"http:\/\/www.khanacademy.org\/\",\"https:\/\/x.com\/jeresig\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/john-resig\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026","description":"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this","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.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026","og_description":"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-01-14T10:47:18+00:00","article_modified_time":"2016-01-19T15:19:14+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"John Resig","twitter_card":"summary_large_image","twitter_creator":"@jeresig","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"John Resig","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/"},"author":{"name":"John Resig","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0319f9a04331534f91b419ddfa605e5a"},"headline":"Secrets of the JavaScript Ninja &#8211; Debugging JavaScript","datePublished":"2016-01-14T10:47:18+00:00","dateModified":"2016-01-19T15:19:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/"},"wordCount":959,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["debugging"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/","name":"Secrets of the JavaScript Ninja - Debugging JavaScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-01-14T10:47:18+00:00","dateModified":"2016-01-19T15:19:14+00:00","description":"Web Code Geeks have partnered with Manning to provide you this ebook with a 39% discount! Check at the end of the article for the relevant code! In this","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/secrets-of-the-javascript-ninja-debugging-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Secrets of the JavaScript Ninja &#8211; Debugging JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0319f9a04331534f91b419ddfa605e5a","name":"John Resig","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/55b7dafdfa621773a3f08e5efbcaa6dc9d105760b03d865e89c3a4d59f05f669?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55b7dafdfa621773a3f08e5efbcaa6dc9d105760b03d865e89c3a4d59f05f669?s=96&d=mm&r=g","caption":"John Resig"},"description":"John Resig is a developer at Khan Academy and the creator of the jQuery JavaScript library. He\u2019s also the author of the books Pro JavaScript Techniques and Secrets of the JavaScript Ninja.","sameAs":["http:\/\/www.khanacademy.org\/","https:\/\/x.com\/jeresig"],"url":"https:\/\/www.webcodegeeks.com\/author\/john-resig\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/131"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10255"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10255\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}