Business Magazine

Chrome Developer Tool, A Free Alternative For Dreamweaver

Posted on the 06 August 2013 by Altcom @altcomms

Aug 6, 2013

Last weekend we receive an urgent update from Stellar Design Furniture Store, during that time we are out of computer desk without carry a notebook. Luckily we found a cyber cafe with Chrome browser application, and we manage to continue the task without Dreamweaver.

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

Chrome Developer Tool, A Free Alternative For Dreamweaver

Select the target element with magnify tool

Chrome Developer Tool, A Free Alternative For Dreamweaver

When we begin edit styling, the panel indicate code hint. In addition the editing is reflect real time preview, what you see what you get.

Chrome Developer Tool, A Free Alternative For Dreamweaver

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

Chrome Developer Tool, A Free Alternative For Dreamweaver

Beside the basic developer feature, we can also visit chrome web store to extend the browser features, below are some of the popular extension.

ColorZilla – very useful to detect color code

Chrome Developer Tool, A Free Alternative For Dreamweaver

Dimensions – a great tool to page measurement on multi-device

Chrome Developer Tool, A Free Alternative For Dreamweaver

Screen Capture – Sometimes client may ask to send a screen shoot before the content go live, this tool is handy to handle page with long scrolling.

Chrome Developer Tool, A Free Alternative For Dreamweaver

How about Photoshop design tool, any alternative?
No problem we can use Pixlr Editor, we can even save final file to Google Drive. The looks and feel is similar to Photoshop:

Chrome Developer Tool, A Free Alternative For Dreamweaver


    Back to Featured Articles on Logo Paperblog