wda inspector_使用Mobile Safari Web Inspector进行实时响应故障排除

wda inspector

When they work with mobile for the first time many designer-developers assume that page changes must be uploaded to a server before they can be seen on a mobile device. This makes for extremely drawn-out troubleshooting: fixes for mobile are guessed at, coded, uploaded, and the mobile browser refreshed, wit this process repeated dozens of times until the problem is solved.

当他们第一次使用移动设备工作时，许多设计师开发人员认为页面更改必须先上传到服务器，然后才能在移动设备上看到。 这使得故障排除工作变得极为冗长：猜测，编码，上传移动修复程序，然后刷新移动浏览器，此过程重复了数十次，直到问题得以解决。

Thankfully, there's a much better and more streamlined way, if you have a Mac and an iDevice (iPhone, iPad, etc).

值得庆幸的是，如果您拥有Mac和iDevice(iPhone，iPad等)，这是一种更好，更简化的方法。

Before you begin, make sure you have set up desktop and Mobile Safari for web development, discussed earlier.

在开始之前，请确保已经设置了用于Web开发的桌面和Mobile Safari，如前所述 。

1. Start up Mobile Safari on your iOS device and navigate to the page you wish to test, which could be on a local (development) server or a live site.
   在iOS设备上启动Mobile Safari，然后导航到您要测试的页面，该页面可以在本地(开发)服务器或实时站点上。
2. Start up Safari on your Mac and connect to your your iOS device using the standard cable.
   在Mac上启动Safari，然后使用标准电缆连接到iOS设备。

3. On your Mac, go to the Develop menu in Safari. You should see the name of your device; moving the cursor to that entry will show you the name of the page that is being looked at on your iPhone, iPod, or iPad.

   在Mac上，转到Safari中的“ 开发”菜单。 您应该看到设备的名称； 将光标移至该条目将为您显示在iPhone，iPod或iPad上正在查看的页面的名称。

4. Choosing the name of the page will bring up the Safari Web Inspector on your Mac. While there are many things you can do at this point, you'll probably want to start in Elements mode; click the appropriate button at the top of the Web Inspector window.

   选择页面名称将在Mac上打开Safari Web Inspector 。 尽管此时您可以执行许多操作，但您可能需要从Elements模式开始； 单击Web检查器窗口顶部的相应按钮。

5. You'll find that moving the cursor over elements in the Web Inspector in desktop Safari, will highlight the matching elements on the iOS device, as shown in the video at the top of this article. Using this, and the Rules panel on the right side, you can change content, alter the styles for elements, diagnose the cause of display problems, and many other useful tasks, with the results displayed immediately on your mobile device.

   您会发现，将光标移到桌面Safari中的Web Inspector中的元素上，将突出显示iOS设备上的匹配元素，如本文顶部的视频所示。 使用此功能以及右侧的“规则”面板，您可以更改内容，更改元素的样式，诊断显示问题的原因以及许多其他有用的任务，并将结果立即显示在移动设备上。

Unfortunately, Safari doesn’t yet offer the option to write your changes directly into the source code from the browser, requiring you to transfer any changes over to your editor of choice. However, just as it stands the feature is incredibly useful, allowing you to diagnose issues directly, without guesswork; by comparison, the traditional method is blind stabs at code in the dark.

不幸的是，Safari尚未提供将更改直接从浏览器写入源代码的选项，要求您将所有更改转移到所选的编辑器中。 然而，就目前情况而言，此功能非常有用，它使您无需进行猜测即可直接诊断问题。 相比之下，传统方法是在黑暗中盲目刺破代码。

It should be noted that there’s a similar process available for Android devices and Chrome, a technique I’ll cover in a future article.

应该注意的是，Android设备和Chrome也有类似的过程，我将在以后的文章中介绍这一技术。

翻译自: https://thenewcode.com/215/Use-Mobile-Safari-Web-Inspector-for-Real-Time-Responsive-Troubleshooting

wda inspector