Chrome Cheatsheet

Use these tips and tricks for Chrome Developer Tools in your Adaptive.js site development.

We recommend Chrome Developer Tools for Adaptive.js site development.

A. User Profiles

For Mobify Preview, we recommend that you use a separate Chrome user profile.

The preview sets cookies on your site to enable the mobile site.

To visit the desktop site in a separate window while you work on the mobile version, you need to browse them with different user profiles.

Follow the Google tutorial to find out how to Add a new user profile in Chrome.

B. Developer Tools Console

While you preview your site in Chrome, you get a lot of great information in the Developer Tools Console.

Notice in the Console that there is a section called "Evaluated Context". This section shows all of the content that Adaptive.js selected for this page. Also, this includes the content selected in base.js and the page view.

See the Adaptive.js Context

C. View Source vs. Elements

1. Use the "Elements" tab in Developer Tools. There, you see the rendered HTML of the mobile site based on your Adaptive.js templates.

This is different from the original HTML of the desktop page.

2. To view the desktop page HTML, navigate to View > Developer > View Source.

Remember that "View Source" shows the original desktop HTML, and that "Elements" shows the HTML that was rendered for the mobile site version.

D. Debugging JavaScript

Adaptive.js is great because it allows you to use all of your usual JavaScript debugging techniques.

When you debug the router, a view, or a user interface JavaScript file, add console.log() to your code. This outputs the content to the command-line terminal.

Or, add debugger statements to pause execution and step through the code.

E. Search Sources

As you hunt down bugs, it is useful for you to search through the code that is running on the current page.

  1. To search the resources that are used on this page, open "Developer Tools".

  2. Go to the "Search" tab.

  3. Type in a search term and click "Enter".

The search results populate with matches in any resource (HTML, JS, CSS) that is on the current page.

Searching Sources

For further resources on Chrome Developer Tools, visit these links:

Edit in GitHub