WebPerf 9 Best Chrome Extensions for Web Developers

If you’re a web developer, you probably spend a lot of time in Chrome. Since it’s the most popular web browser with a 44.5% market share, you’re liable to constantly use it to preview web pages that you’re working on. If Chrome is your default browser, you can make your life easier by using the best Chrome extensions for web development.


With Chrome extensions geared towards web developers, you can edit code on the fly, check performance, analyze the tech stack of other websites, and much more. Although Chrome Devtools does offer an impressive set of features and functionality, many of the tools presented in this post aim to extend the current functionality of what Devtools provides.

Below you’ll find a list of 9 useful Chrome extensions for web developers.

Code Editors

1. Web Developer




One of the most robust Chrome extensions for people who create web apps and sites is Web Developer. It allows you to do everything from write and edit HTML and CSS as well as disable and enable cookies, mark all links as visited or unvisited and display a variety of information about images, including ALT text, image dimensions, and image paths.

The extension also allows you to outline a number of objects on a web page, including frames, headings, and floating elements. Additionally, you can automatically make changes to a site, such as turning all forms from GETs into POSTs, and vice-versa, as well as clearing form data and making frames resizable or un-resizeable. Even if you have a separate editing tool, Web Developer is a valuable extension that can help you edit websites on the fly.

2. JSONView




If you want to check JSON code in Chrome, whether it’s your own or another site’s, doing it through Chrome can be a pain. Unless you’re interested in viewing code as a wall of text or having to download it, consider installing JSONView. This extension was originally created for Firefox, but it was ported over to Chrome.

This extension shows you JSON code in an easy to read manner, includes the ability to click on links and even does basic validation. It also provides collapsible arrays and objects, just like when you view XML, and it lets you configure parsing methods and will display code even if it contains errors.

3. Stylebot




Using Stylebot, you can easily modify and test CSS. Along with being able to load saved stylesheets, you can also pull stylesheets from other sites and apply them to a web page using this extension. Previews can be set up to show changes to a site as you make them.

The extension also allows you to determine if you want to use the advanced editing option, which lets you make changes by editing CSS code, or by using the basic editing tool. Basic editing enables you to fill out form fields instead of messing with CSS code. However, basic editing only allows you to do things like change font faces and sizes and create header settings.

Analytic Tools

4. Check My Links




Having a page full of broken links can be frustrating for visitors and frequent users alike. Using Check My Links, you can find out within a few seconds if there are any broken links on a page. The extension allows you to ensure that it’s not looking at a cached version of a page, and it lets you use either HEAD or GET to check links.

While this is a pretty basic extension, it’s a great Chrome extension for developers because it also allows you to put in a list of domains that you don’t want to be checked. For instance, if you want to exclude ad networks from the domains that the tool checks, you can do that. You can also use the tool to verify both internal and external links, and you have the option to check or not check nofollow links.

5. Sonar




Websites can run slow for any of a number of reasons, including a slow server, lack of caching, scripting issues and large page sizes. Finding out why a site is running slow is essential since studies have shown that people will leave websites on computers and smartphones if they don’t load within 2-3 seconds.

Sonar breaks down information about connections to web pages and shows how long they take to load. Along with showing the total load time in milliseconds, you can also see what types of media and files are being loaded, including scripts, CSS and images. You can also see how many domains are involved in loading a page and how long it takes for data to arrive from each domain.

There are many other web-based speed test tools that you can use to test the performance of a website, however, if you’re looking for a quick solution that always just a click away, this extension works great.

6. Wappalyzer




Many web developers get ideas from other websites. One of the easiest ways to figure out how to create your own version of a feature or tool for a site that you’re designing is to determine what platforms a site is running on.

Wappalyzer can pull a huge amount of information about a site, including the CMS that it is being run on, the programming languages that are being used and the database management systems that have been implemented. The extension can even identify the advertising networks, the JavaScript frameworks and the type of network storage being used on a site.

Some of the platforms and tools the extension can identify include:

• Advertising systems
• Analytics
• Captcha
• Comment systems
• Document management systems
• Marketing automation
• Network storage
• Payment processors
• Paywalls
• Widgets

Other

7. Window Resizer




For web developers and app developers, knowing what your application looks like on various screen sizes is essential. Even if you’re designing a website or app to be adaptive or responsive, you still need to verify that the site or app will work on a variety of screens. While you could test a site on several devices, the easiest way to verify that things will fit properly is to use Window Resizer.

Using this extension, you can either pick from a number of preprogrammed and common screen sizes or put in manual width and height settings. The only downside is that the scrollbars on Chrome won’t always mimic what you see on a different device, but you can still verify that elements will show up properly.

8. Clear Cache




This extension is a souped up version of what’s already available in Chrome. While you can go through Chrome’s Clear Browsing Data option, this extension gives you a great deal more options on exactly what you want to be cleared, and it will save your preferences.

For instance, if you just want cookies from a particular domain cleared, you can have the extension handle this for you. Additionally, you can clear out things like your local storage data and plugin data as WebSQL data, which is very helpful since you can’t automatically or easily clear WebSQL data through Chrome.

Clear Cache allows you to delete the following:

• App cache
• Cookies
• Downloads
• File systems
• Form data
• Indexed DB
• Local Storage
• Plugin Data
• Passwords
• WebSQL

9. OneTab




OneTab is arguably one of the best Chrome extensions for users of any type. If you’re like many people, you end up with a lot of Chrome tabs open. This not only can make it difficult to go back to the tab you currently need, having a bunch of tabs open can also start eating away at your computer’s resources at Chrome starts using increasing amounts of memory.

This extension allows you to keep track of the tabs you’re using and have visited without needing to keep them open or worrying about bookmarking them and coming back. As soon as you start to notice that you have too many tabs open, you can just click on the OneTab icon and have your tabs converted to a list. Using this extension also allows you to walk away from your computer without having to worry about Chrome crashing and taking all your tabs with it.

Summary


Whether you’ve been developing websites and applications for years, having the right tools can make a huge difference in the time it takes to complete a project. The best chrome extensions are easy to use and can provide you with shortcuts and keep you from having to switch applications constantly.

Do you know of any other useful Chrome extensions for web developers that weren’t in this list? Let us know in the comments section.

---

The post 9 Best Chrome Extensions for Web Developers appeared first on KeyCDN Blog.

Continue reading...