Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
25 lines (21 sloc) 1.59 KB
id title date description tags categories
073113834db2636626f975802fa5d7d8
Copy React props to your clipboard in Google Chrome
2018-07-14 12:26:27 -0400
Learn how to copy React props to your clipboard using Google Chrome and the React Developer Tools.
Today I Learned
React
Dev Tools
JavaScript

While working on a React project today, I was looking to copy a property that was passed down to a component. After searching around, I found out it's surprisingly easy.

  1. Open up the React Developer Tools tab within the Chrome inspector. Step one, selecting the React tab within the Google Chrome developer tools
  2. Select the component or element which contains the property you want to copy. Step two and three, selecting a component and then right clicking specific indicator
  3. Right-click the {…} and select Store as global variable from the menu.
  4. Navigate to the console tab. Step four and five, navigating to the console tab and then taking notice of a new variable.
  5. You will notice a global variable was added with a naming convention similar to $tmp or temp1.
  6. Copy the value to your clipboard by typing copy($tmp) into the console. Step 6, copying the value to your clipboard

What’s great about this trick is almost any value which has the {…} beside it within the Chrome inspector can be set as a global variable. Therefore this method is not limited to the React Developer Tools.

You can’t perform that action at this time.