Copy React Props to Your Clipboard in Google Chrome

While working on a React project today, I was looking to copy a property 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
    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
    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.
    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
    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.