Alibaba Cloud

13 BEST Chrome extension for Web Developer

If you’re Web Developer,you should definitely check below extensions.This is part of BEST Chrome extensions series,if you want to check out the previous post,check out here or here or here!

#1.Web Developer

This extension adds a toolbar button to the browser with various useful web developer tools.

Web Developer Extension
Image – Web Developer Extension

The extension is available for ChromeFirefox and Opera, and will run on any platform that these browsers support including Windows, macOS and Linux.

#2.Marker.io: Visual feedback tool for teams

Marker.io makes it easy to report visual glitches, bugs and feedback from any website or web app. All new bug reports created via the screen capture extension automatically include metadata about the web page as well as information about the reporter’s technical environment (like Browser, OS, screen size).

VMWare AU/Asia Pacific

Following integrations are supported

  • Trello
  • Jira
  • GitHub
  • Asana
  • GitLab
  • Bitbucket
  • Clubhouse
  • Basecamp
  • Pivotal Tracker
  • Teamwork
  • Zapier
Marker.io
Image – Marker.io

#3.WebMaker

This plugin provides offline playground for your web experiments.Perfect for developers who want to experiment or practice in HTML/CSS/JS quickly, even without Internet connectivity.

Web Maker
Image – Web Maker

Key Features :

  • Works offline
  • Support for User accounts
  • Supports preprocessors: HTML (jade, markdown), CSS (SCSS, LESS, Atomic CSS, Stylus) & JavaScript (ES6, CoffeeScript, TypeScript)
  • Inbuilt Console
  • Save and load your creations with Auto-save Fork any creation
  • Various templates for popular libraries – React, Vue and more
  • Multi-monitor support with detached preview
  • Import & Export all creations anytime, anywhere
  • Multiple editor themes & other configurable settings
  • Font options + use any system font
  • Code auto completion
  • Multiple layouts with saved collapsed states
  • Save as HTML file option
  • Open source

#4.Full Page Screen Capture

Capture a screenshot of your current page in entirety.Click on the extension icon (or press Alt+Shift+P), watch the extension capture each part of the page, and be transported to a new tab of your screenshot where you can download it as an image or PDF or even just drag it to your desktop.

Export your result to PNG, JPEG, or various PDF paper sizes all configurable from the extension’s options.

Full Page Screen Capture
Image – Full Page Screen Capture

#5.ColorZilla

ColorZilla, one of the most popular Firefox developer extensions with over 5 million downloads is finally available for Chrome! With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.

ColorZilla
Image – ColorZilla

Key Features :

  • Eyedropper – get the color of any pixel on the page
  • Advanced Color Picker (similar to Photoshop’s)
  • Ultimate CSS Gradient Generator
  • Webpage Color Analyzer – get a color palette for any site
  • Palette Viewer with 7 pre-installed palettes
  • Color History of recently picked colors
  • Displays element information like tag name, class, id, size etc.
  • Auto copy picked colors to clipboard
  • Keyboard shortcuts
  • Get colors of dynamic hover elements
  • Single-click to start color picking (currently only on Windows)
  • Pick colors from Flash objects
  • Pick colors at any zoom level

#6.Clear Cache

Quickly clear your cache with this extension without any confirmation dialog, pop-ups or other annoyances.You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

Cookies can either be removed globally, only for certain domains or for everything except for certain domains.

Clear Cache
Image – Clear Cache

#7.PixelParallel by htmlBurger

PixelParallel is a completely free, super handy and light HTML vs Design comparison tool for front-end developers that will help you code pixel perfect websites with ease.

Cisco Learning Network Cyber Monday Sale 8am PT 11/26 - 8am PT 11/27
PixelParallel
Image – PixelParallel

Key Features :

  • Bootstrap grid with customizable width, number of columns, gutter and opacity
  • Horizontal lines with customizable space between
  • Draggable rulers (Photoshop-like) + Reset option
  • Inversion (Color difference)
  • Separate overlays for each web page
  • Overlay scaling
  • Customizable overlay opacity
  • Saving overlays between sessions
  • All image sizes supported
  • Draggable overlay
  • Quick hide / show image
  • Shortcuts + customizable keyboard hotkeys
  • Works with local files
  • Intuitive UI: clean and simple; draggable; minimizable

#8.Font Awesome Icon Finder

This extension allows you to search, preview and choose Font Awesome icons and copy the HTML code / Unicode to the clipboard. The Multiple sizes preview and copy to clipboard feature copies the HTML / Unicode for you to use in your project with out typing it all by yourselves, there by increasing your productivity.

Font Awesome Icon Finder
Image – Font Awesome Icon Finder

#9.f19N Obtrusive Live Test

This extension is a sandboxed, extendable Webpage Testing Framework. It tests all pages during browsing for pre-defined best practices.

f19n Obtrusive Live Test
Image – f19n Obtrusive Live Test

#10.Lorem Ipsum Generator

The Lorem Ipsum Generator quickly delivers default text to complement your amazing design. The default settings are optimized to be used right after installation, but you can easily customize settings to get the perfect text for your taste. Each sentence is randomly generated to simulate real text.

Lorem Ipsum Generator
Image – Lorem Ipsum Generator

#11.IE Tab

IE Tab emulates Internet Explorer by using the IE rendering engine directly within Chrome. This will enable you to use ActiveX controls and test your web pages with different versions of IE (IE6, IE7, IE8, or IE9).

Development Category (English)234x60
IE Tab (options)
Image – IE Tab (options)

Key Features :

  • Create a list of URLs that will automatically open in IE Tab
  • Group Policy support for enterprise deployments
  • Securely use the old IE rendering engine
  • Edit Sharepoint documents instead of opening read-only
  • Use Java, Silverlight, and ActiveX in Chrome seamlessly

#12.JSONView

For developer working with RESTful APIs,validation and view JSON documents is easier now with this extension.

JSONView
Image – JSONView

#13.Restlet Client – REST API Testing

Restlet Client is designed for developers to make direct HTTP / REST resource discovery, testing and test automation easier.

Restlet Client
Image – Restlet Client

Key Features :

  • Call web APIs through a visual tool
  • Save calls history, locally or to the cloud, and organize it in projects
  • Build dynamic requests with custom variables, security and authentication
  • Analyze and validate responses, compare them to history
  • Combine multiple API requests into API scenarios with variables
  • Share work with colleagues
  • Integrate API testing to CI/CD toolchain through plugins for Maven, Jenkins, Travis CI, CircleCI etc.,

If I have missed out any of your favorite extension,please do comment!

Like this post? Don’t forget to share it!

Summary
13 BEST Chrome extension for Web Developer
Article Name
13 BEST Chrome extension for Web Developer
Description
If you're Web Developer,you should definitely check these recommended extensions.
Author
Publisher Name
Upnxtblog
Publisher Logo