Chrome's Inspect Tool Question

Hey All,

You know the bar at the very bottom of Chrome’s Inspect Tool? The part that shows the current DOM element being viewed? Is there a way to copy and paste that? I’m doing a lot of small WP customizations and it would be much quicker than typing those in manually after targeting them.

Cheers

Right Click, Copy Element

Right-clicking doesn’t do anything for me… no option to copy.

So you don’t get the dialogue boxes shown below? Are you by any chance on a company network, where features may have been disabled within the browser?

I do, but I was talking about the very bottom bar in my attached image, the part highlighted in blue, for when I want to target that exact class.

Is it not the same as Copy → Copy selector ?

No, it sometimes gives me extra information with the piece I want, and sometimes it’s missing the class altogether. It’s not a huge deal, just wondering what the fastest way is to grab specific groups of classes as they appear in the bottom bar. I have to do it a lot when working with WP themes.

Thanks



results in:

<p>I do, but I was talking about the very bottom bar in my attached image, the part highlighted in blue, for when I want to target that exact class.</p>

Or are you talking about all instances of the class? That might get messy.

1 Like

I’m talking about this part

As others said, if you right click and copy > copy selector, the result is something like this

#ember1478 > div > div:nth-child(3)

That’s not what you want. The other way is on your right (where you see the style for the selected element) there is a plus button, click it and then just cmd+c to copy and you get

.topic-post.clearfix.topic-owner.regular

Exact same element as highlighted at the bottom in blue. In your case you get .main-link.clearfix

The button is called “new style rule”. That’s what you’d use to add a new style, but you can use it for your needs too.

TIP: You don’t need to copy elements one by one. If you keep the plus sign clicked then select “inspector stylesheet” Then go through all the elements you need, all those elements would be in an "“inspector-stylesheet” file where you can select and copy all your elements in one

4 Likes

Thank you! That’s exactly what I was looking for.

Thanks again everyone

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.