How to Enable Chrome DevTools App for Remote Debugging

The Chrome DevTools App is created by Kenneth Auchenberg in an attempt to take devtools out of the browser – in this case out of the Chrome browser. This application is built based on NW.js and can run on Mac OS X as well as on Linux and Windows.

There are many reasons that prompted the maker to create this but his vision consists of giving developers the convenience of remote debugging across multiple browsers, all from the same unified platform (app). The idea will take some time to catch on and materialize due to a variety of reasons (and resistance, which you can read up on at his blog).

We’ll take a brief look at the Chrome DevTools App and see what Google has to offer developers.

More on Hongkiat:

Getting Started with Chrome Developer Tools

5 (More) Useful Chrome DevTools Tips for Developers

How to customize Google Chrome DevTools theme

Installation

Download the Chrome-Devtools.app.zip and extract it. Double click to run. Start your Chrome Browser and enable remote debugging.

To do this on the Mac, open the terminal and run the command below:

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

If you run windows, open the Command Prompt and use this command:

start chrome.exe –remote-debugging-port=9222

How to Use

When your Chrome is already open, with the remote debugging feature enabled, you can now browse to any site. For example we opened Hongkiat.com for this exercise. Next, we head over to the Chrome DevTools app window, and refresh this list (the button is at the bottom right side).

Now you will see the Hongkiat.com link listed (as shown below).

Now click the ‘Go’ button. You will be taken to a new window. That’s it. You have the Chrome DevTools app up and running already. What you’ll see here is the same as when you "inspect element"’ on t he Chrome browser.

And from here you can use the Chrome DevTools app just like using DevTools on Chrome natively: you can inspect the DOM element, debug JavaScript, work with Console and more.

What’s next?

This app is still very experimental. But for now, the idea of taking the DevTool out of Chrome allows developers to treat the app as a functional editor, and work with other runtimes like node.js and iOS. For more possibilities, you can check out Auchenberg’s train of thought here.