Pinterest Stumbleupon Whatsapp
Ads by Google

Chrome recently captured a 25% share of the Internet browser market, making it the second-most-used browser in the world behind Internet Explorer (which is evolving into Project Spartan Project Spartan: a Lean and Unfinished Browser for the Modern Web Project Spartan: a Lean and Unfinished Browser for the Modern Web Spartan picks up the fight with browser competitors like Chrome and Firefox. Will it live up to the ideals of Spartan soldiers? We've put this first version to the test and were not impressed. Read More ). Ultimately, this means that Chrome is the de facto home for web developers.

Though I’m partial to Firefox, I can appreciate why people love Chrome. It tends to dominate browser benchmarks Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark Browser Wars: Firefox vs. Chrome vs. Opera, The Definitive Benchmark If you could only choose one browser, which one would it be? Which is best: Firefox, Chrome or Opera? We'll show you. Read More and it makes it easy for regular folks to become Chrome power users How To Become A Chrome Power User, Part 1 - Master The Keyboard How To Become A Chrome Power User, Part 1 - Master The Keyboard Google Chrome for some time has been the browser of choice for many and although the majority of our web browsers can do some pretty impressive things, Chrome has continued to snatch up power users,... Read More . Others actually hate Chrome but are stuck using it I Hate Google Chrome But I'm Trapped In It. Here's Why I Hate Google Chrome But I'm Trapped In It. Here's Why In the Chrome vs. Firefox war, I'm siding with the Google users. But I don't want to. Chrome is my browser of choice because it has features that I can't live without. Read More due to the availability of certain extensions.

That’s one reason why Chrome is so good for web developers: the Chrome Web Store How Safe Is The Chrome Web Store Anyway? How Safe Is The Chrome Web Store Anyway? A Google-funded study has found that tens of millions of Chrome users have add-ons harboring malware installed, representing 5% of total Google traffic. Are you one of these people, and what should you do? Read More and its pool of extensions. If you ever plan on designing or coding a website, here are some essential tools that you should install right away.

ColorZilla

chrome-webdev-colorzilla

ColorZilla started as a Firefox addon, but it became so popular that many requested a Chrome version. Now here we are. This handy extension is basically an advanced version of the eye dropper tool that you’d find in a program like Paint or Photoshop.

With it, you can point to any spot in your browser and immediately pull the color information at that spot. Once pulled, you can tweak it (whether by RGB, HSV, or straight hex) before copying it to your clipboard. Extremely easy to use.

Ads by Google

It also comes with a CSS Gradient Generator, a Webpage Color Analyzer, and a few pre-installed color palettes for your convenience.

Window Resizer

chrome-webdev-window-resizer

One of the perils of the web developer is making sure that a website’s viewing experience is enjoyable for users across all kinds of devices. We’re not just talking about mobile vs. desktop — which is important — but also the difference between small tablets and massive monitors.

Window Resizer is an easy way to resize the browser window on the fly. At the click of a button, you’ll be able to test your website in various resolutions to see what your users are seeing — and then you can adjust accordingly.

IE Tab

chrome-webdev-ietab

Another huge peril of the web developer is browser standards (or the lack thereof). Internet Explorer, Firefox, Chrome, Opera, and all the other minor browsers will render websites in slightly different ways. Meanwhile, some browsers are slower to adopt standards than others.

Or in the case of Internet Explorer, standards are thrown out the window and web developers are driven to tear out their hair as they’re forced to make accommodations.

With IE Tab, this process is made a tiny bit easier. It allows you to view a website in a new Chrome tab, but rendered as it would appear in IE. Not a revolutionary solution to the problem of IE, but at least it’s something.

Validity

chrome-webdev-validity

Not all HTML code is equal. While browsers play a big role in standards compliance, part of the onus also rests on the web developer to follow good HTML practices. That’s why there are tools out there for testing and validating HTML SimplyTestable: Run Automatic HTML Validation Tests For Your Site SimplyTestable: Run Automatic HTML Validation Tests For Your Site Read More .

Validity is an extension that lets you do all of that without having to visit any third-party sites. Just open your website, click the button, and it will display all invalid HTML messages in the browser console. Validation is done through the W3C Validation Service.

BuiltWith

chrome-webdev-builtwith

One thing I hate about web development is that there are so many libraries, frameworks, and engines available to use. Freedom of choice is great, but it’s a pain when the number of technologies becomes so great that you can’t keep up with all of them.

Have you ever visited a website and wondered what the underlying technology is?

The BuiltWith extension is a single button that analyzes the current webpage to see all of the web libraries, frameworks, and engines that power it, including advertisement networks, content distribution platforms, and even the hosting software behind it all.

Postman REST Client

For those of you working with REST APIs, Postman is the one tool you need for a streamlined workflow. With it, you can construct HTTP requests and get formatted responses in JSON and XML. Responses are opened in a separate window as HTML.

You can also group multiple requests into something called a collection, which is a great way to stay organized and efficient. You can also test on multiple environments by switching up environmental variables right inside the extension.

Corporate Ipsum

chrome-webdev-corporate-ipsum

One way to generate filler text is to copy and paste “asdf” over and over again a hundred times. A better way would be to install Corporate Ipsum and let it generate filler text for you in the blink of an eye.

We’ve covered several Lorem Ipsum generators 10 Handy Alternatives If You Are Tired Of The Usual Lorem Ipsum Filler Texts 10 Handy Alternatives If You Are Tired Of The Usual Lorem Ipsum Filler Texts Web designers probably have a kitty of Lorem Ipsum tools saved close by that’s useful for their web development work. Lorem Ipsum generators come in various forms; some of them allow customizing the dummy text... Read More before, but the appeal of Corporate Ipsum is that it sits right in your browser. You can pull it up with a single button click. There’s no reason not to use it, if you ask me. Now you can get back to actually coding your website!

TabCloud

Web development sometimes occurs over multiple machines. While source control for developers What Is Git & Why You Should Use Version Control If You’re a Developer What Is Git & Why You Should Use Version Control If You’re a Developer As web developers, a lot of the time we tend to work on local development sites then just upload everything when we’re done. This is fine when it’s just you and the changes are small,... Read More is the main way to stay synchronized and up-to-date, what if you want to transfer multiple tabs across computers? That’s where TabCloud comes in.

TabCloud syncs your tabs to the cloud, allowing you to reopen them elsewhere. It can also be used locally as a session saver, allowing you to store a set of tabs for later revisiting. Tabs are saved to your Google account.

WhatFont

chrome-webdev-whatfont

Font design is a big component of web development, which is why services like Google Web Fonts How To Use Google Fonts In Your Next Web Project & Why You Should How To Use Google Fonts In Your Next Web Project & Why You Should Font choice is an integral design decision on any website, yet most of the time we're content with the same old serif and sans-serif family. While the main body of text should always be something... Read More have become so popular. The good news is that these free fonts are now some of the most beautiful web fonts Spruce Up Your Website With These 12 Beautiful Google Web Fonts Spruce Up Your Website With These 12 Beautiful Google Web Fonts Over the past decade, I've started a number of personal blogs that I never really followed through with, but some of my fondest memories rest on theme design and font tweaks. There’s something satisfying when... Read More currently available.

But admit it: there are times when you’re browsing the web and you come across a stunning font that you’ve never seen before. There are plenty of ways to identify it, but the fastest way is to use WhatFont. With it, you can inspect fonts simply by hovering over them. How could it be any easier?

Awesome Screenshot

chrome-webdev-awesome-screenshot

If screenshots aren’t part of your regular web development routine, Awesome Screenshot will help to change that. Screen captures are great for documenting changes in design and sharing works-in-progress with your client or team members.

This extension has several capture functions, including full page, selected area, or visible area. It also allows you to add annotations, blur sensitive portions of the image, and share with a single click. Or upload to your Google Drive instead.

If the concept intrigues you but you’d rather use a more powerful desktop program, check out this screenshot tool comparison 4 Best Tools For Creating Screenshots Compared 4 Best Tools For Creating Screenshots Compared CTRL + SHIFT + 4. Three keys - that's all you need for perfect screenshots. It doesn't need to be a hassle! Try these advanced screen capturing tools and you won't ever look back. Read More and start using the one that works best for you.

Check My Links

chrome-webdev-checkmylinks

Plenty of web development errors will frustrate your visitors, and broken links are one of the worst offenders. One broken link might be okay, but any more than that and your website starts losing credibility and reputation. Fortunately, this is an easily avoided mistake.

Check My Links does exactly what it promises: it checks your links. Valid links are marked green while broken links are marked red and at the end it’ll give you a percentage score. All you have to do afterwards is go and repair those links!

Which Extensions Do You Use?

One more extension for productivity I’d recommend is StayFocusd. It’s more of a general purpose extension rather than a web development extension, but it’s certainly useful regardless. It keeps you from being distracted by the web while you work!

What do you think of these? Are there any other essential web development extensions that you’d recommend? Share with us in the comments below!

  1. mahmoud Farahat
    June 2, 2016 at 6:10 am

    "edit this cookie" is also awesome.

  2. John Tighe
    June 5, 2015 at 9:38 am

    a note to the author..

    .. for the abundant # of very useful, time saving, problem solving and idea inspiring links to app's - thanks. It is yet once again a less than pleasant reminder, to me at least.. of the disposition of so many. So many great posts of this sort I have read.. and without exception, the author is bombarded with well, I won't be the one to repeat that of those who do what I refer to. Are worse things being done online?? yes. all I am saying is.. couldn't these people with all their negative leanings, can't they find anything good to add as well, not ANY Thing at all.. well .. sooner they figure one of the most fundemental laws the better ( for them as well as for everyone else ) in time.. it averages out quite accurately that the energy you take the time and 'energy' unintended to muster up.. is what will find its way back to you, yes or no / right or wrong / true or false. your opinion is important and probably isnt going away anytime soon.. so develop and strengthen it.

  3. Praveen Nirmalkar
    June 4, 2015 at 12:48 pm

    Awesome screenshot extension is not working. Whenever I open it I get the following error: An error occurred: Item not found. This item may have been removed by its author.

  4. DonGateley
    June 3, 2015 at 8:42 pm

    Another high content, well developed and highly useful article such as I've come to expect from MakeUseOf. Great job, Joel. <paragraph break> I'm just sticking my toe into web development and this will be a rich resource for me.

    • John Tighe
      June 5, 2015 at 9:51 am

      Don, I completely agree with your insightful and well deserved comment and completely and absolutely agree. I'm actually rubbing my eyes in disbelief.. glad to see your zvL+ in full view.

      JT
      BH-R
      IMRGinc.
      ____________________________
      _____________________MakeUseOf__

      • John Tighe
        June 5, 2015 at 9:53 am

        *
        **
        .. cut me some slack on that last post, ( or don't - all you neg types ) it is fairly late.

    • Joel Lee
      June 26, 2015 at 4:11 am

      Thanks Don! I appreciate it. :)

  5. Mohammed Aquib Azad
    June 3, 2015 at 5:05 pm

    Caret? Surprised it's not mentioned

    • Joel Lee
      June 26, 2015 at 4:12 am

      Wow, Caret actually looks pretty awesome and useful. Brilliant recommendation, thank you!

  6. A41202813GMAIL ..
    June 3, 2015 at 4:29 pm

    I Use A Lot Of Extensions For Managing Colors, Tabs, Windows, Text Insertion, Links, Fonts, Bookmarks, ... --- Cheers.

  7. ben hudson
    June 3, 2015 at 12:30 pm

    LastPass Dummy Text Colorzilla Awesome Screenshot Push Bullet Dropbox Widget Amazon Wishlist

    • ben hudson
      June 3, 2015 at 12:34 pm

      I forgot to mention: AdBlock, Bookmarks list from context menu, Tabs to the front!

    • Joel Lee
      June 26, 2015 at 4:13 am

      Thanks for sharing. How do you use Amazon Wishlist for web development? That one has me a bit confused. :)

Leave a Reply

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