远程调试webkit_在混合移动应用程序中调试Webkit

远程调试webkit

At WWDC 2018, Apple announced it was deprecating its original webview framework (UIWebView) in favor of a WebKit-based framework. WebKit is an open-source project used by both browsers and webviews, including Safari. The overall architecture of WKWebView is quite different than UIWebView, and this dramatically impacts what we can do when debugging hybrid apps, such as our own Salesforce App. The Salesforce App is full of powerful native features, but the incredible flexibility of the app is due to its Hybrid nature. Hybrid apps allow for the benefits of native apps while using WebViews to deliver experiences built on web technologies. In the case of the Salesforce App, this includes Visualforce, Lightning (Aura), and Lightning Web Components.

在WWDC 2018上，Apple 宣布将弃用其原始的Webview框架(UIWebView)，而推荐使用基于WebKit的框架。 WebKit是一个开放源代码项目，供浏览器和Web视图(包括Safari)使用。 WKWebView的整体体系结构与UIWebView完全不同，这极大地影响了我们在调试混合应用程序(例如我们自己的Salesforce应用程序)时可以做的事情。 Salesforce应用程序充满了强大的本机功能，但是该应用程序具有令人难以置信的灵活性是由于其混合特性。 混合应用程序在使用WebView交付基于Web技术的体验时，可充分利用本机应用程序的优势。 对于Salesforce应用程序，这包括Visualforce ， Lightning(Aura)和Lightning Web组件 。

WebKit架构 (WebKit Architecture)

The first major shift from UIWebView to WebKit was moving from an in-process framework to a multi-process architecture. WebKit splits functionality into multiple processes, multiple copies of which may be running at a single time.

从UIWebView到WebKit的第一个主要转变是从进程内框架过渡到多进程体系结构。 WebKit将功能划分为多个进程，多个进程可以一次运行。

• UIProcess — This is your app. The WKWebview code and WebKit framework is loaded in your process space
  UIProcess-这是您的应用程序。 WKWebview代码和WebKit框架已加载到您的进程空间中
• WebContent, aka WebProcess — This is where JS and DOM memory allocations reside
  WebContent，又称WebProcess-这是JS和DOM内存分配所在的位置
• Network Process — This process is responsible for making the underlying network requests associated with web requests
  网络流程-此流程负责发出与Web请求关联的基础网络请求
• Storage Process — This process is used for database and service worker storage.
  存储过程-此过程用于数据库和服务工作者的存储。

Because WebKit now splits responsibility across multiple processes, not everything occurs in your own process space. As a consequence, debugging hybrid issues may require attaching to multiple processes. Unfortunately, attaching a debugger to a process requires that the process is built with specific entitlements, which is not the case for the WebKit processes deployed on iOS devices or in the Simulator runtime environments. But, there IS a way!

因为WebKit现在将责任分散在多个流程中，所以并不是所有事情都发生在您自己的流程空间中。 结果，调试混合问题可能需要附加到多个进程。 不幸的是，将调试器附加到进程要求该进程以特定的权限构建，而在iOS设备或Simulator运行时环境中部署的WebKit进程则不是这种情况。 但是，有办法！

获取WebKit源 (Get the WebKit Source)

The first step for debugging hybrid app behavior under WebKit is to get the WebKit source code. The WebKit source is quite large; at the time of this article, it takes up 10.4Gb of storage.

在WebKit下调试混合应用程序行为的第一步是获取WebKit源代码。 WebKit的源代码很大。 在撰写本文时，它占用了10.4Gb的存储空间。

You can pull the source using Git or SVN. Although the WebKit team prefers SVN, we prefer Git, so we will write from that perspective. Clone the WebKit repo as follows: git clone git://git.webkit.org/WebKit.git WebKit The Git repo does not track all of the branches that the SVN repository does. For most debugging, you can use master; however, if you are trying to troubleshoot a specific behavior tied to a particular iOS release, you will have more work to do. The iOS release branches are not present in the Git repo, so you will have to set up tracking of the SVN branches from Git. If this is a requirement, follow the steps at the WebKit blog here. This will use considerably more space, so be prepared. Also, expect some challenges getting git-svn up and working on Catalina, so only attempt this if necessary.

