我通过在开源项目中修复一行CSS所学到的知识

在iPhone上浏览Svelte文档时，我发现了一个明显的UI错误。REPL旋钮的缺口完全不对劲。我一直想为开源项目做贡献，我认为这是一个快速简单的修复。事实证明，它不仅仅是更改一行CSS代码那么简单。

复制、调试、设置本地环境既有趣、又困难，而且意义重大。

问题

我打开了浏览器开发者工具，以为会在手机视图中看到同样的问题。但是，错误消失了。现在这是一个非常棘手的CSS问题。

? 收获

如果您在iOS上使用Chrome作为浏览器，您仍然使用的是Safari的渲染引擎。摘自维基百科：

Chrome使用iOS WebKit——这是Apple为其Safari浏览器开发的自己的移动渲染引擎和组件——因此它无法使用Google自己的V8 JavaScript引擎。

caniuse也对此进行了佐证，它在iPS Safari上提供了以下说明：

现在很清楚为什么问题在我的机器上没有出现，但在我的手机上却出现了。不同的渲染引擎！

在本地重现问题

我下载了项目并在本地运行。我通过在模拟器以及我的实际iPhone上运行本地代码来确认它仍然是一个问题。macOS上的Safari提供了一种简单的方法来打开每个实例的开发者工具。

这提供了与在浏览器中一样的控制台访问权限，但适用于iOS Safari。我不撒谎，Apple的开发者体验非常棒（看到我做了什么吗？?）。

我现在能够在本地重现这个问题了。

? 收获

在下载Svelte仓库并查看了一些代码后，我注意到UI和SVG是通过名为@sveltejs/site-kit的包引入的。很好，现在我需要我的site kit本地版本被拉入svelte/site，这样我才能看到更改并调试问题。

我需要将Svelte的package.json中的node_modules指向我的site-kit本地副本。这听起来像是一个符号链接。在查阅文档没有太多结果后，我在谷歌上搜索，偶然发现了npm-link。这让我看到了我在做什么！

我现在可以对site-kit进行本地更改，并看到它们反映在Svelte项目中。

解决问题

说真的，只需要更改一行代码：

<code>border: transparent;</code>

但是找到应该放置这行代码的位置并不像你想象的那么简单。项目的源映射还有一些粗糙的地方，它显示这个CSS来自Nav.svelte组件，而实际上它来自另一个文件。这将是为项目做贡献的另一种好方法！

然后你四处搜索并了解到这一点正在被处理，你也会更多地了解它是如何完成的。现在所有东西在移动端和桌面端看起来都很棒。

回顾

最初只是一个简单的单行代码更改，却变成了一段旅程。我不得不：

• 运行项目和组件仓库
• 了解系统链接
• 为site-kit的链接贡献文档
• 了解不同的浏览器渲染引擎
• 了解如何模拟iOS Safari浏览器
• 了解如何访问其调试器
• 在源映射无法正常工作时找到问题
• (最终)修复问题

自己动手时，你通常不会处理这样的问题，或者需要构建一个需要建立心智模型并学习的大型复杂系统。你无法向维护者学习。最重要的是，你不会看到构建流行的技术产品所付出的所有努力。

当我向CSS-Tricks提交这个想法时，Chris说他最近也遇到了类似的情况。艰难的学习是持久的学习。拥抱挣扎。

永不止步

我从Svelte项目中获取了另一个问题，现在我正在学习CSSStyleSheet，因为还有一个问题（我认为），关于Safari如何处理stylemanager.ts中的关键帧动画。学习就这样继续沿着我日常工作中从未走过的道路前进。

当某些东西崩溃时，享受学习系统的过程。你将获得宝贵的见解，了解为什么该事物崩溃以及可以采取哪些措施来修复它。这是为开源项目做贡献的巨大好处之一，也是我鼓励你这样做的原因。

以上是我通过在开源项目中修复一行CSS所学到的知识的详细内容。更多信息请关注PHP中文网其他相关文章！