Was ich gelernt habe, indem ich eine CSS -Linie in einem Open -Source -Projekt fixiert habe

Beim Durchsuchen von SufleT -Dokumentation auf dem iPhone fand ich einen offensichtlichen UI -Fehler. Mit dem Replyknob war nichts auszusetzen. Ich wollte schon immer zu Open -Source -Projekten beitragen und ich denke, es ist eine schnelle und einfache Lösung. Es stellt sich heraus, dass es mehr als nur eine Änderung einer Zeile von CSS -Code ist.

Das Kopieren, Debuggen und Einrichten einer lokalen Umgebung ist sowohl Spaß, schwierig als auch von großer Bedeutung.

Frage

Ich öffnete das Browser -Entwickler -Tool und dachte, ich würde das gleiche Problem in der Telefonansicht sehen. Der Fehler verschwand jedoch. Dies ist ein sehr kniffliges CSS -Problem.

? Ernte

Wenn Sie Chrome als Browser auf iOS verwenden, verwenden Sie immer noch Safari's Rendering Engine. Auszug aus Wikipedia:

Chrome verwendet iOS Webkit, das die eigene mobile Rendering -Engine und -Komponenten von Apple für seinen Safari -Browser ist. Daher kann die V8 JavaScript -Engine von Google nicht verwendet.

Caniuse unterstützt dies auch, was die folgenden Anweisungen zu IPS Safari enthält:

Es ist jetzt klar, warum das Problem nicht auf meinem Computer angezeigt wurde, aber es erschien auf meinem Handy. Andere Rendering -Motoren!

Reproduzieren das Problem lokal

Ich habe das Projekt heruntergeladen und vor Ort geleitet. Ich bestätige, dass es immer noch ein Problem ist, indem sie den lokalen Code sowohl auf dem Emulator als auch auf meinem tatsächlichen iPhone ausführen. Safari on macOS bietet eine einfache Möglichkeit, Entwickler -Tools für jede Instanz zu öffnen.

Dies bietet den gleichen Konsolenzugriff wie im Browser, funktioniert jedoch mit iOS -Safari. Ich lüge nicht, Apples Entwicklererfahrung ist großartig (siehe, was ich getan habe?).

Ich kann dieses Problem jetzt lokal reproduzieren.

? Ernte

Nach dem Herunterladen des Svelte-Repositorys und dem Betrachten eines Codes bemerkte ich, dass die Benutzeroberfläche und die SVG über ein Paket namens @sveltejs/Site-Kit eingeführt wurden. OK, jetzt muss meine lokale Version von Site Kit in Selte/Site gezogen werden, damit ich die Änderungen sehen und das Problem debuggen kann.

Ich muss Node_Modules in Selte's package.json auf meine lokale Kopie von Site-Kit richten. Das klingt nach einem symbolischen Link. Nachdem ich die Dokumentation ohne viele Ergebnisse nachgeschlagen hatte, suchte ich bei Google und bin auf NPM-Link gestoßen. Das zeigt mir, was ich tue!

Ich kann jetzt lokale Änderungen am Site-Kit vornehmen und sehen, dass sie sich im SELTE-Projekt widerspiegeln.

Das Problem lösen

Ernsthaft, ändern Sie einfach eine Codezeile:

 <code>border: transparent;</code>

Es ist jedoch nicht so einfach, den Ort zu finden, an dem diese Codezeile platziert werden sollte, wie Sie denken. Es gibt einen schwierigen Ort für die Quellkarte des Projekts, die zeigt, dass dieses CSS von der NAV.Selte -Komponente stammt und tatsächlich aus einer anderen Datei stammt. Dies wird eine weitere großartige Möglichkeit sein, zum Projekt beizutragen!

Dann suchen Sie herum und erfahren, dass dies verarbeitet wird und Sie werden auch mehr darüber erfahren, wie es gemacht wird. Auf Mobiltelefon und Desktop sieht jetzt alles großartig aus.

Rezension

Es war anfangs nur eine einfache Einzelzeilen-Codeänderung, aber es wurde zu einer Reise. Ich musste:

• Führen Sie Projekte und Komponentenlager aus
• Verstehen Sie die Systemverbindungen
• Tragen Sie eine Dokumentation für Site-Kit-Links bei
• Erfahren Sie mehr über verschiedene Browser -Rendering -Motoren
• Erfahren Sie, wie man den iOS -Safari -Browser emuliert
• Erfahren Sie, wie Sie auf seinen Debugger zugreifen können
• Finden Sie das Problem, wenn die Quellkarte nicht ordnungsgemäß funktioniert
• (Endgültig) das Problem beheben

Wenn Sie es selbst tun, befassen Sie sich normalerweise nicht mit solchen Problemen oder müssen ein großes und komplexes System aufbauen, das ein mentales Modell und Lernen erstellt. Sie können nicht aus dem Betreuer lernen. Am wichtigsten ist, dass Sie nicht alle Anstrengungen zum Aufbau eines beliebten Technologieprodukts sehen werden.

Als ich diese Idee bei CSS-Tricks einreichte, sagte Chris, er habe in letzter Zeit eine ähnliche Situation gehabt. Hartes Lernen ist dauerhaftes Lernen. Umarmung und Kampf.

Niemals aufhören

Ich habe eine weitere Frage aus dem SufleTe -Projekt und jetzt lerne ich CsStylesheet, weil es eine andere Frage gibt (glaube ich), wie Safari Keyframe -Animationen in styleManager.ts umgeht. Auf diese Weise bewegte sich mein Studium weiterhin auf einem Weg, den ich nie in meiner täglichen Arbeit eingenommen hatte.

Wenn etwas abstürzt, genießen Sie den Prozess des Lernens des Systems. Sie erhalten wertvolle Erkenntnisse darüber, warum das Ding zusammenbricht und was getan werden kann, um es zu beheben. Dies ist einer der großen Vorteile des Beitrags zu Open -Source -Projekten und warum ich Sie dazu ermutige.

Das obige ist der detaillierte Inhalt vonWas ich gelernt habe, indem ich eine CSS -Linie in einem Open -Source -Projekt fixiert habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!