Chrome Developer Tool, A Free Alternative To Dreamweaver

Last weekend we received an urgent update for Stellar Design Furniture. At the time, I was not at my desk/desktop computer and was not carrying a notebook. Fortunately I found a cyber cafe with the Chrome browser application, and managed to complete the task without Dreamweaver. Here’s how:

To inspect the HTML elements, simply press F12 to turn on or turn off the Chrome developer tool.

Select the target element with the magnifying tool.

When you begin to edit styling, the panel indicates code hints. In addition, the editing is reflected in real time preview so what you see is what you get.

In the resources section, the tool shows the list of external files connected to the web page, including JS, CSS and images.

Besides the basic developer feature, you can also visit the Chrome web store to extend the browser features. Below are some of the more popular extensions.

ColorZilla - Very useful to detect color codes.

Dimensions - A great tool for page measurement on multiple devices.

Screen Capture - Sometimes a client may ask to see a screen shoot before the content goes live, and this tool is handy for pages with long scrolling.

What about Photoshop design tools… Any alternatives?
There is at least one! You can use Pixlr Editor, and even save the final file to Google Drive for more convenience. The look and feel is similar to that of Photoshop.