Inspecting code on mobile devices
Often, when coding a responsive site, you have to use the "Responsive Mode" in browsers. This simplifies and speeds up the development itself. But not always on mobile devices everything looks like in a simulator on a desktop. For such cases, it will be useful to debug web applications on a mobile device.
First, you need to set up a device in which you can run and / or debug the application. It can be either a smartphone or a tablet connected to a personal computer via USB or Wi-Fi. Let's consider an example of setting using the Firefox browser (version 39 or higher).
Turn on debug mode on a mobile device ( Android )
(An example of connection was carried out on Meizu M 3 note . On other devices, other ways are possible.)
In the device settings, go to the "Accessibility" menu. Then in "For Developers", and in it we activate the "USB debugging" mode. Debugging can also be done via WiFi.
Mozilla Firefox browser settings
Launch Firefox on a smartphone or tablet, go to "Advanced" in the browser settings, where we enable remote debugging.
We go to Firefox on the desktop. In the menu item "Development" go to "WebIDE". In the appeared window "Firefox WebIDE" on the right side, select the connected device. Depending on the type of connection, it will be displayed either in the USB or WiFi unit.
If the device is connected via USB - when you click on it on the device itself, a dialog box will pop up asking for access. Allow access.
If the connection is configured via WiFi, a QR code and a request for scanning will appear on the device. Click "scan" and scan the code.
Once connected, a message “connection allowed” will appear in the upper right corner of the Firefox WebIDE window, and a list of tabs open in the browser on your device will appear on the left. Select the desired tab, after which the code inspector for your web application will open on the mobile device.
The site code will be displayed on the desktop, and the device will see which object is being inspected.
If you are unable to connect your device, try the following:
- Install ADB drivers for your phone. Drivers can be taken from the Android website
- Refresh browsers on desktop and mobile
- If you cannot scan the QR code when connected via WiFi - try installing Barcode Scanner
- You can find more solutions on the official Mozilla website
Write your questions in the comments and share your experience.