Unable to see key value in React or Chrome devtools

问题

Consider the following JSX with an intentionally added duplicate key:

<table>
    <tbody>
        <tr key="row1">
            <td>row1_col1</td>
        </tr>
        <tr key="row1">  <--- same key here
            <td>row2_col1</td>
        </tr>
    </tbody>
</table>

As expected this leads to

index.js:1 Warning: Encountered two children with the same key, row1. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Now imagine I get this error and don't know the key values and want to check them in the Devtools.

Inspect element in the normal Chrome Devtools won't show the key:

And the React Devtools also don't show the key / won't show the <table> and <tr> at all:

What am I doing wrong? How to view the keys in the Devtools?

回答1:

Solved by changing settings. In React devtools: Components tab -> settings symbol -> components -> remove or disable the filter type equals host (e.g. <div>)

来源：https://stackoverflow.com/questions/65552907/unable-to-see-key-value-in-react-or-chrome-devtools