我通過在開源項目中修復一行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中文網其他相關文章！