Posts Tagged ‘Chrome’

Emmet LiveStyle is a browser and editor plugin that brings live CSS editing to our workflows with a simple setup.

It is currently available as Chrome, Safari and Sublime Text plugins (more is planned) and supports bi-directional (editor to browser and vice-versa) editing.

Compared to alternatives, it has a big difference, Emmet LiveStyle doesn’t replace the CSS when editing but “creates a map of changes” which is great to easily find out what is changed.

Emmet LiveStyle

Once installed, defining the local and the live CSS files are enough to get started, it handles the rest.

It even works in multiple devices or views. An update made will be auto-applied (with no refresh) to all devices which is awesome for compatibility and responsive testing.

Lately, a post at WRD had introduced Hack St. which was a handy web app for debugging HTTP requests.

Postman is a similar tool with more features and comes as a free Chrome extension.

It allows sending any type of HTTP requests (GET, HEAD, POST, PUT..) with any number of parameters + headers.

Postman Chrome Extension

There is support for different authentication mechanisms (basic, digest, OAuth) and the response received is syntax highlighted (HTML, JSON or XML).

Postman keeps a history of requests so that we can easily re-send them later and has a “collections” feature for storing all requests to the same API/domain.

The extension even has some more features to simplify testing and debugging of HTTP requests. A must-have for every web developer.

Google Chrome’s “Developer Tools” is what many developers use to debug client-side code.

Chrome Logger is an extension that brings server-side code debugging to this tool.

Chrome Logger

It has libraries for PHP, Python, Ruby, .NET, ColdFusion and Node.js. Also, new ones can be created with the documentation provided.

These libraries simply enable us to view variables in Developer Tools.

Although each server-side language has their stronger debugger tools, using the same logging tool for client and server-side makes sense.

When working on a project, after each CSS or JavaScript update, the need to refresh the browser is a time-loss (and it is usually done 10s of times).

Tincr, a Chrome extension, solves this by integrating itself into Chrome’s Developer Tools and auto-refreshing the browser once these files are changed.

Tincr Chrome Extension

It is not bound to any IDE and works with all of them. There are several built-in project types (Ruby on Rails, Chrome extensions, Atlasian projects..) and custom ones can be created for any custom CSS/JS structure.

Also, it -kinda- converts the Developer Tools into an IDE by adding an auto-save feature to changes made to the code from Developer Tools

If you are planning to create a Chrome browser extension, Alex Wolkov, a talented extension developer has created a tool to ease the process.

It is called Extensionizr which enables anyone to create a custom skeleton for the extension to be created.


The tool has various options to choose like: the extension type, background page, content scripts, permissions to Chrome modules and more.

Extensionizr is a good start to create a Chrome extension and it is also open source.