您可以使用Git或SVN拉动源。 尽管WebKit团队更喜欢SVN，但我们更喜欢Git，因此我们将从这个角度进行撰写。 如下git clone git://git.webkit.org/WebKit.git WebKit存储库： git clone git://git.webkit.org/WebKit.git WebKit Git存储库并不跟踪SVN存储库所做的所有分支。 对于大多数调试，您可以使用master。 但是，如果您要解决与特定iOS版本相关的特定行为，则需要做更多的工作。 Git仓库中没有iOS版本的分支，因此您必须从Git设置对SVN分支的跟踪。 如果这是一个要求，请在WebKit的博客的步骤这里 。 这将占用更多的空间，因此请做好准备。 另外，在启动git-svn并在Catalina上工作时会遇到一些挑战，因此仅在必要时尝试尝试。

为iOS模拟器构建WebKit (Build WebKit for the iOS Simulator)

I find that staying on the latest GA version of Xcode will minimize any compilation issues you have with WebKit source, but your mileage may vary. Keep in mind that you can have multiple versions of Xcode installed and can build WebKit with one version and your app in another. The WebKit team has included some Perl5 and Python3 scripts which automate much of the work. If any one of these scripts fails, a first step might be to ensure you are running a current version of Python3 and Perl5. The first thing we do is prepare our Xcode environment for building WebKit using the script: sudo Tools/Scripts/configure-xcode-for-embedded-development This script will copy a few files from the Mac OSX SDK to the iOS SDK folders, generate a stub header, and other goodies that are required before we can build and run WebKit on iOS. Next, we build the frameworks using another script provided by the WebKit team: Tools/Scripts/build-webkit --ios-simulator You can run build-webkit without any params to see additional options, including --debug. This will build and place the WebKit frameworks in the WebKitBuild subdirectory of where you cloned the Git repo. Go get something to drink, read a book, watch a movie; this will take a while.

我发现使用最新版本的Xcode可以最大程度地减少WebKit源代码出现的任何编译问题，但是您的努力可能会有所不同。 请记住，您可以安装多个版本的Xcode，并且可以使用一个版本构建WebKit，而使用另一个版本构建您的应用程序。 WebKit团队包含了一些Perl5和Python3脚本，这些脚本可以使大部分工作自动化。 如果这些脚本中的任何一个失败，则第一步可能是确保您正在运行最新版本的Python3和Perl5。 我们要做的第一件事是使用脚本准备用于构建WebKit的Xcode环境： sudo Tools/Scripts/configure-xcode-for-embedded-development此脚本会将一些文件从Mac OSX SDK复制到iOS SDK文件夹，生成存根标头，以及在iOS上构建和运行WebKit之前所需的其他东西。 接下来，我们使用WebKit团队提供的另一个脚本来构建框架： Tools/Scripts/build-webkit --ios-simulator您可以在没有任何参数的情况下运行build-webkit来查看其他选项，包括--debug 。 这将在您克隆Git存储库的WebKitBuild子目录中构建WebKit框架并将其放置在该目录中。 去喝点东西，看书，看电影； 这需要一段时间。

将开发构建WebKit与混合应用程序一起使用 (Using development build WebKit with hybrid apps)

Now we have some fancy new frameworks and xpc files in our WebKitBuild folder, but that does us no good if we cannot get the iOS simulator to use these frameworks instead of the standard WebKit frameworks. This can be done in one of two ways: via the command-line using the WebKit team’s scripts, or through Xcode.

现在，我们的WebKitBuild文件夹中有一些精美的新框架和xpc文件，但是如果我们无法让iOS模拟器使用这些框架而不是标准WebKit框架，那对我们没有好处。 这可以通过以下两种方式之一完成：通过使用WebKit团队脚本的命令行，或者通过Xcode。

命令行-Run-WebKit-App (Command Line — Run-WebKit-App)

This method relies on another Perl Script provided by the WebKit team. To use it, you must build your app bundle and know the path to it. Typically your app will get built under derived data. Launch your app using the following command: Tools/Scripts/run-webkit-app <Path to your .App File> --ios-simulator This command

此方法依赖于WebKit团队提供的另一个Perl脚本。 要使用它，您必须构建应用程序捆绑包并知道其路径。 通常，您的应用将在派生数据下构建。 使用以下命令启动您的应用程序： Tools/Scripts/run-webkit-app <Path to your .App File> --ios-simulator此命令

