Get all the training !

Join today and get access to ALL the training videos and books:
Start a FREE 7 Day T rial

Debug Your Mobile Site in Android with

Chrome Canary
By Valentin Garcia
Share

17 September 2015
Shar e

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 no use on a mobile device.
In this tutorial, I'm going 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 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.

0 Comments

OSTraining

Share

Recommend

Login

Sort by Oldest

Start the discussion

ALSO ON OSTRAINING

Love it or Hate it, Boostrap is Winning

the Web

How to Add Microdata to Articles in

Joomla 3

15 comments a month ago

1 comment 17 days ago

Silverngold Ivan, you have to go back

Joe Thanks. I can't get the image one

to the title of this article. Winning the web.

Lesson here for developers is:

to work though. I don't understand the

src= "/path/to/image.jpg" when it's not

An Introduction to Gantry 5 from

Rockettheme

How to Change Usernames in

WordPress

7 comments 14 days ago

2 comments 22 days ago

steve Great, thanks for such practical

Nick Savov Thanks Bigwas!

feedback on Gantry, Randy

Subscribe

Add Disqus to your site

Privacy

back to top

Popular New Posts

Let's Welcome GoDaddy Into Our Open Source Communities
How to Use the AdvAgg Drupal Module
Win Monstroid, the New WordPress Theme from Template Monster
Drupal 8: What do Site-Builders Need to Know?

Our Pods Framework Class is Now Free

Drupal Slideshows with FlexSlider from WooThemes
Use the Boost Module to Improve Drupal's Cache
How to Add Microdata to Articles in Joomla 3
How to Find a Slow WordPress Plugin
Views Bulk Operations Makes Mass Updates Easy in Drupal

Blog Categories
WordPress Tutorials
Drupal Tutorials
Joomla Tutorials
Coding Tutorials
Ghost Tutorials
How Tos
Webdesign Tutorials
OSTraining News
Live Blogs
Education
General
Podcasting
Comeback Cities

License
All of our tutorials are published under the Creative Commons Attribution-NonCommercial
license. This means:

You can re-use these tutorials.

You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.
Click to read the license.

Get all the training ! Join today and get access to ALL the training videos and books:
Start a FREE 7 Day T rial

(+1) 678-830-2168
support@ostraining.com Contact us

Get f ree, weekly updates

f rom the OST raining
Newsletter
Your email address

Sig n Up!

Our Training
Video Training
Books
On-Site Training

Our Books
Drupal 7 Explained
Joomla 3 Explained
Joomla Explained

About OSTraining
About Us
Our Team
Our Blog
Press Releases

Partner With Us
Become an Affiliate
Become a Video Trainer
Become a Tutorial Writer
Advertise with Us

2015 | Open Source Training LLC

All Rights Reserved