My favorite browser extensions

MageSpecialist DevTools for Magento 2

To me, this extension is gold. It hooks into the information added by a Magento module MSP_DevTools and uses it to display a handy toolbar with debugging info. More importantly (to me), it also allows you to inspect a specific HTML element and view its layout details, Block class and PHTML template. Even better, if you enable the PHPStorm Integration, you can open up the relevant files in the IDE right away. I love this tool.

https://github.com/magespecialist/m2-MSP_DevTools

KnockoutJS context debugger

Sigh, yes, KnockoutJS, still there. With Magento its backend and legacy frontend still being oriented towards KnockoutJS, having some tools available to debug things is definitely handy. The KnockoutJS Context Debugging extension allows you to inspect the context (aka ViewModel data) for a specific scope with a few mouse-clicks. Together with the uiRegistry of Magento, the browser extension allows me to debug KnockoutJS easily. A flaw of the extension is that the shown KnockoutJS scope is not dynamically linked (like with React and Vue DevTools), so a manual refresh is needed (closing down the Developer Tools, opening up the Developer Tools). But the extension definitely remains useful.

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof

Xdebug helper

For backend development, debugging things with XDebug is (sometimes) delightful. Turning on debugging is easiest with the XDebug helper. Simple and effective.

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

React Developer Tools and others

If you are developing with React, you are going to need the React Developer Tool, as simple as that. For instance, when dealing with large component trees, I found the tool extremely useful for tracking down props and state.

On top of the React Developer Tools, I've been using other React-related tools as well, like the Redux Developer Tool (when using Redux), Preact Developer Tools (when using Preact), Recoil Developer Tools (when using Recoil), etcetera. Handy, but less note-worthy.

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=nl

Vue Developer Tools

Likewise, the Vue Developer Tools are not to be missed when developing with Vue.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

ChromeiQL and/or Altair GraphQL Client

Connecting React or Vue to Magento, using GraphQL is nowadays quite common. For trying out queries (or mutations, with or without fragments) using something like GraphiQL is definitely a winner. GraphiQL comes in the form of built-in clients for apps, desktop apps and browser extensions. ChromeiQL is my favorite for its simplicity. But as soon as I need to replay the same queries or add HTTP headers (like with Magento GraphQL authentication) I prefer Altair (or Insomnia).

https://chrome.google.com/webstore/detail/chromeiql/fkkiamalmpiidkljmicmjfbieiclmeij

Windy

With Hyvä, a fresh wind (haha) started to blow through the Magento community. And because Hyvä uses AlpineJS and TailwindCSS, using browser extensions for those is definitely useful. But instead of mentioning the regular devtools first (see below), I love to point out Windy first: It is a commercial plugin (though very affordable) that allows you to turn any HTML/CSS snippet in TailwindCSS utils (where possible), which definitely is a time-saver if you're new to Tailwind.

https://usewindy.com/

Tailwind devtools

Just like with earlier developer tools for specific frameworks, the Tailwind devtools has nice additions which are nice when developing Tailwind nicely, just nice.

https://chrome.google.com/webstore/detail/tailwind-devtools/lehhmglccbkmehbbldcmekdegmapaknb

AlpineJS devtools

Yet another framework-specific devtools, the AlpineJS devtools allows you to analyse the state (data) of components, so is not to be missed out on.

https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk

Blackfire Profiler

If you dig Blackfire and you need to profile an application quickly, the Blackfire browser integration does exactly that.

https://blackfire.io/docs/integrations/browsers/chrome

Other browser extensions

I'm using many more browser extensions though. The listing above is mainly focused on application development with Magento and Shopware. Other extensions I find useful include LastPass, AdBlock, CSSViewer, various ElasticSearch extensions (none of which I would prefer over the other), HeaderEditor, JSONVue / JSONView, Lighthouse (duh), LiveReload, TamperMonkey and about 20 more. And Extensions Manager to manage all of these.

Hope you get something out of this. And do share your own favorites below if you would like.