If you’re a programmer who doesn’t use Chrome, you’re in the minority.
There are so many reasons to prefer this browser for programming, such as Google’s massive influence on the direction of the web, the built-in features that make development less frustrating, and the sheer number of available extensions.
That last point is a crucial one. As of February 2018, Chrome holds over 60 percent market share on desktops—it’s no wonder that most extension creators focus their efforts on Chrome first. That said, here are the best Chrome extensions you should be using if you’re a developer of any kind, but especially a web developer.
General Development Extensions
1. Session Buddy
Chrome has an awesome feature called custom user profiles that lets you create separate sets of bookmarks, settings, tabs, histories, etc. You should definitely set one up specifically for programming, if you haven’t already.
But Session Buddy takes it one step further, allowing you to save specific “tab sessions” and switch between them at will, which comes in handy when you’re working on multiple projects.
Download: Session Buddy
2. iMacros for Chrome
iMacros is an extension that lets you automate repetitive tasks. You can “record” certain actions (e.g. mouse clicks and key presses), save them as macros, then run them whenever you want with a single click. It saves so much time when filling forms, testing changes, etc. For macros outside of Chrome, we recommend AutoHotkey scripts.
Download: iMacros for Chrome
3. Web Timer
Web Timer tracks how much time you spend (or waste) on various websites, which can help curb tendencies to procrastinate. It only tracks when Chrome is in focus, and it’s smart enough to stop tracking when you’ve gone idle.
Download: Web Timer
If you want a more advanced time tracker, we highly recommend the cross-platform Toggl.
4. Awesome Screenshot
Awesome Screenshot is an all-in-one extension for grabbing screenshots, recording screen videos, annotating and blurring snapped images, and one-click sharing your screenshots with others. One nifty feature is its ability to screenshot an entire webpage and stitch it all together as one giant image. For a solution that also works outside of Chrome, check out these best tools for creating screenshots.
Download: Awesome Screenshot
5. Marmoset
Marmoset is a fun little tool for creating 3D screenshots of your code. Once you snap an image, you can rotate and skew and scale in 3D, which makes it more interesting when you want to share snippets. It’s also useful when creating code-based stock images or peeks at your source code on your project’s homepage.
Download: Marmoset
Web Development Extensions
6. Web Developer
If there’s one extension you install to aid in web development, let it be this one. Web Developer is packed with several convenience features, including one-click toggling of JavaScript and plugins, window resizing to test responsive designs, testing and debugging of images, and more.
Download: Web Developer
7. User-Agent Switcher
Of the many “user agent switcher” extensions in the Chrome Web Store, this one’s the best one. It’s still being updated, it doesn’t hijack links, it comes with a number of default user agent strings, but also allows you to create custom user agent strings. It’s the only extension of its kind that reliably works.
Download: User-Agent Switcher
8. Wappalyzer
If you want to know what kinds of web technologies are powering a particular site, Wappalyzer will tell you with a single click. It’s smart enough to detect CMSes (e.g. WordPress), web frameworks (e.g. React), tools and utilities (e.g. Google Analytics), e-commerce platforms (e.g. Shopify), and much more.
Download: Wappalyzer
9. IE Tab
As of February 2018, more than 13 percent of desktop users are still on Internet Explorer, which is a shame because IE is far from compliant with modern web standards. That’s why you need IE Tab, which emulates IE in a new tab and allows you to test websites in various versions: IE6, IE7, IE8, IE9, plus ActiveX controls. Really useful if you need your website to be compatible with ALL browsers, no matter how old.
Download: IE Tab
10. Click&Clean
When developing a website, few things are more annoying that constantly clearing browsing data to make sure you’re loading fresh changes. Click&Clean not only makes it faster, but also provides more control over what you can clean (e.g. delete databases and plugin data, keep cookies for certain sites, etc).
Download: Click&Clean
11. WhatFont
WhatFont is the fastest way to identify fonts on the web. It’s one thing to right-click an element, select Inspect Element, then look through the stylesheet to find what it is. With WhatFont, not only can you see what a font is just by hovering over an element, but it also tells you how that font is served (e.g. Google Fonts, TypeKit, etc).
Download: WhatFont
12. ColorPick Eyedropper
ColorPick Eyedropper is a tool that lets you zoom in and get the exact color code of any pixel on any webpage. The color code is available in hex, RGB, and HSL. It’s extremely convenient, and much faster than inspecting elements to see which colors are being used in the stylesheet, or downloading images and picking colors in an image editor.
Download: ColorPick Eyedropper
13. Lorem Ipsum Generator
When developing a website, you’ll eventually need some dummy text. Lorem ipsum generators are plentiful on the web, but Lorem Ipsum Generator is always immediately available right within your current tab. It’s fast, and you can customize how many paragraphs you want and how many sentences per paragraph.
Download: Lorem Ipsum Generator
14. Check My Links
At the end of a web development project, you’ll want to do a final pass on all the core pages to make sure all of your links are working. Check My Links makes that process as easy as possible. Simply click the button and it’ll scan all links on the current page, then highlight each one according to whether it’s broken or working.
Download: Check My Links
15. Dimensions
Dimensions is more of a tool for web design than web development, but since the two tend to overlap, you’ll probably want to use this extension. In short, it instantly measures the distance between any two web elements, including text, images, videos, and form fields. It can also measure the distance from the mouse cursor to any of those supported web elements.
Download: Dimensions
More Chrome Extensions That Might Prove Useful
In addition to the above, we highly recommend these tab management Chrome extensions and these business productivity Chrome extensions, which are two things that may frustrate you as a developer using Chrome.
You should also check out our huge selection of the best Chrome extensions, which covers everything from security to entertainment, from shopping to general productivity, and so much more.
Read Full Article
No comments:
Post a Comment