Sie sind auf Seite 1von 11

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

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
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
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






Sort by Oldest

Start the discussion


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


How to Change Usernames in


7 comments 14 days ago

2 comments 22 days ago

steve Great, thanks for such practical

Nick Savov Thanks Bigwas!

feedback on Gantry, Randy


Add Disqus to your site


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
Comeback Cities

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 Contact us

Get f ree, weekly updates

f rom the OST raining
Your email address

Sig n Up!

Our Training
Video Training
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