Chrome setup and useful plugins for Web Development
I've been using the Chrome browser's multiple user accounts to be used for both work and home for almost a year, and it's about time I document the usefulness and how I am sticking with this now. As well as the disadvantages that may come forth from using this technique.
I covered in general detail about my Chrome browser setup in a previous article about the chrome extensions I used, but 3-4 months have passed and the progress to simplicity has slightly changed.
Chrome extensions/apps
1. Bulk URL Opener
The Bulk URL Opener is used for work relating to:
- opening multiple URLs in one go, pasted through a list of URLs likely found in a spreadsheet.
- simply opening a lot of mutliple URLs with slightly modified query parameters, e.g.
?p=1,?p=2, … which I would duplicate and modify slightly through the use of a text editor like Atom or Sublime Text 3 using multiple cursors. - testing for myself opening the webpages to check their response codes, when tools to do this headless are not applicable. In most cases they should be applicable, but if I need to view the different webpages with clear visual inspection I would open them up in bulk.
2. News Feed Eradicator for Facebook
As a web developer I wouldn't be browsing through Social media as often as other job roles, but when I do I wouldn't need to view a news feed on Facebook.
So the best idea would be to 'eradicate' it, rather than ignoring it. Because in reality I wouldn't be ignoring something that's been optimised to be viewed i.e. a Call-to-Action post.
You don't know what you don't know.
The extension provides a handy quote to keep you away from procrastination. It's quote motivating whilst you are clocked through problem solving too!
3. Take Webpage Screenshots Entirely – FireShot
Taking a screenshot of an entire webpage is great to use to share with colleagues and clients rather than informing them to scroll 'halfway' through a webpage to determine where you meant about your attached screenshot.
Through WordPress this proves as a great tool to screenshot that 20-something list of WordPress plugins you might have on a website (even if it's not yours!) with having to deactivate all of them to discover the root cause of a certain problem (or if it's required as troubleshooting through a support ticket).
That way, you can place the screenshot side-by-side with your Plugins page, and begin reactivating the plugins.
Just remember that if you will be using this plugin to appropriately select the filetype to save the screenshot as.
- Save as JPG if you've got a lots of colours in the screenshot.
- Save as PNG if you have mostly single-colour images.
And if you will be attaching the screenshot through an email, you might as well compress the image using the free TinyPNG.com.
4. Wappalyzer
The extension's description says it all — Identify web technologies.
This extension would replace its own icon as found in the Chrome menu of an icon that the website's platform has been determined about.
For example, upon visiting a WordPress website you will see the following icon in your Chrome Menu:
It seems to be nice and easy rather than using the BuiltWith.com Tech Lookup. It's up to you to decide but I would stick to Wappalyzer since it's already there. I have used BuiltWith.com in the past as well their Chrome extension, but it has not appealed to me as much as Wappalyzer has!
5. Web Developer
An absolute staple for any web developer is the self-entitled Chrome extension 'Web Developer'.
Disable JavaScript
Yes, people still do disable their JavaScript. But rather than working to make sure that your JavaScript is a flair to the experience rather than a requirement to use your website, I also use the Disable JavaScript feature to check if something is negatively impacting the website because of a JavaScript file.
With regards to SEO, Google's crawlers/spiders are now fully crawling JavaScript. This includes JavaScript-only websites like Wix.
So JavaScript should not be a problem with SEO.
And we are heading to the future where JavaScript is everywhere. And so outdated technologies will have to keep up (this means banking intranet!).
Disable Images
I would use this to work on websites which might have images which are distracting to my work. If I am there to simply do some web work, I wouldn't have to view the images and play momentary thoughts in my mind about the image I just viewed. It doesn't have to be inappropriate. It could even be an image about a cat meme website. But that would only cause further distraction the focused state one is on. It's like playing an intense eSport game only to have sexy advertisements block up your screen during a game! Not good and subtly these distracting images does play a factor to being distracted. There's no doubt that if they might be distracting, then they certainly are.
Outline Block Level Elements
If during a web development project you find that you seem to be creating a horizontal scrollbar, you can get clues to the cause of the overflown element using this feature.
Again, totally handy and seems to be the best visual aid for a web developer working through so many elements!
I don't use this as often but only when I come across an unintended horizontal scroll bar would I enable this tool for a moment.
6. What Runs [Bonus]
I've recently been making the move to an even better extension for identifying what a website is made out of — What Runs.
Compared to Wappalyzer, this extension goes one step further and determines more accurately the scripts that the website uses.
Let's say there's a Live Chat feature on a website. This doesn't happen to be picked up by Wappalyzer nor BuiltWith. But apparently is picked up by What Runs!
What Runs can also pick up WordPress plugins used by a website, even though it might not be the best tool for that.
3 Advantages of Multiple Chrome account setup
1. It separates work from home
If you've got different saved passwords or Chrome extensions tied to your Chrome browser at work, you will want to create a Work profile to separate the login details that can be found on your Work profile.
No, it doesn't have to do with saved passwords. But it does have to do with the extensions you may have enabled for the Work profile. And it may have to do with the Startup page/tabs for that Work profile.
If you are at home, isn't it best to have something relaxing like the 'Momentum' chrome extension (for new tab) open up?
Or if you're at home for nothing work related to even show up?
There is a time of the day that is important to have and that's total disconnection from work for at least 1 hour. That is totally important and should be understandable that for just 1 hour you can wind down.
2. You can use a certain profile on another device
If you have multiple devices at work which would need the same Chrome profile (for extensions, apps, saved passwords, history), then you can setup the Work profile on multiple devices! Same goes true to a Home profile.
I currently have the Work Profile set up on a MacBook at home, a Windows 10 PC at work, and another Windows 10 laptop at work.
My Home profile is found on my MacBook, and the Windows 10 PC as well.
It's just so flexible, and definitely the separation between Work and Home can be done based on how you'd like it to be setup with no limitations.
3. Browsing history is separated
You can get the full advantage of separating browsing history by separating the profiles between Home and Work. If you have made use of the Browsing history search feature before, you will find how amazing it is to separate browsing history! It is much easier to find something work-related if it's on a Work Profile, rather than finding out that proper term that isn't a Home-related browse through the Web.
This will apply to the use of Chrome extensions in relation to what you browse. If you will be browsing through YouTube a lot at work, then your search results can get muddied up with all kinds of search phrases used… and that will make it even more difficult to find something through the Browsing history for work. In all cases the most logical solution will be to use a Work profile separate from a Home profile.
Chrome themes are separated
This is a simple one, but it is definitely useful to know that if you are using a certain theme of Chrome, that you mean business. Or that if you have a rather more independent theme like the Marc Ecko Chrome theme, of which to signify the brain that you are there to browse and have some down time.
This helps to have a more professional Chrome theme at Work when you will have to be creating screencasts or animated images/screenshots to show to your clients. It would be rather unprofessional to have a Marc Ecko theme as your Chrome browser's theme, wouldn't it?
The 1 Disadvantage of Multiple Chrome account setup
It separates work from home
I know that this shouldn't be a disadvantage as such an oxymoron, but the reality is you shouldn't give the thought that work is different from not being at work. It sounds promising at first but if you are going to dread the Mondays then there is surely something wrong. They state that if you hate the Mondays back to work then you are truly not enjoying your work. Of course, work is important and this is just a human bias (the Bandwagon Effect) and shouldn't be treated badly. It's natural to think that 'oh I should hate Mondays, because that's what everyone else is doing', and that's where the Bandwagon effect comes into play until you realise it.
Instead, the best way to go about this is to look forward to Mondays as much as possible through the senses. Like the coffee at work? Like to stroll to work? It is required that work is something to look forward to no matter what. And that's where experimenting with your own psychology comes into play. It's zany how one enjoys the weekends so much but the start of work is a dread even though one really does enjoy work in the process.
To get a feel of looking forward to Mondays, just capture the fleeting moment.
I will not waste my days,
Making up all kinds of ways,
To worry about all the things,
That will not happen to me.
— Jason Mraz, from the song 'Living in the Moment'
Thank you for reading! If you liked this article, please check out my 2-part mini-series Web Development setup for Windows 10. It's taken reference to this Chrome setup, and the best programs to use for Web Development (particularly front-end of which I currently practice).