Chrome DevTools For Mac

The Chrome Developer Tools built-in set of tools is probably one of Google Chrome’s best features. The toolset provides anyone who wants to take on web application development with access to the structure of any web app and a deep insight for code inspection and optimization.

Chrome DevTools is a standalone node-webkit based OS X application that separates Chrome Developer Tools from the Chrome web browser, and, besides practicality and speed, it brings to the table a more accessible user interface.

In order to be able to take full advantage of Chrome DevTools' features, you need to have a running Chrome instance with the remote debugging feature enabled. There are many ways to do this, but for us, the simplest way to activate it was via OS X's Terminal.app and we just had to run the following command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

After an instance of Chrome is launched and your web apps are opened in tabs, they will be immediately displayed in Chrome DevTools’ “Pages” tab menu, and all you need to do in order to inspect them is to click the “Go” button at each entry's right side.

As is the case with the original Chrome based set of debugging and web authoring tools, Chrome DevTools editing window features the same layout, with task-oriented groups in the top toolbar, namely Elements, Resources, Network, Sources, Timeline, Profiles, Storage, Audits, and Console.

Obviously, working with this development toolkit from within Chrome DevTools’ interface is done in the same manner as if you were using the browser based version. If you're in need of further and more in-depth information about this subject, you can go to the Chrome DevTools Overview page.

The big advantages of using Chrome DevTools as a standalone application are the facts that it enables you to do web development work without needing to have multiple Chrome tabs opened, which would be counterproductive and slow, as well as the fact that you can switch between different targets faster, with the help of the application’s “Back” and “Go” buttons.

Chrome DevTools proved to be a useful application for website inspection purposes by offering a simple way of detaching the Chrome Developer Tools from their origin, Google's web browser, and a more user friendly working environment via its intuitive and more natural feeling interface.