szolgáltatásban
Webfejlesztőként sok időt töltünk a kódunk szerkesztési környezetben való megalkotásával. Ezután átugorunk a böngészőre, hogy a beépített fejlesztői eszközöket használjuk a termék felhasználói felületének hibakereséséhez és módosításához. Ezzel az a probléma, hogy a módosítások és a hibakeresés eredményei nem jelennek meg a forráskódban. A Microsoft Edge-ben jelenleg néhány megvitatásra váró megoldáson dolgozunk, és nagyon örülnénk visszajelzésed róluk
Ha olvasás helyett inkább videót nézel, itt három perces bemutatkozás:
A jelenlegi probléma a Fejlesztői eszközök finomításaival és módosításaival
Ma a böngésző DevTools rendkívül kifinomult vizuális eszközöket kínál, amelyek megtanítják – például – a CSS-szintaxist használat közben. Ezek az eszközök vizuális módon változtatják meg a dolgokat. Például rákattinthat a „Flexbox” ikonra bármely CSS flexbox tulajdonság mellett, és megjelenik egy felugró ablak, amely előnézeti képet nyújt a stílusmódosítás eredményéről.
Ez kiváló hibakeresési élmény, és megakadályozza, hogy állandóan a CSS-szintaxis után kelljen keresnie A kapcsolat azonban megszakad, mivel az ezekben a hibakeresési munkafolyamatokban megjelenített kód nem az, amit a kódszerkesztőben írt.
A Stílusszerkesztő úgy működik, hogy csak részben jeleníti meg az aktuális kód kódját. a böngészőben kiválasztott elemet. Nem tudja, hogy ez a kód hol és hogyan illeszkedik a weboldala többi CSS-jébe. Bár görgethet a kód többi részének megtekintéséhez, nem lenne jobb, ha az eredetit is megnézné CSS-fájl?
Ezt úgy érheti el, ha rákattint magára a CSS-fájlra mutató hivatkozásokra, így a Források eszközhöz jut, és távolabbra kerül a Stílusszerkesztőtől. p> 
Ez egy szerkesztő a böngésző fejlesztői eszközeibe ágyazva, ami remek volt, amikor megjelent, de nem ragyog ahhoz képest, amit manapság elvárunk egy szerkesztőtől. Hacsak nem távolítja el az eszközöket, és nem használja őket egy saját ablakban, akkor sem lesz elegendő képernyőfelülete a kényelmes szerkesztési élményhez.
Akár vizuális eszközökkel módosítja a CSS-t, akár a Források szerkesztőjét, egy probléma marad: ha sokat változott és elérte a kívánt eredményt, hogyan helyezheti vissza ezeket a változtatásokat a forráskódba?
Tudta, hogy létezik Változások eszköz?
A böngésző fejlesztői eszközei a Változások nevű funkció, amely ebben segít, és amely nemigen használható és nagyrészt ismeretlen. A parancsmenüből vagy a helyi menüből érheti el, és megmutatja a munkamenet során módosított összes fájl eltérő nézetét. Ezzel az eszközzel a módosításokat visszamásolhatja és visszaillesztheti a forrásfájljaiba.
A Firefox egy kissé eltérő megközelítést alkalmaz a változtatási eszközhöz, amely az Ön által végrehajtott változtatásokkal élőben frissít. Ezenkívül létrehoz egy CSS-fájlt, amelyet kimásolhat és beilleszthet, és amelyhez megjegyzések tartoznak, amelyek elmagyarázzák, hogy melyik fájlba kell visszailleszteni ezeket a módosításokat, és mit távolítottak el vagy adtak hozzá.
Bár ez egy jó lépés a helyes irányba, a kód másolásához és beillesztéséhez további lépésre van szükség vissza a szerkesztőbe.
Továbbfejlesztett munkaterület-folyamat, beleértve a Visual Studio kódotA munkaterületek a Chromium Developer Toolsban már régóta léteznek, de nem látják túlzottan hasznát. Ezért szerettük volna nyilvánvalóbbá tenni, hogy a böngésző DevTools és a kódszerkesztő közötti változások élőben szinkronizálhatók. Arra is rájöttünk, hogy a Források eszköz szerkesztője nem az, amit az emberek használni szeretnének.
Mi lenne, ha élvezné a már használt szerkesztő kényelmét és a munkaterületek fájljainak élő módosításainak előnyeit?
A Microsoft Edge 96-os verziójától kezdődően a DevToolsban egy új kísérletet találhat a következő néven: „Nyílt forráskódú fájlok a Visual Studio Code-ban.”
Miután bekapcsolta ezt a funkciót, és újraindította a fejlesztői eszközöket, a merevlemezen lévő fájlhoz vagy a helyi szerver címéhez navigálhat. A localhost vagy a 127.0.0.1 kéri, hogy azonosítsa a fájl gyökérmappáját. Leiratkozhat egy munkamenetről, vagy soha nem látja ezt a lehetőséget. nyereséget.
Egyszer ha kiválaszt egy mappát, a böngésző engedélyt kér, hogy hozzáférjen ahhoz a mappához – hasonlóan ahhoz, mint amikor a Források eszközben a Munkaterületeket használta.
Ha most bármilyen módosítást végez a Stílusok panelen, a fájl megváltozik a lemezen. A különbség az, hogy ha a Visual Studio Code szerkesztője a számítógépen, a fájlok hivatkozásaira kattintva a fájlok ebben a szerkesztőben nyílnak meg, nem pedig a Források eszközben. A hozzá adott testreszabással és bővítményekkel a megszokott környezetben maradhat.
Ez nagyszerű, mivel a CSS-módosítások most már véglegesek. A probléma azonban az, hogy túlságosan tolakodóak lehetnek. A Stílusok eszközben végzett bármilyen változtatás, például a méret egy egységnyi módosítása, a merevlemezen lévő fájl megváltozását eredményezi. Ha bármilyen élő újratöltési kiszolgálómegoldást vagy akár olyan szkripteket használ, amelyek figyelnek egy mappát és elindítják az összeállítási folyamatot, ez gyorsan összezavarhat.
CSS-tükörszerkesztés
A legújabb verzióban Az Edge DevTools for Visual Studio Code-bővítménye egy másik módszert vezettünk be a szerzői/hibakereső hurok bezárására, az úgynevezett „CSS Mirror Editing”. Ha szeretné, megtekintheti ezt a 40 másodperces bemutatkozó videót.
Ha engedélyezi ezt a funkciót, a Stílusok eszközben végrehajtott módosítások a forráskódot is érintik, de a fájl változatlan marad, amíg el nem menti a Visual Studio Code programban. Megvan az az előnye, hogy nem veszíti el a módosításokat, és teljes mértékben kézben tarthatja a merevlemezen lévő fájlokat.
Ha verzióvezérlést használ, az összes módosítást láthatja különbségi nézet, miután elmentette a fájlt. Ez biztosítja a Workspaces munkafolyamat összes kényelmét a fájlok kevesebb módosításával.
Mit tegyünk, hogy jobbá tegyük ezt az élményt?
Úgy tűnik, minden megfelelő összetevővel rendelkezünk hely, ahol a fejlesztők teljes körű szerkesztési és hibakeresési élményt nyújthatnak. Szeretnénk tudni, mit gondol ezekről a megközelítésekről, és melyiket részesíti előnyben.
Ha bármilyen visszajelzése van, forduljon az Edge DevTools csapatához a Twitteren a @EdgeDevTools, írjon megjegyzést a GitHubon található, a CSS-tükörszerkesztéssel kapcsolatos problémához a> vagy használja a DevToolsba beépített Visszajelzés eszközt a böngészőben.
– Chris Heilmann, vezető programmenedzser, Microsoft Edge