Are you a Developer? Then am sure that you will take a look at this written piece for a while. What if you are a newbie to the field and you got confused by hearing about Chrome DevTools App for Remote debugging.  The air around will turn to a cyclone of confusions ,without knowing what is this remote debugging or what is this Chrome DevTools App etc. Then for sure you will glue your eyes to this to clear all your confusions .

Now what will you do next is search for your doubts in online but you will end with a headache as you don’t know where to start and what to read. So here I am covering almost all details you need to know to do your work effectively.

So the first thing where we are going to start is by knowing what exactly is Debugging and what precisely is Remote Debugging .

What is Debugging ?

You may be familiar about ‘bugs’ which may lead to incorrect operation of our system or computer software. Such sort of defects and bugs need to find out and have to be resolved. Isn’t it? Yea, so in simple that process of finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.

There are so many techniques of debugging practiced by the developers . Let’s take a quick glance on various techniques of debugging .

• Print debugging (or tracing) .

• Remote debugging

• Post-mortem debugging.
• “Wolf fence” algorithm.
• Delta Debugging.
• Saff Squeeze.

Well these are the various debugging techniques .

Now What is Remote Debugging ?

You can very well can say one thing as of now .That it is a debugging technique.

The process by which a program which is running on a different system that of the debugger is debugged (i.e. the finding and resolving the bugs which affect proper functioning of system or software) is called Remote Debugging.

How Remote Debugging is done?

First the debugger gets connected by a network to a remove system.

Once connected over network to remote system then the debugger can take control of the different program’s execution on the remote system

The debugger can thus get back or retrieve details about the state of the remote system.

You might be known about different remote debugging tools such as Chrome DevTools  App , Remote Tools for Visual Studio , Remote web inspector , PonyDebugger etc . So we are here to discuss primarily about Chrome DevTools  App .

So What is Chrome DevTools  App

You would have heard DevTools commonly. It is just the short way we call “Chrome Developer Tools “. If you don’t know what it is then to tell in simple words we can say that these are certain set of web authoring (helps in developing your web content in DTP format or also to illustrate the way of making website from writing in HTML code to textual content of web pages) and debugging (finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.) tools that are built into Google Chrome.

What it offers ?

To web developers its offers deep rooted keen access to web application as well the internals of the browser. It would aid in track down issues related to the layout , get code optimization insights , set JavaScript breakpoints.

Now you are all clear about the basic things . So let’s move on to the core topic.

How to Use Chrome DevTools App for Remote Debugging

Kenneth Auchenberg had many reasons which insisted him in creating this application – Chrome DevTools App .He wanted to give something that gives easiness in work to web developers across the globe. The great challenge of web developers is do remote debugging from multiple browsers across. Kenneth Auchenberg made it possible through his application. From the same app , an unified platform ; remote debugging across multiple browsers was made to a reality.

More about this application in brief :-

His sole attempt with this app was to take devtools out of browser particularly here it is Chrome browser The NW.js based built application can work efficiently on Linux , Windows as well as on Mac OS X.

How to Access DevTools

• In your Google Chrome just open a web app or a web page .
• On your browser windows top right you can find Chrome menu.
• Now you have to click Tools > Developer Tools.
• Choose Inspect Element by doing a right click on any element of the page.

Now, let’s come back to our main problem – how do you enable Google DevTools for Remote Debugging?

 Installation.

 

To do remote debugging using Chrome DevTools app you need that application to be installed on your system and you should have a Chrome browser. Well you know to install chrome browser as it’s not a big deal being a web developer.

• Download and extract Chrome-Devtools.app.zip.
• And run the application by double clicking.
• Now open your Chrome Browser and enable remote debugging.

Here is command to do this on Mac and Windows.

Mac

Run the below given command by opening the terminal.

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

Windows

Use the below given command after opening the Command Prompt.

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

 Read Also:

• Best Chrome Extensions and Apps You Should Have
• How to Install Google Chrome Extensions From Outside of Web Store
• Excellent Google Chrome Tips & Tricks You Should Know

Step by step instructions to Use

Now remote debugging feature is enabled and thus you can browse any site when your chrome is opened already.

Say for showing you an example here we opened Geekeasier.com .After that we move onto  Chrome DevTools app window and refresh this list.

You will see that the Geekeasier.com link is listed like the image given below.

What to do next?

Click on “Go”. This will direct you to a new window. So you are done with it . Well , Chrome DevTools app is already running guys .Like the image given below you would get one alike when you click on “Inspect Element “on your chrome browser.

 

Hereafter you can enjoy using Chrome DevTools app as like as the same way using DevTools on Chrome natively.You can now check the DOM component, troubleshoot JavaScript, and work with Console and more!

So i guess you got the deepest and clear idea about How to Use Chrome DevTools App for Remote Debugging .

So happy Remote Debugging with Chrome DevTools App all web developers 🙂 🙂 🙂