如何使用Chrome在Android设备上远程调试网站

With Android being installed on over 2.5 billion devices, web developers cannot neglect optimizing web pages for Android. The web browser of choice for Android users will most likely be Google Chrome, as it is typically preinstalled and many users are already familiar with it due to using Chrome on a computer. With the rise of Progressive Web Apps (PWAs), users expect high-quality apps not only as native apps but also in their browser.

随着Android安装在超过25亿台设备上，网络开发人员无法忽略针对Android进行优化的网页。 Android用户选择的网络浏览器很可能是Google Chrome，因为它通常是预先安装的，并且由于在计算机上使用Chrome，因此许多用户已经熟悉了它。 随着渐进式Web应用程序(PWA)的兴起，用户不仅希望将高质量的应用程序作为本机应用程序使用，而且希望将其作为浏览器使用。

While you can resize your browser and use the browser development tools, you can’t fully simulate a mobile experience this way. For example, I had an issue that prevented clicking an element on mobile, but it worked on desktop. The same browsers on desktop and mobile may have differences, as some features depend on the platform they are running on.

尽管您可以调整浏览器的大小并使用浏览器开发工具，但是您无法完全以此方式模拟移动体验。 例如，我遇到了一个问题，该问题导致无法在移动设备上单击某个元素，但该元素在桌面设备上可以正常工作。 台式机和移动设备上的相同浏览器可能有所不同，因为某些功能取决于它们所运行的平台。

I have already written an article about how you can test your websites in Xcode’s iOS Simulator.

我已经写了一篇关于如何在Xcode的iOS模拟器中测试网站的文章 。

In this article, I want to show you how you can test websites on Android devices using Chrome remote debugging.

在本文中，我想向您展示如何使用Chrome远程调试在Android设备上测试网站。

如何使用Chrome DevTools在Android设备上远程调试网站 (How to Remote Debug Websites on an Android Device With Chrome DevTools)

1. Enable USB debugging in the developer options of your Android device.
   在Android设备的开发人员选项中启用USB调试。
2. Connect your phone to your computer using a USB cable. Your Android device may ask you to confirm that you trust this computer.
   使用USB电缆将手机连接到计算机。 您的Android设备可能会要求您确认您信任此计算机。

3. Open chrome://inspect/#devices on your computer.

   在您的计算机上打开chrome://inspect/#devices 。

4. Make sure that the “Discover USB devices” checkbox is enabled.
   确保已启用“发现USB设备”复选框。
5. If your app is running locally, then you need to add port forwarding. Otherwise, your Android device won’t be able to reach your app! In this example, I added forwarding for port 3000 for my local front end and port 5000 for my local back end.
   如果您的应用程序在本地运行，则需要添加端口转发。 否则，您的Android设备将无法访问您的应用！ 在此示例中，我为本地前端添加了端口3000的转发，为本地后端添加了端口5000的转发。
6. Open your website by setting the URL in the input field.
   通过在输入字段中设置URL来打开您的网站。
7. Make sure to toggle Screencast in the menu to see on your computer how your Android device renders the given website. You can now inspect and debug the website with the Chrome Developer Tools.
   确保切换菜单中的Screencast，以在计算机上查看Android设备如何呈现给定的网站。 现在，您可以使用Chrome开发者工具检查和调试网站。

Running and debugging a web app running on localhost.

运行和调试在localhost上运行的Web应用程序。

In the screen above, you see a web app that is running at localhost:3000. As with any other website, I can inspect the DOM, modify styles, debug JavaScript code, simulate a slow network, and much more.

在上面的屏幕中，您看到一个正在localhost：3000运行的Web应用程序。 与其他任何网站一样，我可以检查DOM，修改样式，调试JavaScript代码，模拟慢速网络等等。

Inspect a website running on localhost with Chrome Developer Tools.

使用Chrome开发者工具检查在localhost上运行的网站。

Chrome远程调试的优势 (Advantages of Chrome Remote Debugging)

• You can interact with the website on both your computer and your Android device.
  您可以在计算机和Android设备上与网站进行交互。
• Chrome Development Tools help to properly inspect and debug your website.
  Chrome开发工具可帮助您正确检查和调试您的网站。
• Performance is fine for normal websites and web applications. Most web pages and even single-page applications should work flawlessly.
  对于普通网站和Web应用程序，性能很好。 大多数网页甚至单页应用程序都可以正常工作。
• Changes in your code are reflected automatically (either reload the web page or use a live reload/Hot Module Reload solution).
  代码中的更改会自动反映出来(重新加载网页或使用实时重新加载/热模块重新加载解决方案)。
• Testing on actual devices provides more validity than toggling the mobile view in Chrome.
  与在Chrome中切换移动视图相比，在实际设备上进行测试所提供的有效性更高。

Chrome远程调试的缺点 (Disadvantages of Chrome Remote Debugging)

• Performance may not be as good due to streaming.
  由于流媒体，性能可能不那么好。
• Since it’s a Google Chrome feature, you can’t use this approach with other browsers like Mozilla Firefox.
  由于它是Google Chrome浏览器的功能，因此您不能在Mozilla Firefox等其他浏览器中使用此方法。

结论 (Conclusion)

Thanks for reading this short introduction to Chrome remote debugging on Android. As you can see, we can easily test websites and web applications on Android devices using Chrome remote debugging. This enables us to test websites on mobile before shipping them to end-users.

感谢您阅读有关Android上的Chrome远程调试的简短介绍。 如您所见，我们可以使用Chrome远程调试功能轻松地在Android设备上测试网站和网络应用程序。 这使我们能够在将网站交付给最终用户之前在移动网站上对其进行测试。

How are you testing websites on Android devices? Let me know in the comments.

您如何在Android设备上测试网站？ 在评论中让我知道。

翻译自: https://medium.com/better-programming/how-to-remote-debug-websites-on-android-devices-with-chrome-e0afc661a8e8