Useful Snippets for In-Browser Console Usage

A Christian Heilmann project called Dear Console…. There are 18 in there right now and they are all pretty neat.

I’ll re-post one (submitted by Pankaj Parashar) I thought was very interesting as I’ve never heard of the main API being used:

        .filter(entry => entry.renderBlockingStatus === 'blocking' )
        .map(({name}) => name)
)Code language: JavaScript (javascript)

On this site:

Screenshot of the console running the snippet above, and returning a bunch of WordPress-related blocking resources on this site.


Aside from my hand-authored theme CSS, all the rest of that is just WordPress add-ons that are essentially Developer Experience trade-offs. For instance, the next file down is the CSS that WordPress loads to support blocks. I want that there because it makes sure any block I pick is rendered largely as intended (columns, chosen colors and sizes, etc.) In a perfect world though, it would probably only load a subset of CSS of the blocks in use on that page. Or at least could be combined into the main theme stylesheet to reduce a request (assuming that still matters a smide).

I have some doubts I’m using any of those internationalization (i18n) resources, so those should probably just be removed. And the polyfill-related stuff is likely the same deal.

I used to use the WordPress plugin MinQueue to deal with this situation, but it hasn’t been touched in 9 years and that’s just a little too abandoned for me. What’s the modern MinQueue?



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

3 responses to “Useful Snippets for In-Browser Console Usage”

  1. Adam says:

    I think the Script Manager feature in the (premium) Perfmatters plugin does a similar thing?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️