Sebagai pembangun web, kami menghabiskan banyak masa mengarang kod kami dalam persekitaran pengeditan. Kami kemudian melompat ke penyemak imbas untuk menggunakan alat pembangun terbina untuk nyahpepijat dan mengubah UI produk. Masalah dengan ini ialah hasil tweaking dan penyahpepijatan tidak ditunjukkan dalam kod sumber. Dalam Microsoft Edge, kami sedang mengusahakan beberapa penyelesaian yang terbuka untuk perbincangan, dan kami suka maklum balas anda tentang mereka
Jika anda lebih suka menonton video daripada membaca, di sini pengenalan tiga minit:
Masalah semasa dengan tweak dan perubahan dalam Alat Pembangun h2>
Hari ini, penyemak imbas DevTools menyediakan alat visual yang sangat canggih yang mengajar anda – contohnya – sintaks CSS semasa anda menggunakannya. Alat ini mengubah perkara secara visual. Contohnya, anda boleh mengklik ikon”Flexbox”di sebelah mana-mana sifat CSS flexbox dan anda mendapat pop timbul yang memberi anda pratonton hasil perubahan gaya tersebut.
Ini adalah pengalaman penyahpepijatan yang sangat baik dan menghalang anda daripada mencari sintaks CSS sepanjang masa. Walau bagaimanapun, terdapat pemutusan sambungan, kerana kod yang dipaparkan dalam aliran kerja penyahpepijatan ini bukanlah seperti yang anda tulis dalam editor kod anda.
Editor Styles berfungsi dengan hanya menunjukkan paparan separa kod untuk kod semasa elemen dipilih dalam penyemak imbas. Anda tidak tahu di mana dan bagaimana kod itu sesuai dengan seluruh CSS anda pada halaman web anda. Walaupun anda boleh menatal untuk melihat kod yang selebihnya, bukankah lebih baik untuk melihat kod asal juga Fail CSS?
Anda boleh mengaksesnya dengan mengklik pautan ke fail CSS itu sendiri, yang membawa anda ke Alat Sumber dan jauh daripada editor Gaya.
Yang ini ialah editor tertanam ke dalam alat pembangun penyemak imbas yang bagus apabila ia dikeluarkan tetapi tidak bersinar berbanding dengan apa yang kami harapkan daripada editor hari ini. Melainkan anda membuka dok alat dan menggunakannya dalam tetingkap sendiri, anda juga tidak mempunyai harta skrin yang mencukupi untuk pengalaman pengeditan yang mudah.
Sama ada anda menggunakan alatan visual untuk mengubah suai CSS anda atau editor Sumber, satu masalah kekal: sebaik sahaja anda berubah banyak perkara dan anda telah mencapai hasil yang diingini, bagaimana anda mendapatkan semula perubahan ini ke dalam kod sumber anda?
Tahukah anda bahawa terdapat alat Perubahan?
Alat Pembangun Penyemak Imbas mempunyai ciri yang membantu dengan ini dipanggil Perubahan yang tidak banyak digunakan dan sebahagian besarnya tidak diketahui. Anda boleh mengaksesnya daripada menu arahan atau menu konteks dan ia menunjukkan kepada anda pandangan berbeza bagi semua fail yang anda ubah dalam sesi ini. Anda boleh menggunakan alat ini untuk menyalin dan menampal semula perubahan pada fail sumber anda.
Firefox menggunakan pendekatan alat perubahan yang sedikit berbeza yang mengemas kini secara langsung dengan perubahan yang anda buat. Ia juga mencipta fail CSS untuk anda salin dan tampal yang mempunyai ulasan yang menerangkan fail mana untuk menampal semula perubahan ini dan perkara yang telah dialih keluar atau ditambahkan.
Walaupun ini merupakan langkah yang baik ke arah yang betul, ia memerlukan langkah tambahan untuk menyalin dan menampal kod kembali ke editor anda.
Aliran Ruang Kerja yang dipertingkatkan termasuk Kod Visual StudioRuang kerja dalam Alat Pembangun Chromium telah wujud sejak sekian lama tetapi tidak nampak banyak kegunaannya. Itulah sebabnya kami ingin menjadikannya lebih jelas bahawa anda boleh mempunyai penyegerakan langsung perubahan antara penyemak imbas DevTools dan editor kod. Kami juga menyedari bahawa editor dalam alat Sumber bukanlah apa yang orang mahu gunakan.
Bagaimana jika anda boleh mendapatkan kemudahan editor yang telah anda gunakan dan faedah perubahan langsung pada fail Workspaces?
Bermula dengan versi 96 Microsoft Edge, anda boleh menemui percubaan baharu dalam DevTools yang dipanggil “Fail sumber terbuka dalam Kod Visual Studio“.
Setelah anda menghidupkan yang ini dan memulakan semula alat pembangun, menavigasi ke fail pada pemacu keras anda atau alamat pelayan setempat seperti localhost atau 127.0.0.1 akan memberi anda gesaan yang meminta anda mengenal pasti folder akar fail ini. Anda juga boleh menarik diri untuk sesi atau tidak pernah melihat pilihan ini a keuntungan.
Sekali anda memilih folder, penyemak imbas meminta kebenaran anda untuk mendapatkan akses kepada folder itu – sama seperti yang anda perlu lakukan semasa menggunakan Workspaces dalam alat Sumber.
Apabila anda kini melakukan sebarang perubahan dalam anak tetingkap Gaya, fail berubah pada cakera. Perbezaannya ialah apabila anda mempunyai Kod Visual Studio sebagai editor anda pada komputer, mengklik pautan ke fail akan membukanya dalam editor ini dan bukannya dalam alat Sumber. Anda kekal dalam persekitaran yang biasa anda lakukan dengan semua penyesuaian dan sambungan yang anda tambahkan padanya.
Ini bagus kerana perubahan CSS anda kekal sekarang. Masalahnya ialah walaupun mereka mungkin terlalu mengganggu. Sebarang perubahan dalam alat Gaya seperti menukar saiz dengan satu unit akan menyebabkan fail pada cakera keras anda berubah. Jika anda menggunakan sebarang penyelesaian pelayan muat semula langsung atau skrip yang menonton folder dan mencetuskan proses binaan, ini boleh menjadi kucar-kacir dengan cepat.
Pengeditan cermin CSS
Dalam versi terkini Edge DevTools untuk sambungan Kod Visual Studio kami memperkenalkan cara berbeza untuk menutup gelung pengarangan/nyahpepijat yang dipanggil”Pengeditan Cermin CSS”. Jika anda mahu, anda boleh menonton pengenalan video 40 saat ini.
Jika anda mendayakan ciri ini, perubahan yang dibuat dalam alat Gaya juga mempengaruhi kod sumber, tetapi fail itu kekal tidak berubah sehingga anda menyimpannya dalam Kod Visual Studio. Anda mendapat manfaat daripada tidak kehilangan perubahan anda dan anda mengekalkan kawalan penuh ke atas fail pada cakera keras.
Jika anda menggunakan kawalan versi, anda boleh melihat semua perubahan yang anda buat sebagai paparan berbeza sebaik sahaja anda menyimpan fail. Ini memberi anda semua kemudahan aliran kerja Workspaces dengan lebih sedikit perubahan pada fail.
Apakah yang perlu kami lakukan untuk menjadikan pengalaman ini lebih baik?
Nampaknya kami mempunyai semua komponen yang betul dalam tempat untuk memberi pembangun dan pengalaman pengarangan dan penyahpepijatan dari hujung ke hujung. Kami ingin mengetahui pendapat anda tentang pendekatan ini dan yang mana satu yang anda suka.
Jika anda mempunyai sebarang maklum balas, sila hubungi pasukan Edge DevTools di Twitter di @EdgeDevTools, ulas pada isu ini di GitHub tentang Pengeditan Cermin CSS atau gunakan alat Maklum Balas yang terbina dalam DevTools dalam penyemak imbas.
– Chris Heilmann, Pengurus Program Utama, Microsoft Edge