• Creates a new simulator image
  创建一个新的模拟器图像
• Installs your app bundle
  安装您的应用包
• Executes your app in a runtime environment, which uses the previously built WebKit frameworks instead of the standard WebKit frameworks.
  在运行时环境中执行您的应用程序，该环境使用以前构建的WebKit框架而不是标准WebKit框架。

Once your app is up and running, you can use Xcode to attach to your process and the WebKit processes. The WebKit processes built locally will have the suffix “.Development,” for example, com.apple.WebKit.WebContent.Development.

一旦您的应用程序启动并运行，您就可以使用Xcode将其附加到您的进程和WebKit进程。 本地构建的WebKit进程的后缀为“ .Development”，例如com.apple.WebKit.WebContent.Development。

Xcode (Xcode)

Another method for launching your app with debug versions of WebKit is from the WebKit Xcode project. This approach has an advantage that the debugger will attach to all WebKit spawned processes. The command line method will launch the app in the simulator, but the debugger must be attached independently. If WebKit has spawned multiple processes, it may be challenging to find the specific one you want to attach. Also, if you’re going to break at a very early point in the lifecycle of WebKit, you may not be able to accurately time the attach operation. Open the WebKit workspace in Xcode, and then under File → Workspace Settings, select the following:

使用WebKit的调试版本启动应用程序的另一种方法是来自WebKit Xcode项目。 这种方法的优点是调试器将附加到所有WebKit生成的进程。 命令行方法将在模拟器中启动应用程序，但调试器必须独立连接。 如果WebKit产生了多个进程，则可能很难找到要附加的特定进程。 另外，如果您要在WebKit生命周期的早期阶段中断，则可能无法准确计时连接操作的时间。 在Xcode中打开WebKit工作区，然后在File→Workspace Settings下，选择以下内容：

• Change the Derived Data selection to “Workspace-relative Location”.
  将“派生数据”选择更改为“相对于工作空间的位置”。
• Type WebKitBuild in the text box.
  在文本框中键入WebKitBuild。
• Click Advanced
  点击高级

• Select Custom
  选择自定义
• Change the drop down list to Relative to Workspace.
  将下拉列表更改为相对于工作区。
• Type WebKitBuild in the text boxes for Products and Intermediates.
  在“产品和中间体”的文本框中键入WebKitBuild。

The next step is to point Xcode to our app.

下一步是将Xcode指向我们的应用程序。

• Select WebKit as the active scheme under the Product → Scheme
  在产品→方案下选择WebKit作为活动方案
• Select Product → Scheme → Edit Scheme
  选择产品→方案→编辑方案
• Select the Run action, and you will see that there is no executable defined when we run WebKit
  选择“运行”操作，您将看到在运行WebKit时未定义可执行文件。

• In the drop-down list for Executable, select Other and then locate the. App file for your app.
  在“可执行文件”的下拉列表中，选择“其他”，然后找到。 您的应用程序的应用程序文件。

Now we are good to go!

现在我们可以出发了！

• Select Product → Perform Action → Run Without Building to launch your app with the local versions of WebKit.
  选择产品→执行操作→运行而无需构建，以使用WebKit的本地版本启动您的应用程序。
• You will see the debugger auto-attach not only to your app, but also to the WebKit processes.
  您将看到调试器不仅自动附加到您的应用程序，还自动附加到WebKit进程。

Happy Debugging!

调试愉快！

结论 (Conclusion)

Hopefully this article lets you explore a bit deeper into your Hybrid stack and better understand how the WebKit layer on which you rely works. You may now debug into WebKit source code, or run Instruments to profile the WebKit processes when running your web apps. The WebKit team frequently posts helpful information to their blog at https://webkit.org/blog/, which is where much of this information came from.

希望本文使您能够更深入地了解Hybrid堆栈，并更好地了解您所依赖的WebKit层如何工作。 您现在可以调试WebKit源代码，或在运行Web应用程序时运行Instruments来配置WebKit进程。 WebKit团队经常在https://webkit.org/blog/上将有用的信息发布到其博客中，这是许多信息的来源。

翻译自: https://engineering.salesforce.com/debugging-webkit-in-hybrid-mobile-apps-2eee63a4c922

远程调试webkit