CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
To set up remote debugging for your version of Chrome or Opera, fol-
low the remote debugging guide over in the Chrome DevTools documenta-
tion. You’ll then be able to work through the tutorial below on either a real
mobile device or your desktop.
Note that the docs linked to above will also give you two options for
accessing pages you would like to debug on your device. You can either
open up the page on your device’s browser, or use a new feature called re-
verse-port forwarding to debug a locally hosted version of your code on your
device.oPTiMizaTion woRKflow
Once you have remote debugging set up, here’s a workflow for diagnosing
paint and jank issues:- Open up your page on your device, launch the Chrome DevTools and
switch to the “Timeline” panel. Hit record and interact with your page
the same way your user would.
Debugging Chrome for Android using the Chrome Developer Tools.