Testen React adaptive Design für mobile auf dem Desktop? (Windows)

Question

Ich bin ein neuer Entwickler und ich wurde vor kurzem auf Stack-Überlauf geschlagen, weil ich eine Frage gestellt hatte, die nicht spezifisch genug war (was mich dazu brachte, Fragen zu verbieten), also stellte ich diese Frage so spezifisch wie möglich. Bitte kommentieren Sie, wenn es ein Problem mit meiner Frage gibt, damit ich mehr über die Funktionsweise dieser Community erfahren kann, anstatt mich sofort zu wählen. Ich reagiere ziemlich schnell!

Ich habe vor kurzem eine Website mit React und Knoten erstellt. Ich arbeite derzeit an der mobilen Website. Ich habe alles lokal ausgeführt und teste derzeit die mobile Version entweder mit einem Emulator (Ripple Beta) im Chrome Store oder indem ich es über Surge einsetze. Es ist jedoch anders, es auf dem Desktop zu betreiben.

Nun, bevor Sie vorschlagen, was Unterschiede verursachen können wollte ich auch anmerken, dass ich derzeit bin die Umsetzung folgenden (basierend auf, was ich in anderen ähnlichen Themen sah):

<meta name="viewport" content="width=device-width, initial-scale=1"> 

reagieren ansprechendes Paket

Ich möchte meine Website einzelne URL anstelle von einem m (dot) .link und ich möchte auch ein adaptives Design statt reaktionsfähig zu halten (ich weiß, reagiert ist in der Regel besser).

Ein Beispiel, wo ein Emulator nicht zum Testen ausreicht, ist das Testen der Kompatibilität mit einer sehr spezifischen Syntax. Zum Beispiel, iphone versteht bestimmte es6 Syntax wie "new Date()" für bestimmte Datumsformate nicht, während Android tut.

Gibt es eine Möglichkeit, ein adaptives Design für Mobile auf dem Desktop zu testen, so dass ich es lokal auf meinem Computer ausführen kann, anstatt jedes Mal auf Hochspannung zu setzen (damit ich es auf meinem Handy öffnen kann).

Dies wird das Debuggen dieser Art von Problemen viel einfacher machen! Ich habe viele ähnliche Threads für responsive Designs gesehen, aber ich denke, adaptive Designs (komplett anderes Design als mein Design auf der Desktop-Website) können einige einzigartige Probleme haben, wie oben gesehen. Es wäre aber toll, wenn ich noch die Kernfunktionalität/Komponenten der Desktop-Version nutzen könnte.

Answer 1

Ich arbeitete an einem Schulprojekt, bei dem wir unsere Web-App mit einem echten Telefon testen mussten. Wir haben einen Firebase-Server gehostet. Beginnen Sie mit der Installation des Firebase cli npm install -g firebase-tools und geben Sie dann firebase init in Ihre Konsole ein. (https://firebase.google.com/docs/hosting/deploying als Referenz) Dann schieben Sie Ihren Code auf Ihr Hosting mit firebase deploy, dann können Sie zu Ihrem URL auf Ihrem Telefon gehen und es sollte ziemlich gut funktionieren. Firebase Deploy wäre wie ein git push, es dauert nur Sekunden, bis es fertig ist, also ist es ziemlich schnell.

Edit: Sorry hat nicht realisiert, dass Surge das gleiche getan hat. Ich glaube jedoch nicht, dass Sie problemlos auf Ihrem Computer testen können. Obwohl Sie Xcode herunterladen können, wenn Sie eine Karte haben und den Iphone-Emulator und Android Studio für den Android-Emulator verwenden. Aber beide brauchen ziemlich lange, um zu starten, Persönlichkeit, würde ich nur zu Überspannungsschutz oder Firebase bereitstellen und auf einem echten Telefon testen, wenn Sie einen haben.