In our post few days back we listed 20 Best Chrome Extensions, today we are adding more on that list. Chrome Developer Tools are great for debugging HTML, JavaScript and CSS in Chrome.
If you’re writing a webpage or even a web app for the Chrome Web Store, you can inspect elements in the DOM, debug live JavaScript, and edit CSS styles directly in the current page.
Extensions can make Google Chrome an even better web development environment by providing additional features that you can easily access in your browser.
These “18 Fresh Google Chrome Extensions for Web Developers” have some very useful and accurate tools which can boost our coding by not only debugging but also reducing time efforts.
18. Picnik
The Picnik Extension for Chrome lets you easily edit the images you come across while browsing the web. With a click you can create a snapshot of your current web page and open it in Picnik for easy editing, annotation and sharing. Do the same for all the image on the current page — just pick the image from the dynamic hot list and then edit, annotate and share with Picnik.
Picnik is the award-winning photo editing application that lives online, in your browser. Do basic fixes with easy but powerful editing tools. Tweak to your heart’s content, then get creative with oodles of effects, fonts, shapes, and frames, plus an advanced set of professional-quality tools. It’s fast, easy, and fun.
17. MultiSwitch
Whenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitch. You are now able to customize the title of your environment. In this latest version the ip:port bug is also fixed.
16. Window Resizer
The latest version doesn’t require access to anything else besides it already did before! The warning is just a reminder there are more features making use of those permissions! *** (In case you were wondering…)
This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
The resolutions list is completely customizable (add/delete/re-order).
There are 3 screen types available:
* Desktop (standard; resize the entire window to the specified resolution)
* Laptop/Notebook (same as Desktop, but different icon; makes it easier to scan the resolutions list)
* Mobile (different than the previous two; this applies the specified dimensions to the viewport, not to the entire window, because mobile browsers usually have no borders)
15. Chrome Sniffer
Chrome Sniffer extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework.
Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases.
14. XML Tree
A benefit of XML is that it’s “human readable”.File types DO NOT have to end in .xml. WebKit intercepts some files before XML Tree can render as noted in Known Issues. Examples that should render via XML Tree that DO NOT end in .xml:
http://www.w3schools.com/webservices/tempconvert.asmx?WSDL
13. BuiltWith Technology Profiler
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.
The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!
BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian) .
12. JavaScript tester
JavaScript tester extension adds a small&usefull shortcut to your browser “Alt+J”. To run and test pefromance of JavaScript code.
When you press “Alt+J”, new textarea is added to the bottom of the current page.
In this textarea you can write your JS code and press “Ctrl+Enter”, to run the code.
11. View Selection Source
View selection source in resizable popup. Drag the bottom right corner to resize. Simple, but very useful for web developers.
10. CSS Reloader
CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself. To use this extension just press F9, and the loaded stylesheets will reload.Very useful especially when you do pixel pushing.
Note: This version does not support local files, due to Google’s review-process. If this extension should support file:// urls it takes months to get it approved.
9. Web Developer
The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.
8. CSSViewer
CSSViewer shows the css parameters of any element in a web page, to enable/disable it simply click the toolbar icon.
7. JSONView
JSON content may be altered) but faster and less intrusive is enabled by default. If you choose the safer method (i.e. JSON content not extracted from displayed page), it will cost you an extra XMLHttpRequest to get raw JSON content from HTTP response.
6. Csscan
Inspired by the Firefox Extension CSSViewer, this Chrome extension allows you to easily scan an element’s basic CSS properties without having to delve into the inspector window.
The extension adds a button to the toolbar. Clicking this button will enable the extension; you can then continue using the page, with the difference that a quick overview of CSS properties for the element your mouse cursor is hovering is displayed. To disable the CSS scanner, simply click the icon again.
Elements being scanned are highlighted with a red outline so the user can easily see the structure of the page. Most CSS properties are supported; however, feel free to leave a comment if you feel like there’s any missing.
NOTE: For some reason the extension does not work on this page (or any other in the chrome extension gallery)! It seems to work fine on any other page.
5. Chrome Editor
Chrome Editor extension allows you to code right within the browser.
You also have the ability to save a code reference for later use. It saves it to your computer locally.
Basic code to get you started coding the following.
HTML 4 DTD
HTML 5 DTD
Adobe Flash Embed
Jquery Funtions
CSS
4. Regular Expression Checker
Simple regular expression checker/tester.
v1.1.2
- support for html is added
- some code optimization
v1.1.1
- added support for regex replacement
- added support for changing highlight color
- updated option checkboxes to instantly apply affects
- fixed styling issues on the results box
- minor code optimizations
3. PHP documentation
Go to options to configure the default search manual.
2. jsshell
jsshell is a small command window placed at the bottom of your Chrome browser that lets you run jQuery and jLinq commands no matter what page you’re on! Just type in a script into the editor then press CTRL+Enter to run it!
1. Validity
Validity can be used to quickly validate your HTML documents from the address bar.
Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the Javascript console.
