{"id":29314,"date":"2017-02-24T21:01:49","date_gmt":"2017-02-24T13:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29314"},"modified":"2017-02-24T13:13:49","modified_gmt":"2017-02-24T05:13:49","slug":"react-dev-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/","title":{"rendered":"Add React.js Explorer to Chrome with React Developer Tools"},"content":{"rendered":"

Every web developer should already know about the amazing Chrome Developer Tools<\/a><\/strong>. This feature is built right into Chrome<\/strong> and it lets developers inspect pages<\/strong> and edit or remove elements<\/strong> right from within the browser.<\/p>\n

It\u2019s incredibly powerful and it\u2019s the best way to study page behaviors<\/strong> such as latency, page resources, or to execute console commands.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tGetting Started with React.js<\/a>\n\t\t\t\t<\/p>\n

Facebook\u2019s team created the React.js<\/a><\/strong> library which abstracts a layer for frontend developers to reuse certain UI elements<\/strong>.<\/p>\n

And now, with React Developer Tools<\/a><\/strong> you can inspect these element hierarchies<\/strong> and edit them right on the page<\/strong>.<\/p>\n

\"react<\/a><\/figure>\n

This is a completely free extension<\/strong> and it\u2019s developed by the folks at Facebook<\/strong> so you know it\u2019s good quality.<\/p>\n

You can also study the different states and the paths of object trees<\/strong> including which elements are above & below other elements.<\/p>\n

In the sidebar, you can browse through props and states<\/a><\/strong> which let you study the behavior of other elements in that same tree. This is actually a great plugin for newer React users<\/strong> because it can help them understand more about the library.<\/p>\n

Naturally, this also includes any event listeners<\/strong> that might change the state of a certain component. And the breadcrumbs at the bottom<\/strong> let you easily skim through parent\/child elements.<\/p>\n

This is far from the perfect React tool. But it will make your job a whole lot easier when you\u2019re building dynamic applications from scratch<\/strong>.<\/p>\n

It\u2019s completely open-sourced<\/strong> with an official GitHub repo<\/a> maintained by Facebook & updated frequently.<\/p>\n

\"firefox<\/figure>\n

You can install this Chrome extension<\/a> for any version of Chrome<\/strong>. Or if you\u2019re a Firefox user you can check out the FF add-on<\/a><\/strong> which supports FireFox v38 and higher. So far I haven\u2019t seen any support for Safari\/Opera users but it is an open source extension so this may come in the near future.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t5 (More) Useful Chrome DevTools Tips for Developers<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"

Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect pages and edit or remove elements right from within the browser. It\u2019s incredibly powerful and it\u2019s the best way to study page behaviors such as latency, page resources, or to execute…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[2998,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAdd React.js Explorer to Chrome with React Developer Tools - Hongkiat<\/title>\n<meta name=\"description\" content=\"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect\" \/>\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.hongkiat.com\/blog\/react-dev-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add React.js Explorer to Chrome with React Developer Tools\" \/>\n<meta property=\"og:description\" content=\"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-24T13:01:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Add React.js Explorer to Chrome with React Developer Tools\",\"datePublished\":\"2017-02-24T13:01:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/\"},\"wordCount\":321,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-dev-tools\\\/01-react-devtools-screen.jpg\",\"keywords\":[\"Chrome Extensions\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/\",\"name\":\"Add React.js Explorer to Chrome with React Developer Tools - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-dev-tools\\\/01-react-devtools-screen.jpg\",\"datePublished\":\"2017-02-24T13:01:49+00:00\",\"description\":\"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-dev-tools\\\/01-react-devtools-screen.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/react-dev-tools\\\/01-react-devtools-screen.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/react-dev-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add React.js Explorer to Chrome with React Developer Tools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add React.js Explorer to Chrome with React Developer Tools - Hongkiat","description":"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect","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.hongkiat.com\/blog\/react-dev-tools\/","og_locale":"en_US","og_type":"article","og_title":"Add React.js Explorer to Chrome with React Developer Tools","og_description":"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect","og_url":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-02-24T13:01:49+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Add React.js Explorer to Chrome with React Developer Tools","datePublished":"2017-02-24T13:01:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/"},"wordCount":321,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg","keywords":["Chrome Extensions","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/","name":"Add React.js Explorer to Chrome with React Developer Tools - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg","datePublished":"2017-02-24T13:01:49+00:00","description":"Every web developer should already know about the amazing Chrome Developer Tools. This feature is built right into Chrome and it lets developers inspect","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/react-dev-tools\/01-react-devtools-screen.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/react-dev-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add React.js Explorer to Chrome with React Developer Tools"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7CO","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29314"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29314\/revisions"}],"predecessor-version":[{"id":29315,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29314\/revisions\/29315"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29314"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}