Debug Your Mobile Site in Android with Chrome Canary

Google’s Chrome browser includes DevTools, a built-in feature similar to Firebug.

DevTools is really helpful for debugging CSS problems … on a desktop computer. However, DevTools is not available for mobile devices.

In this tutorial, I’m going to show you how to use the Chrome Canary browser to debug CSS on your Android phone. Chrome Canary is a version of the normal Chrome browser, but it is modified specifically for developers.

Step #1. Enable debugging on your phone

The Developer options are hidden by default in Android 4.2 and above, so you will need to enable them.

• Go to Settings > About device.
• Tap “Build number” 7 times to unlock the Developer options menu.
• The message “Developer mode has been turned on” will appear:

• Go to Settings > More > Developer options:

• Check the “USB debugging” box:

Step #2. Open Chrome Canary

Chrome Canary is available as a desktop browser. Download it from here.

Step #3. Connect your phone to Chrome Canary

Inside your phone:

• Install and open the Chrome browser app.
• Visit the website you need to debug.
• A confirmation alert like the one below will open in your phone, tap OK.

Go back to your desktop computer:

• Open Chrome Canary.
• Go to this URL … chrome://inspect
• You will see a list of device that displays the website and other resources you are seeing on your phone.
• Click the “inspect” link to access the screen of your mobile device from the computer.

From here, you’re ready to debug the CSS of your mobile site in the same way you do with the desktop version. Check the CSS properties and play with them to improve your site design or fix your bugs. This is a Joomla site below, it works just as well with WordPress, Drupal and other platforms.