A few Chrome extensions for webdevs

A bunch of Chrome extensions that I use regularly for various web development purposes.

Image credit

I appreciate every tool that makes it easier working on a website. Browser extensions are one of these and they often save a lot of time. I won't list some well-known ones here, just a few with often specific purposes.

JavaScript Errors Notifier

Notifies JavaScript errors by icon in toolbar bar or notification popup

I use (see) this one the very often, unfortunately :) It's an outstandingly handy extension because puts a red icon to the bottom-right corner of the page if a JavaScript error occurs. This way you know at once that there's something to fix. No more clicking around in vain to find out why the page is not working.

Chrome Web Store

Copytables

Chrome extension to select and copy table cells.

As its description says, it allows copying table cells, among other things. Just hold down ctrl and/or alt and click to select cells or columns. After making a selection, you can copy values (in different formats), but there's even more: you can see some stats as well. For example, the count of cells, the average, sum, etc. I didn't pay too much attention to this feature but a few times I really appreciated it as I could easily check various data, without opening a calculator.

Chrome Web Store | https://merribithouse.net/copytables/

Utime

Converts UNIX timestamps to human-readable dates and vice versa.

This was a real lifesaver for me when I worked on a timesheet application. I could easily check a timestamp's human readable value, which would have been otherwise very cumbersome. But you can also modify the value, whether the timestamp or the rendered datetime string. Sometimes I needed to adjust timestamps in the database via PhpMyAdmin, and using Utime it was a breeze.

Chrome Web Store

JSON Viewer Awesome

This extension assist you to visualize JSON response from any website or API request in your browser.

This extension comes very handy when I'm working with JSON data, eg. with APIs. Automatically beautifies JSON but has an input area where you can enter your custom JSON. A very nice feature of it is the "Graph" view mode that beautifully shows the hierarchy.

Chrome Web Store

XV — XML Viewer

Powerful XML viewer for Google Chrome

Just like JSON, XML is another type of document that is easier to understand visually (at least for me). This extension does a great job in visualizing data, and shows an outline of the document as well. You can search nodes by name or xpath, which is a big plus.

Note: allow the extension to access file urls, so you can drag-and-drop an xml to the browser and use the extension.

Chrome Web Store

CSS Used

Get all css rules used by the selected DOM and its children.

Sometimes I need to get all the CSS styles for a given element, eg. duplicate the appearance in a static HTML document. I've tried a few extensions but this one worked the best.

Chrome Web Store

+1: Dark Reader

Dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.

It's a popular extension and while actually I prefer the original authored site colors, it's fun to see sites in dark mode. At work I noticed some colleagues using this extension so I went ahead and corrected some color issues on some of our internal sites. Most of the time the dark mode looks just fine, but it's not a bad idea to check the site you are currently working on in dark mode.

Chrome Web Store

+2: SimpleExtManager

A simple menu to enable, disable and access options of extensions.

Allows managing extensions in a user-friendly way, recommended if you have more than a dozen of them.

Chrome Web Store

That's all

...for now, perhaps I'll add some more in a later post. Feel free to suggest similar ones in the comments below.

0 comments Comments