abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 07:08:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Quickly Search For A Component With React DevTools as a react til

Browse Source
This commit is contained in:
jbranchaud
2018-01-30 09:36:59 -06:00
parent c127e02a3f
commit eb5d896f08
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
react/quickly-search-for-a-component-with-react-devtools.md Normal file
View File

@@ -0,0 +1,17 @@
# Quickly Search For A Component With React DevTools
As the size of your React app grows, it can become challenging to track down
specific component within the [React
DevTools](https://github.com/facebook/react-devtools) extension. You opened
it up with the hopes of quickly inspecting the `props` being received by a
component, but find yourself navigating through the DOM structure instead.
The React DevTools extension provides a search bar that can be used to
quickly filter out most components.
![react devtools component search](https://i.imgur.com/dYd8SZD.gif)
The search bar is located at the top of the extension. Once you start typing
the results are immediate. Then, if you hover over any of the remaining
components, you'll get some visual feedback as they are highlighted in the
browser.