{"id":3842,"date":"2023-07-18T20:58:28","date_gmt":"2023-07-18T20:58:28","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3842"},"modified":"2023-07-18T20:58:28","modified_gmt":"2023-07-18T20:58:28","slug":"inspect","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/resources\/inspect\/","title":{"rendered":"Inspect!"},"content":{"rendered":"\n<p>As you probably already know, when you create web applications with Javascript, you will make mistakes that have to be detected and overcome. Luckily, most modern browsers have built-in error detectors that many times can pinpoint the problem with your Javascript code. With Google Chrome a very useful error detection is built in and requires no special activation.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>When a Javascript enhanced webpage is not working as expected, simply right-click (or control click) on the page or a specific element on the page, and select inspect.<br><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.apweb.quest\/wp-content\/uploads\/2021\/09\/img_613b875b365e1.png\" alt=\"\" width=\"330\" height=\"454\"><\/li>\n\n\n\n<li>The elements tab which shows the html of the page is the first thing activated, but locating a JS problem usually requires you to click the Console tab.<img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"198\" src=\"https:\/\/www.apweb.quest\/wp-content\/uploads\/2021\/09\/img_613b87bb6c992.png\" alt=\"\"><\/li>\n\n\n\n<li>As the screen capture below shows, my Console tells me that a Javascript file named inspect.js has an error on line two, where I am trying to invoke a variable named shoowme (with two o&#8217;s) that is not defined.<br><img loading=\"lazy\" decoding=\"async\" width=\"1104\" height=\"156\" src=\"https:\/\/www.apweb.quest\/wp-content\/uploads\/2021\/09\/img_613b88397c853.png\" alt=\"\"><\/li>\n\n\n\n<li>When I click on the Sources tab or directly on inspect.js, I see that I carelessly misspelled the variable showme by adding an extra o to its name (shoowme instead of showme). At this point, all I have to do is revise my code, refresh the browser and my web app will work properly.&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"180\" src=\"https:\/\/www.apweb.quest\/wp-content\/uploads\/2021\/09\/img_613b88e1eee59.png\" alt=\"\"><\/li>\n\n\n\n<li>That&#8217;s all there is to it. The inspection tool is highly evolved, extremely useful, and should be the first resort whenever things are not working properly.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>As you probably already know, when you create web applications with Javascript, you will make mistakes that have to be detected and overcome. Luckily, most modern browsers have built-in error detectors that many times can pinpoint the problem with your Javascript code. With Google Chrome a very useful error detection is built in and requires &hellip; <a href=\"https:\/\/nmi.cool\/advweb\/resources\/inspect\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Inspect!<\/span><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"parent":3839,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3842","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3842"}],"version-history":[{"count":1,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3842\/revisions"}],"predecessor-version":[{"id":3843,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3842\/revisions\/3843"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3839"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}