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.

How to Enable Chrome DevTools App for Remote Debugging

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.

How to Enable Chrome DevTools App for Remote Debugging

How to Enable SSL for Localhost using MAMP

Having an SSL (Socket Secure Layer) installed is one way to secure your website. Basically, SSL will encrypt data transactions between the browser and the server. Thus, you would probably want to test your website in an SSL environment as early as during the development stages.

URLs and other website assets such as CSS and JavaScript are pointed correctly via the https protocol. So, how do we enable SSL in our localhost? It will require some command lines, file modifications, configurations and a few more cumbersome steps. But let’s bypass all that and use MAMP Pro instead. Here’s how to set it up. Note: MAMP Pro is also available for Windows now.

Recommended Reading: Beginner’s Guide To WordPress Multisite With MAMP

Enabling the SSL

Launch MAMP, and create a VirtualHost with a custom domain; this domain can be set in an extension like .dev or .local. In this case, I’ve created www.hongkiat.dev which is used to host www.hongkiat.com development.

Each of the VirtualHost you create in MAMP will have individual options on which you can do some configurations.

To enable SSL for the VirtualHost, go to the SSL tab and tick the SSL option. Afterwards, you would need to locate the SSL certificate files. If you have got one, locate and assign the files. If not, click the Create self-signed certificate button to let MAMP create the certificates for you.

To create one, MAMP will ask you some information like the Country Code and State to assign in the certificate, like so:

Save the file in a proper folder, and SSL is set.

Make Chrome Trust Your Website

Once SSL is set, you should now be able to view your website through the https protocol. But hold on, instead, you see an error (like below) as the SSL certificate is not recognized by the browsers in this case, Chrome. Note that if you run WordPress-based websites, you would need to modify the siteurl and home entry from the wp_options table in the database.

Unless you have a trust issue with yourself, you could just go to the Advanced option and click Proceed to your website name to view your website.

If you are annoyed with the red cross shown in Chrome, you would need to force Chrome to trust your generated certificate:

First, Click that crossed-out padlock icon, and then click the Certificate Information link. Chrome will show you a popup with all the information of the SSL certificate assigned in the website. Drag-and-drop the Certificate icon onto your Desktop.

If you running OS X, opening this certificate file will bring you to the Keychain Access app.

And, as you might be expected, you should select Always Trust. Select your website certificate, then click the [i] button to reveal the details of the certificate Trust level. Within the Trust tab, you will see the option that says ‘When using this certificate’. The default value is set to ‘Use Custom Settings’ at this stage. Make your certificate be trusted, by setting this option to ‘Always Trust"; you will be prompted for your password once to update this setting.

We are all set. Reopen the website on Chrome and you should now see the green padlock. Congratulations, your SSL certificate is now trusted.

Related posts:

1. Setup PHP, Apache, and MySQL in Mac without MAMP – Part II

How to Enable SSL for Localhost using MAMP

How to Enable SSL for Localhost using MAMP

Having an SSL (Socket Secure Layer) installed is one way to secure your website. Basically, SSL will encrypt data transactions between the browser and the server. Thus, you would probably want to test your website in an SSL environment as early as during the development stages.

URLs and other website assets such as CSS and JavaScript are pointed correctly via the https protocol. So, how do we enable SSL in our localhost? It will require some command lines, file modifications, configurations and a few more cumbersome steps. But let’s bypass all that and use MAMP Pro instead. Here’s how to set it up. Note: MAMP Pro is also available for Windows now.

Recommended Reading: Beginner’s Guide To WordPress Multisite With MAMP

Enabling the SSL

Launch MAMP, and create a VirtualHost with a custom domain; this domain can be set in an extension like .dev or .local. In this case, I’ve created www.hongkiat.dev which is used to host www.hongkiat.com development.

Each of the VirtualHost you create in MAMP will have individual options on which you can do some configurations.

To enable SSL for the VirtualHost, go to the SSL tab and tick the SSL option. Afterwards, you would need to locate the SSL certificate files. If you have got one, locate and assign the files. If not, click the Create self-signed certificate button to let MAMP create the certificates for you.

To create one, MAMP will ask you some information like the Country Code and State to assign in the certificate, like so:

Save the file in a proper folder, and SSL is set.

Make Chrome Trust Your Website

Once SSL is set, you should now be able to view your website through the https protocol. But hold on, instead, you see an error (like below) as the SSL certificate is not recognized by the browsers in this case, Chrome. Note that if you run WordPress-based websites, you would need to modify the siteurl and home entry from the wp_options table in the database.

Unless you have a trust issue with yourself, you could just go to the Advanced option and click Proceed to your website name to view your website.

If you are annoyed with the red cross shown in Chrome, you would need to force Chrome to trust your generated certificate:

First, Click that crossed-out padlock icon, and then click the Certificate Information link. Chrome will show you a popup with all the information of the SSL certificate assigned in the website. Drag-and-drop the Certificate icon onto your Desktop.

If you running OS X, opening this certificate file will bring you to the Keychain Access app.

And, as you might be expected, you should select Always Trust. Select your website certificate, then click the [i] button to reveal the details of the certificate Trust level. Within the Trust tab, you will see the option that says ‘When using this certificate’. The default value is set to ‘Use Custom Settings’ at this stage. Make your certificate be trusted, by setting this option to ‘Always Trust"; you will be prompted for your password once to update this setting.

We are all set. Reopen the website on Chrome and you should now see the green padlock. Congratulations, your SSL certificate is now trusted.

Related posts:

1. Setup PHP, Apache, and MySQL in Mac without MAMP – Part II

How to Enable SSL for Localhost using MAMP