Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show source of selector stats #142

Open
Whip opened this issue Apr 3, 2023 · 4 comments
Open

Show source of selector stats #142

Whip opened this issue Apr 3, 2023 · 4 comments
Labels
feature New feature or request tracked This issue is now tracked on our internal backlog

Comments

@Whip
Copy link

Whip commented Apr 3, 2023

Loving the feature of Performance > Selector stats. Its really useful however it would be even better if Edge could show where it found a specific selector in file and line number or multiple places. Also an ability to Ctrl + C on the selector would be handy to copy and search in the code.

AB#44039946

@captainbrosset
Copy link
Contributor

Thanks for the feedback. We recently added the ability to copy the content of the Selector Stats table. You can click and drag anywhere in the table to select text and then copy it. In fact, you can also copy the entire table and paste it in Excel for example. This can be very useful when you want to do some aggregate analysis over multiple recalculate style events.
Let me know if this helps you search for specific selectors in DevTools.

Now, as for showing the actual file names and line numbers, I'm not entirely sure how feasible this might be. I'm not sure if this information is preserved in this part of the brower's rendering pipeline.

@robpaveza, would you be able to help here? I'll mark this up as a feature request and make sure it shows up on the team's radar. But I thought it would help having some early discussion on the feasibility here.

@captainbrosset captainbrosset added feature New feature or request tracked This issue is now tracked on our internal backlog labels Apr 4, 2023
@Whip
Copy link
Author

Whip commented Apr 5, 2023

Thanks for the quick update. As a web designer, this would be a great help if it can be done.

@leotlee
Copy link
Collaborator

leotlee commented Apr 5, 2023

Thanks @Whip for the feedback. Below are things already in our plans and we're currently working on adding them:

  • ability to copy entire Selector Stats table
  • linking to originating source of selectors

@warpech
Copy link

warpech commented May 10, 2023

We recently added the ability to copy the content of the Selector Stats table. You can click and drag anywhere in the table to select text and then copy it.

I love this ability, but there is a problem: it doesn't work for large stylesheets. The Selector Stats table uses virtual scrolling and it does not copy all rows if you have 100s of them. To some extent this can be fixed by reducing the font size in DevTools, but that's still not enough for my app.

Looking forward to the ability to copy entire Selector Stats table, or to download it as CSV.

linking to originating source of selectors

This is by far more important, especially given that:

  • user agent stylesheets are mixed with page stylesheets
  • the tool would be the most useful if it used a sourcemap to link to the original source (SCSS, etc)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request tracked This issue is now tracked on our internal backlog
Projects
None yet
Development

No branches or pull requests

4 participants