Bilang mga web developer, gumugugol kami ng maraming oras sa pag-author ng aming code sa isang kapaligiran sa pag-edit. Pagkatapos ay lumipat kami sa browser upang gamitin ang mga in-built na tool ng developer upang i-debug at i-tweak ang UI ng produkto. Ang problema dito ay ang mga resulta ng pag-tweaking at pag-debug ay hindi makikita sa source code. Sa Microsoft Edge, kasalukuyan kaming gumagawa ng ilang solusyon na bukas para sa talakayan, at gusto namin ang iyong feedback sa kanila
Kung mas gusto mong manood ng video sa halip na magbasa, narito tatlong minutong panimula:
Ang kasalukuyang problema sa mga tweak at pagbabago sa Developer Tools h2>
Ngayon, ang browser na DevTools ay nagbibigay ng lubos na sopistikadong visual na mga tool na nagtuturo sa iyo – halimbawa – CSS syntax habang ginagamit mo ang mga ito. Binabago ng mga tool na ito ang mga bagay sa isang visual na paraan. Halimbawa, maaari mong i-click ang icon na “Flexbox”sa tabi ng anumang CSS flexbox property at makakakuha ka ng popup na magbibigay sa iyo ng preview ng kinalabasan ng pagbabago ng istilong iyon.
Ito ay isang mahusay na karanasan sa pag-debug at pinipigilan kang maghanap ng CSS syntax sa lahat ng oras. Gayunpaman, mayroong disconnect, dahil ang code na ipinapakita sa mga debugging workflow na ito ay hindi ang isinulat mo sa iyong code editor.
Gumagana ang Styles editor sa pamamagitan ng pagpapakita lamang ng bahagyang view ng code para sa kasalukuyang elementong pinili sa browser. Hindi mo alam kung saan at kung paano umaangkop ang code na iyon sa natitirang bahagi ng iyong CSS sa iyong webpage. Bagama’t maaari kang mag-scroll upang tingnan ang natitirang bahagi ng code, hindi ba mas mabuting makita din ang orihinal CSS file?
Maaari mong ma-access ang isang iyon sa pamamagitan ng pag-click sa mga link sa CSS file mismo, na magdadala sa iyo sa Sources Tool at malayo sa editor ng Styles.
Ito ay isang editor naka-embed sa mga tool ng developer ng browser na maganda noong lumabas ang mga ito ngunit hindi kumikinang kumpara sa inaasahan namin mula sa isang editor sa mga araw na ito. Maliban kung i-undock mo ang mga tool at gamitin ang mga ito sa isang sariling window, wala ka ring sapat na screen estate para sa isang maginhawang karanasan sa pag-edit.
Gamitin mo man ang mga visual na tool upang i-tweak ang iyong CSS, o ang editor ng Sources, isang problema ang nananatili: kapag marami kang nagbago ng mga bagay at nakarating ka sa ninanais na resulta, paano mo ibabalik ang mga pagbabagong ito sa iyong source code?
Alam mo ba na mayroong tool sa Mga Pagbabago?
Ang Mga Tool ng Developer ng Browser ay may isang tampok na tumutulong dito na tinatawag na Mga Pagbabago na hindi gaanong nagagamit at higit na hindi alam. Maa-access mo ito mula sa command menu o sa context menu at nagpapakita ito sa iyo ng diff view ng lahat ng file na binago mo sa session na ito. Magagamit mo ang tool na ito upang kopyahin at i-paste ang mga pagbabago pabalik sa iyong mga source file.
Gumagamit ang Firefox ng bahagyang naiibang diskarte ng isang tool sa mga pagbabago na nag-a-update nang live sa mga pagbabagong ginagawa mo. Gumagawa din ito ng CSS file para kopyahin at i-paste mo na may mga komentong nagpapaliwanag kung sa aling mga file i-paste ang mga pagbabagong ito pabalik at kung ano ang inalis o idinagdag.
Bagama’t ito ay isang magandang hakbang sa tamang direksyon, nangangailangan ito ng karagdagang hakbang upang kopyahin at i-paste ang code pabalik sa iyong editor.
Isang pinahusay na daloy ng Workspace kabilang ang Visual Studio CodeWorkspaces sa Chromium Developer Tools ay matagal nang umiiral ngunit hindi gaanong ginagamit. Iyon ang dahilan kung bakit gusto naming gawing mas malinaw na maaari kang magkaroon ng live na pag-sync ng mga pagbabago sa pagitan ng browser DevTools at isang code editor. Napagtanto din namin na ang editor sa tool na Sources ay hindi ang gustong gamitin ng mga tao.
Paano kung magkakaroon ka ng kaginhawahan ng editor na ginagamit mo na at ang mga benepisyo ng mga live na pagbabago sa mga file ng Workspaces?
Simula sa bersyon 96 ng Microsoft Edge, makakahanap ka ng bagong eksperimento sa DevTools na tinatawag na “Open source file sa Visual Studio Code“.
Kapag na-on mo ang isang ito at na-restart ang mga tool ng developer, nagna-navigate sa isang file sa iyong hard drive o isang lokal na address ng server tulad ng localhost o 127.0.0.1 ay magbibigay sa iyo ng prompt na humihiling sa iyo na tukuyin ang root folder ng file na ito. Maaari ka ring mag-opt out para sa isang session o hindi kailanman makikita ang opsyon na ito makakuha.
Minsan pipili ka ng folder, humihingi sa iyo ang browser ng pahintulot na makakuha ng access sa folder na iyon – katulad ng kailangan mo kapag gumagamit ng Workspaces sa Sources tool.
Kapag gumawa ka na ngayon ng anumang pagbabago sa pane ng Styles, magbabago ang file sa disk. Ang pagkakaiba ay kapag mayroon kang Visual Studio Code bilang iyong editor sa computer, ang pag-click sa mga link sa mga file ay magbubukas sa mga ito sa editor na ito sa halip na sa isa sa tool na Mga Pinagmumulan. Mananatili ka sa kapaligiran na nakasanayan mo kasama ang lahat ng mga pag-customize at extension na idinagdag mo dito.
Maganda ito dahil permanente na ngayon ang iyong mga pagbabago sa CSS. Ang problema ay kahit na maaaring sila ay masyadong mapanghimasok. Anumang pagbabago sa tool ng Styles tulad ng pagpapalit ng laki ng isang unit ay magreresulta sa pagbabago ng file sa iyong hard drive. Kung gagamit ka ng anumang live na reload server solution o kahit na mga script na nanonood ng folder at nagti-trigger ng proseso ng pagbuo, maaari itong mabilis na magulo.
CSS mirror editing
Sa pinakabagong bersyon ng Extension ng Edge DevTools para sa Visual Studio Code nagpakilala kami ng ibang paraan upang isara ang authoring/debugging loop na tinatawag na”CSS Mirror Editing.”Kung gusto mo, mapapanood mo itong 40 segundong pagpapakilala ng video.
Kung pinagana mo ang feature na ito, ang mga pagbabagong ginawa sa Styles tool ay makakaapekto rin sa source code, ngunit ang file ay nananatiling hindi nagbabago hanggang sa i-save mo ito sa Visual Studio Code. Makukuha mo ang pakinabang ng hindi mawala ang iyong mga pagbabago at mananatili kang ganap na kontrol sa mga file sa hard drive.
Kung gagamit ka ng version control, makikita mo ang lahat ng pagbabagong ginawa mo bilang isang diff view kapag na-save mo ang file. Ibinibigay nito sa iyo ang lahat ng kaginhawahan ng workspace ng Workspaces na may mas kaunting pagbabago sa mga file.
Ano ang dapat naming gawin upang maging mas mahusay ang karanasang ito?
Mukhang mayroon kaming lahat ng tamang bahagi sa lugar upang bigyan ang mga developer at end-to-end na karanasan sa pag-akda at pag-debug. Gusto naming malaman kung ano ang palagay mo sa mga diskarteng ito at kung alin ang mas gusto mo.
Kung mayroon kang anumang feedback, mangyaring makipag-ugnayan sa Edge DevTools team sa Twitter sa @EdgeDevTools, magkomento sa isyu na ito sa GitHub tungkol sa CSS Mirror Editing o gamitin ang Feedback tool na nakapaloob sa DevTools sa browser.
– Chris Heilmann, Principal Program Manager, Microsoft Edge
