ang Microsoft Edge DevTools
Wala kang magagawa sa mga teknolohiya sa web ngayon. Ang web platform ay nag-evolve nang husto kung kaya’t ang iba’t ibang bagay gaya ng mga elemento ng pag-animate, pag-play o pag-record ng media, pag-access sa mga file o storage, pag-intercept sa mga kahilingan sa network at pag-access sa cache, paggawa ng mga kumplikadong layout ng CSS, o pagsusulat ng native code ay posible na ngayon.
Sa napakaraming matututunan at gamitin, kailangan ng mga web developer ng kumpletong hanay ng mga tool na maaasahan nila.
Sa kabutihang palad, ang Microsoft Edge ay may kasamang mga tool sa pag-develop na ginagawang posible para sa mga web developer na maging produktibo sa mga web feature at API. Anuman ang iyong ginagawa, malamang na may nakalaang tool na makakatulong sa iyo.
Gayunpaman, ang flip side, ay ang DevTools ay medyo kumplikado. Naglalaman ang mga ito ng higit sa 30 iba’t ibang mga tool, at ang user interface ay lumago sa paglipas ng panahon upang mapaunlakan ang mga ito. Higit pa rito, ang mga bagong feature ay idinaragdag sa lahat ng oras bilang tugon sa feedback na natatanggap namin mula sa mga user.
Sa post na ito, ipapakilala namin sa iyo ang mga bagong feature sa Microsoft Edge DevTools na tumutulong sa paggawa ng mga tool mas madaling lapitan at personalizable, para masimulan mong harapin ang hamon ng pagkakaroon ng napakaraming iba’t ibang tool na iyong magagamit. Maaari ka ring matuto nang higit pa tungkol sa mga feature na ito sa video sa ibaba.
Ang DevTools ay mabilis na umuunlad sa mga browser – upang manatiling napapanahon sa pinakabago sa iba pang mga browser, tingnan ang aking artikulo sa Smashing Magazine sumasaklaw sa mga bagong feature ng DevTools sa Microsoft Edge, Google Chrome, Mozilla Firefox, at Safari.
Mga tool sa pagbubukas, pagsasara at paglipat
Habang may humigit-kumulang 30 magkahiwalay na tool ang DevTools, hindi malamang na kakailanganin mo ng access sa higit sa isang dakot ng mga ito nang sabay-sabay—pabayaan pa ang 30. Kaya ang pagkakaroon ng paraan upang madaling magbukas ng mga tool kapag kailangan mo ang mga ito, at isara ang mga ito kapag hindi mo ito kailangan.
Kasabay nito, maaaring may mga tool na hindi mo pa nagagamit noon na maaaring maging napaka-madaling gamitin. Kung sarado ang mga iyon bilang default, maaaring hindi mo na kailanman matuklasan ang mga ito.
Nagdagdag kami ng tatlong maliliit, ngunit napakalakas, na mga feature ng DevTools upang tugunan ito.
Mga tool sa pagsasara
Ang mga tab sa Microsoft Edge DevTools ay mayroon na ngayong close button na maaaring gamitin upang itago ang mga hindi mo na kailangan. Kaya’t maaari mong panatilihin ang isang malinis at simpleng user interface, at ang mga tool na kailangan mo lang ay magagamit kaagad.
Tandaan na ang ilang mga tool ay walang close button: Elements, Console at Sources. Ang mga tool na iyon ay ginagamit nang higit pa kaysa sa lahat ng iba pa. Kailangan ng mga web developer ang mga ito sa lahat ng oras, at ang pagsasara sa mga ito ay walang kabuluhan.
Mga tool sa pagbubukas
Mayroon na ngayong + (plus) na button sa dulo ng tab bar upang buksan ang anumang tool na hindi pa nagbubukas.
Dati, upang matuklasan ang lahat ng magagamit na tool, kailangan mong pumunta sa pangunahing menu (…), at pagkatapos ay piliin ang Higit pang mga tool, o alamin kung paano gamitin ang command menu upang mabilis na ma-access ang mga tool. Pinapadali ng button na + ang pagtuklas at pag-access sa iba pang mga tool.
Maaaring mayroong dalawang tab bar sa DevTools: isa sa itaas, na laging nakikita at kung saan karaniwang naroroon ang mga panel ng Elements at Sources, at isa sa ibaba, ang Drawer, na maaaring i-toggle sa pamamagitan ng pagpindot sa Esc sa iyong keyboard. Karaniwang nakatira ang Console sa drawer. Pareho sa mga tab bar na ito ang + button, kaya maaari kang magbukas ng mga bagong tool sa alinman sa 2 lokasyong ito.
Mga tool sa paglipat
Ang pagbukas ng drawer ay maaaring maging lubhang kapaki-pakinabang kapag nagde-debug ng isang bagay na nangangailangan ng higit sa isang tool sa parehong oras.
Halimbawa, maaaring gusto mong buksan nang sabay ang mga panel ng Mga Pinagmulan at Network upang matiyak na maipapadala ang mga tamang kahilingan sa HTTP kapag nagde-debug ng ilang JavaScript code. O baka gusto mong magkatabi ang Elements at 3D View na mga panel upang i-debug ang isang z-index na isyu sa isang elemento.
Sa Microsoft Edge DevTools, maaari mo na ngayong ilipat ang mga tool sa pagitan ng pangunahing lugar at ng drawer sa pamamagitan ng pagbubukas ng contextual menu (right-click) sa tab na gusto mong ilipat at piliin ang Ilipat sa ibaba o Ilipat sa itaas.
Tandaan na kung pipiliin mo ang + button sa drawer at pumili ng tool mula sa listahan na nabuksan na sa pangunahing lugar, pagkatapos ililipat ang tool na ito sa drawer. Ito ay isa pang magandang paraan ng paglipat ng mga tool.
Pag-aaral tungkol sa mga tool, mula sa loob ng mga tool
Ang + button ay mahusay para madaling makatuklas ng mga bagong tool na maaaring hindi mo pa nagamit noon. Ngunit kung minsan, ang user interface ng isang tool ay maaaring napakalaki sa unang tingin. Nakakatulong na magkaroon ng ilang dokumentasyong magagamit. Ang dokumentasyon ng Microsoft Edge DevTools ay makakatulong sa iyo doon, ngunit ay madalas na wala sa iyong mga kamay kapag nasa kalagitnaan ka ng gawain.
Kamakailan, nagdagdag kami ng tampok upang gawing mas madali ang pag-aaral sa konteksto tungkol sa isang bagong tool: Mga Tooltip ng DevTools. Ang DevTools Tooltips ay isang overlay na sumasaklaw sa mga tool at nagbibigay ng kontekstwal na dokumentasyon tungkol sa mga ito, na may mga link para matuto pa.
Maaari mong paganahin ang DevTools Tooltips sa 3 magkakaibang paraan:
Pumunta sa button na I-customize at kontrolin ang DevTools (…) > Tulong > I-toggle ang DevTools Tooltips. Maaari mo ring gamitin ang Ctrl+Shift+H keyboard shortcut (Cmd+Shift+H sa Mac). O gamitin ang command menu, at i-type ang “tooltips”.
Kapag pinagana, ilipat lang ang iyong mouse sa mga naka-highlight na lugar upang magpakita ng tooltip ng impormasyon tungkol sa partikular na bahaging ito ng mga tool (maaari mo ring gamitin ang Tab key upang mag-navigate sa mga tooltip). Ang ilan sa mga tooltip ay naglalaman pa ng mga link sa ang website ng dokumentasyon upang malaman ang higit pa.
Tandaan na maaari ka ring pumunta sa iba pang mga panel habang aktibo ang DevTools Tooltips. Sa ganitong paraan, maaari kang mag-navigate sa DevTools at patuloy na matuto tungkol sa mga bagong bagay nang hindi kinakailangang i-on ang tampok na off at on muli sa bawat oras.
Pagbabago ng wika
Alam namin na ang mga developer ay maaaring maging mas produktibo kapag ang kanilang mga tool ay tumutugma sa kanilang wika kagustuhan sa paggamit. Bilang karagdagan, ang iba pang mga produkto ng developer ng Microsoft, kabilang ang VS Code, ay maaaring gamitin sa ibang mga wika. Ito ang dahilan kung bakit ginawa naming available ang DevTools sa 11 iba’t ibang wika.
Bilang default, tumutugma ang DevTools sa wikang pipiliin mo para sa UI ng browser, ngunit maaari mong independiyenteng itakda ito sa alinman sa iba pang mga wikang ito.
Upang baguhin ang wika, mag-navigate sa Mga setting ng DevTools (gamit ang F1 shortcut o pag-click sa icon na gear sa toolbar) at pumili mula sa Wika dropdown na listahan.
Pagkatapos i-reload ang DevTools, lalabas ang user interface nito sa wikang gusto mo, na ginagawa ito mas madaling gamitin ang mga tool. Narito ang hitsura nito sa French:
Mahusay din itong gumagana sa tampok na DevTools Tooltips, dahil isinalin din ang dokumentasyong konteksto, tulad ng ipinapakita sa Russian sa ibaba.
Mula inanunsyo namin ang pang-eksperimentong paglabas ng na-localize na tampok na DevTools noong 2020, ipinagpatuloy namin ang pakikipagtulungan sa mga koponan ng Lighthouse at Chrome sa Google sa pamamagitan ng proyekto ng Chromium, at hindi lang available ang feature sa lahat ng gumagamit ng Microsoft Edge, b ut din sa sinumang gumagamit ng DevTools sa isang browser na nakabatay sa Chromium.
Pag-customize ng iyong tema ng kulay
Kung gumagamit ka ng Visual Studio Code (o iba pang mga text editor at IDE para sa bagay na iyon), ikaw malamang na na-customize ang tema ng kulay nito sa isang bagay na kasiya-siya sa paningin at kumportableng magtrabaho sa loob ng mahabang panahon.
Hanggang ngayon, ang tema ng kulay ng DevTools ay maaaring i-customize lamang sa pamamagitan ng pagpili sa pagitan ng madilim o maliwanag na mga tema nito. Gayunpaman, ngayon, mayroong 9 na bagong tema ng kulay na mapagpipilian. Ang mga ito ay kapareho ng mga Visual Studio Code na paunang naka-install at dapat samakatuwid ay pamilyar.
Narito ang buong listahan ng mga tema sa Microsoft Edge DevTools ngayon:
Mga kasalukuyang tema: Light+ Dark+ Chromium Light Chromium Dark Bagong tema: Quiet Light Solarized Light Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue
Upang pumili ng bagong tema, maaari kang pumunta sa Mga Setting (ang icon ng gear sa toolbar ) at gamitin ang Tema dropdown. Maaari mo ring gamitin ang command menu at i-type ang”tema”upang makita ang buong listahan ng mga available na tema ng kulay.
Tandaan na kung gagamitin mo ang Microsoft Edge Tools para sa VS Code extension, maaaring nakita mo na ang DevTools ay hindi palaging ipinapakita na may parehong kulay na tema gaya ng mismong user interface ng VS Code.
Ngayon, salamat sa bagong mga kulay na tema sa DevTools, hindi na ito mangyayari. Simula sa Microsoft Edge 95, ang DevTools UI, na naka-embed sa VS Code ay tutugma sa napiling tema ng kulay.
Kung hindi mo alam ang tungkol sa extension na ito, matuto pa tungkol dito.
Feedback
Ang feedback ng user ay kung paano namin hinihimok ang mga priyoridad para sa trabahong nangyayari sa Microsoft Edge DevTools. Kung mayroon kang anumang mga tanong o feedback tungkol sa mga feature na ito o sa iba pa, mangyaring magpadala sa amin ng ilang salita at screenshot gamit ang ang feedback button sa DevTools.
Huwag mag-atubiling magtanong din sa aming team sa Twitter sa pamamagitan ng pagbanggit sa @EdgeDevTools account.
– Patrick Brosset, Senior Program Manager, Microsoft Edge
