Peningkatan pengalaman authoring dan debugging di Microsoft Edge DevTools dan Visual Studio Code 82567062173 Sebagai pengembang web, kami menghabiskan banyak waktu untuk membuat kode kami di lingkungan pengeditan. Kami kemudian melompat ke browser untuk menggunakan alat pengembang bawaan untuk men-debug dan mengubah UI produk. Masalahnya adalah hasil tweaking dan debugging tidak tercermin dalam kode sumber. Di Microsoft Edge, saat ini kami sedang mengerjakan beberapa solusi yang terbuka untuk diskusi, dan kami akan senang tanggapan Anda tentang mereka Jika Anda lebih suka menonton video daripada membaca, ini dia perkenalan tiga menit: Masalah saat ini dengan tweak dan perubahan di Alat Pengembang Hari ini, browser DevTools menyediakan alat visual yang sangat canggih yang mengajarkan Anda – misalnya – sintaks CSS saat Anda menggunakannya. Alat-alat ini mengubah banyak hal secara visual. Misalnya, Anda dapat mengklik ikon “Flexbox”di sebelah properti flexbox CSS mana pun dan Anda akan mendapatkan munculan yang memberikan pratinjau hasil perubahan gaya tersebut. Ini adalah pengalaman debug yang sangat baik dan mencegah Anda dari keharusan mencari sintaks CSS sepanjang waktu. Namun, ada pemutusan, karena kode yang ditampilkan dalam alur kerja debug ini bukan yang Anda tulis di editor kode Anda. Editor Gaya bekerja dengan hanya menampilkan sebagian tampilan kode untuk kode saat ini. elemen yang dipilih di browser. Anda tidak tahu di mana dan bagaimana kode itu cocok dengan sisa CSS Anda di halaman web Anda. Meskipun Anda dapat menggulir untuk melihat sisa kode, bukankah lebih baik juga melihat yang asli File CSS? Anda dapat mengaksesnya dengan mengeklik tautan ke file CSS itu sendiri, yang membawa Anda ke Alat Sumber dan menjauh dari editor Gaya. Yang ini editor tertanam ke dalam alat pengembang browser yang bagus ketika mereka keluar tetapi tidak bersinar dibandingkan dengan apa yang kita harapkan dari editor hari ini. Kecuali Anda melepas alat dan menggunakannya di jendela sendiri, Anda juga tidak memiliki cukup screen estate untuk pengalaman mengedit yang nyaman. Apakah Anda menggunakan alat visual untuk mengubah CSS Anda, atau editor Sumber, satu masalah tetap ada: setelah Anda banyak berubah banyak hal dan Anda sampai pada hasil yang diinginkan, bagaimana Anda mengembalikan perubahan ini ke kode sumber Anda? Tahukah Anda bahwa ada alat Perubahan? Alat Pengembang Peramban memiliki fitur yang membantu dengan ini disebut Perubahan yang tidak banyak digunakan dan sebagian besar tidak diketahui. Anda dapat mengaksesnya dari menu perintah atau menu konteks dan ini menunjukkan kepada Anda tampilan berbeda dari semua file yang Anda ubah dalam sesi ini. Anda dapat menggunakan alat ini untuk menyalin dan menempelkan kembali perubahan ke file sumber Anda. Firefox menggunakan pendekatan yang sedikit berbeda dari alat perubahan yang memperbarui langsung dengan perubahan yang Anda buat. Itu juga membuat file CSS untuk Anda salin dan tempel yang memiliki komentar yang menjelaskan file mana yang akan ditempelkan kembali perubahan ini dan apa yang dihapus atau ditambahkan. Meskipun ini adalah langkah yang baik ke arah yang benar, ini memerlukan langkah ekstra untuk menyalin dan menempelkan kode kembali ke editor Anda. Alur Ruang Kerja yang ditingkatkan termasuk Kode Visual StudioRuang kerja di Alat Pengembang Chromium telah ada sejak lama tetapi tidak banyak digunakan. Itu sebabnya kami ingin membuatnya lebih jelas bahwa Anda dapat melakukan sinkronisasi langsung perubahan antara browser DevTools dan editor kode. Kami juga menyadari bahwa editor di alat Sumber bukanlah yang ingin digunakan orang. Bagaimana jika Anda bisa mendapatkan kemudahan editor yang sudah Anda gunakan dan manfaat dari perubahan langsung pada file Workspaces? Mulai dengan Microsoft Edge versi 96, Anda dapat menemukan eksperimen baru di DevTools yang disebut “File sumber terbuka di Visual Studio Code“. Setelah Anda mengaktifkan yang ini dan memulai ulang alat pengembang, navigasikan ke file di hard drive Anda atau alamat server lokal seperti localhost atau 127.0.0.1 akan memberi Anda prompt yang meminta Anda untuk mengidentifikasi folder root dari file ini. Anda juga dapat memilih keluar untuk sesi atau tidak pernah melihat opsi ini a dapatkan. Sekali Anda memilih folder, browser meminta izin kepada Anda untuk mendapatkan akses ke folder itu – seperti yang Anda lakukan saat menggunakan Ruang Kerja di alat Sumber. Saat Anda melakukan perubahan apa pun di panel Gaya, file berubah pada disk. Perbedaannya adalah ketika Anda memiliki Visual Studio Code sebagai editor di komputer, mengklik tautan ke file akan membukanya di editor ini alih-alih yang ada di alat Sumber. Anda tetap berada di lingkungan yang biasa Anda gunakan dengan semua penyesuaian dan ekstensi yang Anda tambahkan ke dalamnya. Ini bagus karena perubahan CSS Anda sekarang bersifat permanen. Masalahnya adalah bahwa mereka mungkin terlalu mengganggu. Setiap perubahan pada alat Gaya seperti mengubah ukuran satu unit akan mengakibatkan file di hard drive Anda berubah. Jika Anda menggunakan solusi server pemuatan ulang langsung atau bahkan skrip yang mengawasi folder dan memicu proses pembuatan, ini bisa menjadi berantakan dengan cepat. Pengeditan cermin CSS Dalam versi terbaru dari Edge DevTools untuk ekstensi Kode Visual Studio kami memperkenalkan cara berbeda untuk menutup loop authoring/debugging yang disebut “CSS Mirror Editing”. Jika mau, Anda dapat menonton pengenalan video 40 detik ini. Jika Anda mengaktifkan fitur ini, perubahan yang dibuat di alat Gaya juga memengaruhi kode sumber, tetapi file tetap tidak berubah hingga Anda menyimpannya di Visual Studio Code. Anda mendapatkan keuntungan dari tidak kehilangan perubahan Anda dan Anda tetap memegang kendali penuh atas file di hard drive. Jika Anda menggunakan kontrol versi, Anda dapat melihat semua perubahan yang Anda buat sebagai tampilan berbeda setelah Anda menyimpan file. Ini memberi Anda semua kenyamanan alur kerja Workspaces dengan lebih sedikit perubahan pada file. Apa yang harus kami lakukan untuk membuat pengalaman ini lebih baik? Sepertinya kami memiliki semua komponen yang tepat di tempat untuk memberikan pengembang dan authoring end-to-end dan pengalaman debugging. Kami ingin mengetahui pendapat Anda tentang pendekatan ini dan pendekatan mana yang Anda sukai. Jika Anda memiliki masukan, hubungi tim Edge DevTools di Twitter di @EdgeDevTools, komentari masalah ini di GitHub tentang Pengeditan Cermin CSS atau gunakan alat Umpan Balik yang ada di dalam DevTools di browser. – Chris Heilmann, Manajer Program Utama, Microsoft Edge 82567062173 Sebagai pengembang web, kami menghabiskan banyak waktu untuk menulis kode kami di lingkungan pengeditan. Kami kemudian melompat ke browser untuk menggunakan alat pengembang bawaan untuk men-debug dan mengubah UI produk. Masalah dengan ini adalah bahwa hasil tweaking dan d