{"id":1483,"date":"2020-02-14T12:20:02","date_gmt":"2020-02-14T17:20:02","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1483"},"modified":"2022-01-15T02:56:54","modified_gmt":"2022-01-15T02:56:54","slug":"inspector-gadgets","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/inspector-gadgets\/","title":{"rendered":"Inspector Gadgets"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" src=\"https:\/\/nmi.cool\/newmediaproduction\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1.jpeg\" alt=\"Magnifying glass inspecting gears\" class=\"wp-image-1486\" srcset=\"https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1.jpeg 2560w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-300x200.jpeg 300w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-1024x683.jpeg 1024w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-768x512.jpeg 768w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-1536x1024.jpeg 1536w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-2048x1366.jpeg 2048w, https:\/\/nmi.cool\/web\/wp-content\/uploads\/sites\/3\/2020\/02\/photo-1520500807606-4ac9ae633574-scaled-1-1568x1046.jpeg 1568w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/photos\/mQHEgroKw2k\">Shane Aldendorff<\/a><\/figcaption><\/figure>\n\n\n\n<p>One of the most powerful tools at your disposal as you&#8217;re learning how to build websites is the Inspector, which Chrome calls DevTools.<\/p>\n\n\n\n<p>Thankfully, Google has built out a fantastic set of resources for learning how to get started with the Inspector. Check out the following.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Chrome DevTools<\/a><\/h2>\n\n\n\n<p>This is the top-level page with links to all other readings on DevTools. Feel free to poke around a bit just to see all the things that DevTools has to offer. There&#8217;s a ton here, and we won&#8217;t get to most of it this semester, so just casually browse whatever interests you and ignore whatever doesn&#8217;t.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/css\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Get Started With Viewing And Changing CSS<\/a> and <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/css\/reference\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">CSS Reference<\/a><\/h2>\n\n\n\n<p>These readings cover the core functionality you&#8217;ll be using DevTools for in this class, so take your time here. Make sure that you&#8217;re using Chrome while exploring these resources. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/device-mode\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Simulate Mobile Devices with Device Mode in Chrome DevTools<\/a><\/h2>\n\n\n\n<p>As we get further into the semester and begin learning responsive web design (with Bootstrap and beyond), explore these resources for testing your sites across a variety of device types.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most powerful tools at your disposal as you&#8217;re learning how to build websites is the Inspector, which Chrome calls DevTools. Thankfully, Google has built out a fantastic set of resources for learning how to get started with the Inspector. Check out the following. Chrome DevTools This is the top-level page with links &hellip; <a href=\"https:\/\/nmi.cool\/web\/inspector-gadgets\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Inspector Gadgets<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1483","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":1,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1483\/revisions"}],"predecessor-version":[{"id":3285,"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/pages\/1483\/revisions\/3285"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/web\/wp-json\/wp\/v2\/media?parent=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}