Use these tips and tricks for Chrome Developer Tools in your 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.
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.
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.
To search the resources that are used on this page, open "Developer Tools".
Go to the "Search" tab.
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.
For further resources on Chrome Developer Tools, visit these links: