background preloader

Chrome Developer Tools

Facebook Twitter

Web Developer Help. 25+ Must-have Chrome extensions for web designers and developers. For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome’s dust. For the past two years, since Google Chrome’s release, there’s been a raging debate on which browser is superior. Mozilla’s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed Microsoft’s Internet Explorer. Don’t feel sorry for Google Chrome, however. Even in its infancy, Chrome has already reached second most popular, having already surpassed Internet Explorer and with a high chance of surpassing Firefox. Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer.

And here you are to find tools that make Chrome useful to you as a designer or a developer. 1. After you finish downloading all the extensions in this list, you’ll definitely need an organizer. 2. Awesome Screenshot lives up to its name. 3. 4. 13 Useful Google Chrome Extensions for Web Developers. Google Chrome, like Firefox, has the ability to increase its functionality and capabilities through the use of extensions. If you’re a web developer, Google Chrome comes with a nice set of developer tools built in that will make your life easier.

But there are also a number of extensions that will give you even more tools at your disposal. The great thing about extensions is that they allow you to perform tasks that would normally require you to switch over to another application. Being able to perform certain tasks without leaving your browser can be a big time saver. Here are 13 Google Chrome extensions that you should find very useful. Color Picker Color Oicker lets you quickly get the Hex and RGB values of any color! Firebug Lite Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Domain Availability Checker This extension checks the availability of a domain name. Aviary Screen Capture Lorem Ipsum Generator. Experimental.devtools.* APIs. Google Chrome Developer Tools: 12 Tricks to Develop Quicker. Overview - Chrome Developer Tools.

Extending Chrome Developer Tools. Chrome’s developer tools (also known as the WebKit inspector) are super useful for web developers. If you aren't ramped up already, take a look at this cheat sheet overview. Also check out some of many online resources, such as the official documentation, which is quite readable, and this 12 tricks screencast from Paul Irish. But let’s not get sidetracked here. I wasn't going to write about using the developer tools, it’s about developing developer tools. There are two ways to go: You can extend the tools by writing chrome extensions that use the new chrome.experimental.devtools APIs. These recently created APIs are still subject to change, and marked experimental, so it’s a bit more difficult to distribute and install them compared to other chrome extension APIs (more on this later).You can quite easily hack the devtools code yourself, to customize it to your needs.

Let’s dive in, starting from the beginning. Developer tools extensions My JSHint audit extension Writing an extension. Chrome Developer Tools Cheatsheet. Chrome's Developer Tools have been getting much deserved love at this last Google I/O. Paul Irish and I started with an bootcamp lab, a hands-on walk through tweaking a web application using the developer tools. We handed out a cheatsheet to give developers an overview of available features.

The cheatsheet is available for download in PDF and PNG. Thanks to the awesome I/O organizers, we also gave away free HTML5 cake (as promised) after the session ended: The developer tools were also featured at the start of the Chrome keynote with a webkit-speech demo. Finally, Pavel Feldman (lead engineer for the dev tools) and Paul gave an great I/O talk. One of the most promising aspects of the Chrome Developer Tools is that they are easy to extend with (experimental) chrome extension APIs.