Thursday, September 26, 2013

How to Customize Chrome With Web Development Extentions

                                          techbeat.com


First of all you may want to know the definition of Chrome extensions in order for this post to be beneficial.
Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS
Extensions have little to no user interface. For example, the image above shows the icon that provides the UI for the Gmail extension.
Extensions bundle all their files into a single file that the user downloads and installs. This bundling means that, unlike ordinary web apps, extensions don't need to depend on content from the web.

You can distribute your extension using the Chrome Developer Dashboard to publish to the Chrome Web Store. For more information, see the store developer documentation.


Manage Your Extensions


Highly Rated Google Chrome Extensions for Web Developers


 1. Responsive Inspector

Responsive Inspector is a simple Google Chrome extension that allows viewing media queries of visited websites. It is very useful when developing responsive web layouts as it can visually show what resolutions are defined in css stylesheets. In addition it also has following features: - pixel perfect browser resizing - taking and saving whole page screenshots - css media query code viewing - sharing web designs on Behance.net service as Work In Progress.

2. Web Developer



This extension is a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

3. Perfect Pixel

This extension helps develop your websites with per pixel accuracy!Follow our twitter! @welldonecode Extension for web developers and markup designers. This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them.

4. Firefox Firebug

Fire Bug is a web development tool that facilitates the debugging, editing, and monitoring of any website's CSS, HTML, DOM, XHR, and JavaScript; it also provides other web development tools.[2]Firebug's JavaScript panel can log errors, profile function calls, and enable the developer to run arbitrary JavaScript. Its net panel can monitor URLs that the browser requests, such as external CSS, JavaScript, and image files. The net panel can display both request headers and response headers for each page asset; it can also estimate the time each asset took to load.

Firebug is free and open source; it is licensed under the BSD license.[3] Firebug was initially written in January 2006[4] by Joe Hewitt, one of the original Firefox creators. The Firebug Working Group oversees the open source development and extension of Firebug. It has two major implementations: an extension (add-on) for Mozilla Firefox and a bookmarklet implementation called Firebug Lite.[5] Across-browser version is in development. Currently, the Firebug add-on has over 3 million active daily users.[6]

In addition to debugging web pages, Firebug is a useful tool for web security testing[2] and web page performance analysis.[7]
















1 comment: