From db19f0116981f03ce829556f0df6482ef2d35cb7 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Mon, 5 Feb 2018 10:58:33 -0600 Subject: [PATCH] Add Visually Select A React Component For Inspection as a react til --- README.md | 3 ++- ...isually-select-a-react-element-for-inspection.md | 13 +++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 react/visually-select-a-react-element-for-inspection.md diff --git a/README.md b/README.md index 48c15b3..684c56b 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_604 TILs and counting..._ +_605 TILs and counting..._ --- @@ -432,6 +432,7 @@ _604 TILs and counting..._ - [Quickly Search For A Component With React DevTools](react/quickly-search-for-a-component-with-react-devtools.md) - [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md) - [Use A Ref To Autofocus An Input](react/use-a-ref-to-autofocus-an-input.md) +- [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md) ### Ruby diff --git a/react/visually-select-a-react-element-for-inspection.md b/react/visually-select-a-react-element-for-inspection.md new file mode 100644 index 0000000..0340da4 --- /dev/null +++ b/react/visually-select-a-react-element-for-inspection.md @@ -0,0 +1,13 @@ +# Visually Select A React Element For Inspection + +Similar to the _Elements_ tab of Chrome devtools, the [React devtools +extension](https://github.com/facebook/react-devtools) provides a visual +element selector to make it easier to inspect an element you can see in the +browser. + +![select and inspect a react component](https://i.imgur.com/cGgSZfN.gif) + +Open the React devtools, click the crosshair icon, hover around the browser +until the element you are looking for is visually highlighted, and then +click. The React component hierarchy will be expanded to reveal that +element. You can now inspect it or quickly navigate to nearby elements.