{"id":138710,"date":"2017-11-17T08:00:00","date_gmt":"2017-11-17T13:00:00","guid":{"rendered":"https:\/\/spin.aa8q45el-liquidwebsites.com\/?p=138710"},"modified":"2017-11-10T06:46:38","modified_gmt":"2017-11-10T11:46:38","slug":"chrome-devtools-tips","status":"publish","type":"post","link":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/","title":{"rendered":"Five Chrome DevTools Tips for Troubleshooting Web Apps"},"content":{"rendered":"<p>I recently needed to find and fix a bug in a web app I&#8217;ve been working on. The bug had something to do with code that was updating the dimensions of a third-party generated UI component whenever the window was resized. While troubleshooting the issue, I repeatedly used a handful of the tools provided by <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a>. Some of these I&#8217;ve used many times in the past, but a couple of them were new to me, so I thought I&#8217;d discuss them here.<!--more--><\/p>\n<h2>1. Pass Adhoc Objects to console.log<\/h2>\n<p>When I&#8217;m trying to debug something, I often start with some <code>console.log<\/code> statements to give me a better idea of what&#8217;s actually happening in the code. Usually, these are just strings with a value or two mixed in like so:<\/p>\n<pre>\r\n  <code class=\"language-javascript\">\r\nconsole.log('The current height is', height, 'and width is', width);\r\n  <\/code>\r\n<\/pre>\n<p>DevTools lets you expand objects that are passed to <code>console.log<\/code>, making it a great way to dump out a larger collection of variables using an ad-hoc object. For example,<\/p>\n<pre>\r\n    <code class=\"language-javascript\">\r\nconsole.log(\"At the start of render()\", {width, height, border, windowWidth, counter});\r\n    <\/code>\r\n  <\/pre>\n<p>  will show up in the console like this:<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204225\/console_log_object_1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204225\/console_log_object_1-590x22.png\" alt=\"\" width=\"590\" height=\"22\" class=\"aligncenter size-medium wp-image-138723\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-590x22.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-150x6.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-768x29.png 768w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-1024x38.png 1024w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-600x22.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1-1200x45.png 1200w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_1.png 1282w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<p>And if you expand the object by clicking on the arrow, you can see the values in a more readable layout. (This is especially helpful when the object has too many properties to fit on a single line.)<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204223\/console_log_object_2.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204223\/console_log_object_2-590x105.png\" alt=\"\" width=\"590\" height=\"105\" class=\"aligncenter size-medium wp-image-138722\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-590x105.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-150x27.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-768x137.png 768w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-1024x183.png 1024w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-600x107.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2-1200x214.png 1200w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_log_object_2.png 1344w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<h2>2. Reference the Selected Node in the Console<\/h2>\n<p>When an element is selected in DevTools, it can be referenced in the console using the <code>$0<\/code> variable. This allows you to inspect the DOM node to get its position and dimensions using <code>$0.getBoundingClientRect()<\/code>, or manipulate it in any programmatic way you&#8217;d like.<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204220\/console_reference_selected_element.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204220\/console_reference_selected_element-590x182.png\" alt=\"\" width=\"590\" height=\"182\" class=\"aligncenter size-medium wp-image-138721\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-590x182.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-150x46.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-768x237.png 768w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-1024x316.png 1024w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-600x185.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element-1200x370.png 1200w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/console_reference_selected_element.png 1454w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<h2>3. Use Find in the Elements Tab<\/h2>\n<p>When you&#8217;re trying to find a deeply nested node in the DOM in the DevTools Elements tab, relying on the user interface to select it isn&#8217;t very accurate. It often requires a lot of clicks to expand node after node, just to get down to the one you want. <\/p>\n<p>A faster way is to use Find. With the Elements tab focused, use Cmd-F\/Ctrl-F to open a Find bar, and type in a CSS selector to locate the node you&#8217;re looking for:<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204216\/find_in_elements_tab.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204216\/find_in_elements_tab-590x458.png\" alt=\"\" width=\"590\" height=\"458\" class=\"aligncenter size-medium wp-image-138720\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-590x458.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-150x116.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-768x596.png 768w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-1024x794.png 1024w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-600x465.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab-1200x931.png 1200w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/find_in_elements_tab.png 1570w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<h2>4. Conditional Breakpoints<\/h2>\n<p>Chrome DevTools provides a powerful debugger, including the ability to configure conditional breakpoints that will only stop if some condition is met. If you right-click on a breakpoint and select <code>Edit breakpoint...<\/code>, you&#8217;ll be able to specify a condition.<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204210\/conditional_breakpoints.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204210\/conditional_breakpoints-590x114.png\" alt=\"\" width=\"590\" height=\"114\" class=\"aligncenter size-medium wp-image-138719\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints-590x114.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints-150x29.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints-768x149.png 768w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints-1024x198.png 1024w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints-600x116.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/conditional_breakpoints.png 1086w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<h2>5. DOM Breakpoints<\/h2>\n<p>DevTools allows you to set a breakpoint on a DOM node that will break if the node&#8217;s attributes change, its subtree changes, or it is removed. To set a DOM breakpoint, find the element you want in the Elements tab, right-click it, and select <code>Break on...<\/code>. You can choose which type of breakpoint to set.<\/p>\n<p><a href=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204207\/dom_breakpoints.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/20171013204207\/dom_breakpoints-590x239.png\" alt=\"\" width=\"590\" height=\"239\" class=\"aligncenter size-medium wp-image-138718\" srcset=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/dom_breakpoints-590x239.png 590w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/dom_breakpoints-150x61.png 150w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/dom_breakpoints-600x243.png 600w, https:\/\/spin.atomicobject.com\/wp-content\/uploads\/dom_breakpoints.png 652w\" sizes=\"auto, (max-width: 590px) 100vw, 590px\" \/><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>Chrome&#8217;s DevTools are incredibly powerful. It seems like I find a new feature every time I&#8217;m trying to debug a problem. The ones I listed in this post were extremely helpful to me recently. Hopefully, you&#8217;ll find them useful as well.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently needed to find and fix a bug in a web app I&#8217;ve been working on. The bug had something to do with code that was updating the dimensions of a third-party generated UI component whenever the window was resized. While troubleshooting the issue, I repeatedly used a handful of the tools provided by [&hellip;]<\/p>\n","protected":false},"author":407,"featured_media":138979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1731],"tags":[615,2378,2421],"series":[],"class_list":["post-138710","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-tools","tag-javascript","tag-chrome","tag-devtools"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>5 Chrome DevTools Tips for Troubleshooting Web Apps<\/title>\n<meta name=\"description\" content=\"This post discusses 5 tools\/tips for using Chrome&#039;s DevTools to troubleshoot JavaScript and DOM issues while developing a web app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Chrome DevTools Tips for Troubleshooting Web Apps\" \/>\n<meta property=\"og:description\" content=\"This post discusses 5 tools\/tips for using Chrome&#039;s DevTools to troubleshoot JavaScript and DOM issues while developing a web app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/\" \/>\n<meta property=\"og:site_name\" content=\"Atomic Spin\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/atomicobject\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-17T13:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2729\" \/>\n\t<meta property=\"og:image:height\" content=\"1833\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Patrick Bacon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:site\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Patrick Bacon\" \/>\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:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/\"},\"author\":{\"name\":\"Patrick Bacon\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/b1ae70970124ba464ef398b4f93b4a65\"},\"headline\":\"Five Chrome DevTools Tips for Troubleshooting Web Apps\",\"datePublished\":\"2017-11-17T13:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/\"},\"wordCount\":496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/Google-Developers.png\",\"keywords\":[\"JavaScript\",\"chrome\",\"devtools\"],\"articleSection\":[\"Developer Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/\",\"name\":\"5 Chrome DevTools Tips for Troubleshooting Web Apps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/Google-Developers.png\",\"datePublished\":\"2017-11-17T13:00:00+00:00\",\"description\":\"This post discusses 5 tools\\\/tips for using Chrome's DevTools to troubleshoot JavaScript and DOM issues while developing a web app.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/chrome-devtools-tips\\\/#primaryimage\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/Google-Developers.png\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/Google-Developers.png\",\"width\":2729,\"height\":1833},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"name\":\"Atomic Spin\",\"description\":\"Atomic Object\u2019s blog on everything we find fascinating.\",\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/spin.atomicobject.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#organization\",\"name\":\"Atomic Object\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"width\":258,\"height\":244,\"caption\":\"Atomic Object\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/atomicobject\",\"https:\\\/\\\/x.com\\\/atomicobject\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/b1ae70970124ba464ef398b4f93b4a65\",\"name\":\"Patrick Bacon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg\",\"caption\":\"Patrick Bacon\"},\"description\":\"Software Consultant and Developer. Loves making software, learning new technologies, and being an Atom.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/patrickbacon\\\/en\"],\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/author\\\/bacon\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Chrome DevTools Tips for Troubleshooting Web Apps","description":"This post discusses 5 tools\/tips for using Chrome's DevTools to troubleshoot JavaScript and DOM issues while developing a web app.","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:\/\/spin.atomicobject.com\/chrome-devtools-tips\/","og_locale":"en_US","og_type":"article","og_title":"5 Chrome DevTools Tips for Troubleshooting Web Apps","og_description":"This post discusses 5 tools\/tips for using Chrome's DevTools to troubleshoot JavaScript and DOM issues while developing a web app.","og_url":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/","og_site_name":"Atomic Spin","article_publisher":"https:\/\/www.facebook.com\/atomicobject","article_published_time":"2017-11-17T13:00:00+00:00","og_image":[{"width":2729,"height":1833,"url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png","type":"image\/png"}],"author":"Patrick Bacon","twitter_card":"summary_large_image","twitter_creator":"@atomicobject","twitter_site":"@atomicobject","twitter_misc":{"Written by":"Patrick Bacon","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#article","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/"},"author":{"name":"Patrick Bacon","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/b1ae70970124ba464ef398b4f93b4a65"},"headline":"Five Chrome DevTools Tips for Troubleshooting Web Apps","datePublished":"2017-11-17T13:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/"},"wordCount":496,"commentCount":0,"publisher":{"@id":"https:\/\/atomicobject.com\/"},"image":{"@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png","keywords":["JavaScript","chrome","devtools"],"articleSection":["Developer Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/","url":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/","name":"5 Chrome DevTools Tips for Troubleshooting Web Apps","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#primaryimage"},"image":{"@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png","datePublished":"2017-11-17T13:00:00+00:00","description":"This post discusses 5 tools\/tips for using Chrome's DevTools to troubleshoot JavaScript and DOM issues while developing a web app.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/chrome-devtools-tips\/#primaryimage","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/Google-Developers.png","width":2729,"height":1833},{"@type":"WebSite","@id":"https:\/\/spin.atomicobject.com\/#website","url":"https:\/\/spin.atomicobject.com\/","name":"Atomic Spin","description":"Atomic Object\u2019s blog on everything we find fascinating.","publisher":{"@id":"https:\/\/atomicobject.com\/"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spin.atomicobject.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/spin.atomicobject.com\/#organization","name":"Atomic Object","url":"https:\/\/spin.atomicobject.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","width":258,"height":244,"caption":"Atomic Object"},"image":{"@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/atomicobject","https:\/\/x.com\/atomicobject"]},{"@type":"Person","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/b1ae70970124ba464ef398b4f93b4a65","name":"Patrick Bacon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f41c671e4a227c4fa2a71be81c92fb792a243799d14fa702fbabd0e00a4ed8af?s=96&d=blank&r=pg","caption":"Patrick Bacon"},"description":"Software Consultant and Developer. Loves making software, learning new technologies, and being an Atom.","sameAs":["http:\/\/www.linkedin.com\/in\/patrickbacon\/en"],"url":"https:\/\/spin.atomicobject.com\/author\/bacon\/"}]}},"_links":{"self":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/138710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/users\/407"}],"replies":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/comments?post=138710"}],"version-history":[{"count":0,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/138710\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media\/138979"}],"wp:attachment":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media?parent=138710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/categories?post=138710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/tags?post=138710"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/series?post=138710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}