{"componentChunkName":"component---src-components-posts-page-layout-js","path":"/tips-and-tricks-chrome-dev-tools","result":{"data":{"mdx":{"id":"b48d9778-d962-5757-98db-f877ea2c8fc1","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Tips and Tricks: Chrome Dev Tools\",\n  \"slug\": \"tips-and-tricks-chrome-dev-tools\",\n  \"date\": \"2020-10-29\",\n  \"author\": \"Adam Goth\",\n  \"preview\": \"I recently spent some time diving into all that Chrome's developer tools have to offer. It's quite impressive what the Chrome team has built to make the lives of web developers easier. In this post, I will share a handful of the nifty things I learned.\",\n  \"categories\": [\"tooling\"],\n  \"keywords\": [\"javascript\", \"react\", \"web development\", \"development tools\", \"chrome\", \"browser\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"I recently spent some time diving into all that Chrome's developer tools have to\\noffer. It's quite impressive what the Chrome team has built to make the lives of\\nweb developers easier. In this post, I will share a handful of the nifty things\\nI learned.\"), mdx(\"p\", null, \"Let's jump in.\"), mdx(\"h3\", null, \"Toggle the console drawer\"), mdx(\"p\", null, \"Most people are probably familiar with the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/chrome-devtools/console/reference\"\n  }), \"Console\"), \"\\ntab. But you can open a console drawer from almost any other tab as well. This\\ncan easily be toggled by simply hitting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"esc\"), \" key.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/C4nvLNDUimi984DvGl/giphy.gif\",\n    \"alt\": \"escape key console toggle\"\n  }))), mdx(\"h3\", null, \"Toggle all nested elements\"), mdx(\"p\", null, \"Clicking an element within the Elements tab will expand that particular element\\nand show you any children elements belonging to it. Sometimes, elements can be\\nnested several layers deep. By holding the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"option\"), \" key while clicking an\\nelement, you can expand \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"all\"), \" children nested within that element.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/UCsgJYqUDCVUEg0q63/giphy.gif\",\n    \"alt\": \"toggle all nested elements\"\n  }))), mdx(\"h3\", null, \"Scroll element into view\"), mdx(\"p\", null, \"Sometimes you may see an element with your Elements tab and wonder where exactly\\nthat element lives on the page. Usually, you can see the element get highlighted\\non the page as you hover it in the Elements tab, but sometimes the element is\\nnot within the page view. If you right-click the element, you can choose the\\n\\\"Scroll into view\\\" option and Chrome will do just that.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/JK74tuyVCAyDtLcXHq/giphy.gif\",\n    \"alt\": \"scroll into view\"\n  }))), mdx(\"h3\", null, \"Toggle an element's visibility\"), mdx(\"p\", null, \"For whatever reason, you may want to toggle whether an element on your page can\\nbe seen or not. This can easily be done by simply hitting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"h\"), \" key while the\\nelement is selected in the Elements tab.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/t0ylr2sHarOQA8xuuF/giphy.gif\",\n    \"alt\": \"h to toggle hidden element\"\n  }))), mdx(\"h3\", null, \"Converting color formats\"), mdx(\"p\", null, \"When viewing an element's CSS \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color\"), \" property in dev tools, you can toggle\\nbetween RGB, HSL, and hex color formats by holding the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shift\"), \" key and clicking\\nthe color square. This can be convenient in various situations where you may\\nfind a color in one format, but need it in another.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/yZQQLiyyxVdkBjHLoO/giphy.gif\",\n    \"alt\": \"coverting color format\"\n  }))), mdx(\"h3\", null, \"Access recently selected elements in console\"), mdx(\"p\", null, \"Sometimes we need access to DOM elements in the console so that we can inspect\\nvarious properties or behavior. Chrome provides a quick shortcut to access these\\nelements within the console. If you type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$0\"), \" into the console, you will get the\\nelement you most recently interacted with in the Elements tab. If you type in\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$1\"), \", you will get the second most recent element you interacted with, and so\\nforth...\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/Fbpduv3lSKZX6eu1N5/giphy.gif\",\n    \"alt\": \"most recent elements console access\"\n  }))), mdx(\"h3\", null, \"Run commands\"), mdx(\"p\", null, \"By pressing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"command\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shift\"), \" + \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"p\"), \", you can search dev tools for nearly\\nanything and quickly\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/chrome-devtools/command-menu\"\n  }), \"run various commands\"), \".\\nThis gives you extremely quick access to many features of the dev tools. Give\\nthis one a try, you may find something you didn't know existed.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/diz6pCLIjt8O1hLNkK/giphy.gif\",\n    \"alt\": \"run commands\"\n  }))), mdx(\"h3\", null, \"Blackbox scripts\"), mdx(\"p\", null, \"Ever get stuck debugging in some random runtime file that you never wanted to be\\nin?\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.chrome.com/devtools/docs/blackboxing\"\n  }), \"Blackboxing scripts\"), \" is\\nyour new friend. If there is a script that you do not want your debugger to go\\ninto, you can right-click it and select \\\"Blackbox script\\\". Easy enough.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/0QiT8USJ5inJFmxEF1/giphy.gif\",\n    \"alt\": \"blackbox scripts\"\n  }))), mdx(\"h3\", null, \"Conditional breakpoints\"), mdx(\"p\", null, \"If you have used the debugger in the dev tools before, you are likely aware that\\nyou can set breakpoints to pause your code execution. In addition to your\\nstandard breakpoint, Chrome allows you to also set\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints\"\n  }), \"conditional breakpoints\"), \".\\nThis allows you to specify that a variable must have a certain value in order\\nfor the breakpoint to hit. This can be very convenient when you are trying to\\ndebug an issue where a particular value must be present. To set a conditional\\nbreakpoint, right-click the line you want to set it at and click \\\"Add\\nconditional breakpoint...\\\"\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/n7oOV9shQmzJTDwkNt/giphy.gif\",\n    \"alt\": \"conditional breakpoint\"\n  }))), mdx(\"h3\", null, \"Networking calls: Who called what?\"), mdx(\"p\", null, \"Sometimes we see network calls in the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/chrome-devtools/network/reference\"\n  }), \"Network\"), \"\\ntab and we're not sure where they came from. Chrome has a neat trick that shows\\nyou if one network call was initiated by another call and if that network call\\nin turn has dependencies of its own. To take a look, simply hold \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shift\"), \" while\\nhovering a network call. Initiators are colored green and dependencies are\\ncolored red.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/fH8XjzbnTUDJGcHAJ4/giphy.gif\",\n    \"alt\": \"networking calls\"\n  }))), mdx(\"h3\", null, \"Select multiple networking request types\"), mdx(\"p\", null, \"If you are familiar with the Network tab, you are likely aware that you can\\nselect a certain type of network request to filter your results, e.g. XHR. But\\nmaybe you are interested in both XHR and JS requests. By holding \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"command\"), \" and\\nclicking different request types, you can select multiple types of requests at\\nonce.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://media.giphy.com/media/C4SHhZBSYBKkMv4wrx/giphy.gif\",\n    \"alt\": \"multiple network request types\"\n  }))), mdx(\"h3\", null, \"Wrapping up\"), mdx(\"p\", null, \"The Chrome Dev Tools are seriously impressive. These tips are just the tip of\\nthe iceberg. The deeper you dive into what features are available to you, the\\nmore amazed you will be. The\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developers.google.com/web/tools/chrome-devtools\"\n  }), \"documentation\"), \" is a\\ngreat reference. If you are more of a visual learner, I would recommend the\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://frontendmasters.com/courses/chrome-dev-tools/\"\n  }), \"Mastering Chrome Dev Tools\"), \"\\non Frontend Masters by \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/jkup\"\n  }), \"Jon Kuperman\"), \".\"), mdx(\"p\", null, \"Thanks for reading, I hope you learned something!\"), mdx(\"p\", null, \"If you enjoyed this post or found it useful, please consider\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.adamgoth.com%2Ftips-and-tricks-chrome-dev-tools\"\n  }), \"sharing it on Twitter\"), \".\"), mdx(\"p\", null, \"If you want to stay updated on new posts,\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonType%3DFollowButton%26query%3Dhttps%253A%252F%252Ftwitter.com%252Finit_adam%26widget%3DButton&ref_src=twsrc%5Etfw&region=follow_link&screen_name=init_adam&tw_p=followbutton\"\n  }), \"follow me on Twitter\"), \".\"), mdx(\"p\", null, \"If you have any questions, comments, or just want to say hello,\\n\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://twitter.com/messages/compose?recipient_id=33618361\"\n  }), \"send me a message\"), \".\"), mdx(\"p\", null, \"Thanks for reading!\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Tips and Tricks: Chrome Dev Tools","date":"2020-10-29","author":"Adam Goth","preview":"I recently spent some time diving into all that Chrome's developer tools have to offer. It's quite impressive what the Chrome team has built to make the lives of web developers easier. In this post, I will share a handful of the nifty things I learned.","keywords":["javascript","react","web development","development tools","chrome","browser"]},"timeToRead":3}},"pageContext":{"id":"b48d9778-d962-5757-98db-f877ea2c8fc1"}},"staticQueryHashes":["63159454"]}