Jadikan Microsoft Edge DevTools milik Anda 82567062173 Tidak banyak yang tidak dapat Anda lakukan dengan teknologi web saat ini. Platform web telah berevolusi sedemikian rupa sehingga beragam hal seperti elemen animasi, memutar atau merekam media, mengakses file atau penyimpanan, mencegat permintaan jaringan dan mengakses cache, membuat tata letak CSS yang rumit, atau menulis kode asli, semuanya dimungkinkan saat ini. Dengan banyaknya hal yang harus dipelajari dan digunakan, pengembang web memerlukan seperangkat alat lengkap yang dapat mereka andalkan. Untungnya, Microsoft Edge hadir dengan alat pengembangan yang memungkinkan pengembang web menjadi produktif dengan fitur web dan API. Apa pun yang Anda lakukan, kemungkinan besar ada alat khusus yang dapat membantu Anda. Namun, sisi sebaliknya adalah DevTools cenderung cukup rumit. Mereka berisi lebih dari 30 alat yang berbeda, dan antarmuka pengguna telah berkembang dari waktu ke waktu untuk mengakomodasi mereka. Terlebih lagi, fitur baru ditambahkan setiap saat sebagai tanggapan atas umpan balik yang kami terima dari pengguna. Dalam postingan ini, kami akan memperkenalkan fitur baru di Microsoft Edge DevTools yang membantu membuat alat lebih mudah didekati dan dipersonalisasi, sehingga Anda dapat mulai mengatasi tantangan memiliki begitu banyak alat berbeda yang Anda inginkan. Anda juga dapat mempelajari lebih lanjut tentang fitur ini dalam video di bawah. DevTools berkembang pesat di seluruh browser – untuk tetap up to date dengan yang terbaru di browser lain, lihat artikel saya di Majalah Smashing mencakup fitur DevTools baru di Microsoft Edge, Google Chrome, Mozilla Firefox, dan Safari. Membuka, menutup, dan memindahkan alat Meskipun DevTools memiliki sekitar 30 alat terpisah, kecil kemungkinannya Anda akan memerlukan akses ke lebih dari segelintir dari mereka pada saat yang sama—apalagi 30. Jadi, memiliki cara untuk membuka alat dengan mudah saat Anda membutuhkannya, dan menutupnya saat tidak diperlukan sangatlah penting. Pada saat yang sama, mungkin ada alat yang belum pernah Anda gunakan sebelumnya yang bisa sangat berguna. Jika itu ditutup secara default, Anda mungkin tidak akan pernah menemukannya sama sekali. Kami menambahkan tiga fitur DevTools yang kecil namun sangat kuat untuk mengatasi hal ini. Alat penutup Tab di Microsoft Edge DevTools sekarang memiliki tombol tutup yang dapat digunakan untuk menyembunyikan yang tidak Anda butuhkan lagi. Oleh karena itu, Anda dapat menjaga antarmuka pengguna yang bersih dan sederhana, dan hanya memiliki alat yang Anda butuhkan saat ini yang tersedia. Perhatikan bahwa beberapa alat tidak memiliki tombol tutup: Elemen, Konsol, dan Sumber. Alat-alat itu digunakan lebih dari yang lain. Pengembang web membutuhkannya setiap saat, dan menutupnya tidak masuk akal. Alat pembuka Sekarang ada tombol + (plus) di akhir bilah tab untuk membuka alat apa pun yang belum terbuka. Sebelumnya, untuk menemukan semua alat yang tersedia, Anda harus masuk ke menu utama (…), lalu pilih Alat lainnya, atau ketahui cara menggunakan menu perintah untuk mengakses alat dengan cepat. Tombol + membuat penemuan dan pengaksesan alat lain menjadi lebih mudah. Ada dua bilah tab di DevTools: satu di bagian atas, yang selalu terlihat dan merupakan tempat biasanya panel Elemen dan Sumber, dan satu di bagian bawah, Laci, yang dapat dialihkan dengan menekan Esc pada keyboard Anda. Konsol biasanya tinggal di laci. Kedua bilah tab ini memiliki tombol +, sehingga Anda dapat membuka alat baru di salah satu dari 2 lokasi ini. Alat pemindah Membuka laci dapat sangat berguna saat men-debug sesuatu yang memerlukan lebih dari satu alat pada saat yang bersamaan. Misalnya, Anda mungkin ingin panel Sumber dan Jaringan dibuka secara bersamaan untuk memastikan permintaan HTTP yang benar dikirim saat langkah men-debug beberapa kode JavaScript. Atau Anda mungkin ingin panel Elemen dan Tampilan 3D dibuka berdampingan untuk men-debug masalah indeks-z dengan sebuah elemen. Dengan Microsoft Edge DevTools, kini Anda dapat memindahkan alat antara area utama dan panel samping dengan membuka menu kontekstual (klik kanan) pada tab yang ingin Anda pindahkan dan pilih Pindahkan ke bawah atau Pindahkan ke atas. Perhatikan bahwa jika Anda memilih tombol + di laci dan memilih alat dari daftar yang sudah dibuka di area utama, maka alat ini akan dipindahkan ke laci. Ini adalah cara lain yang baik untuk memindahkan alat. Mempelajari alat, dari dalam alat Tombol + sangat bagus untuk menemukan alat baru dengan mudah yang mungkin belum pernah Anda gunakan sebelumnya. Namun terkadang, antarmuka pengguna dari sebuah alat bisa sangat membingungkan pada pandangan pertama. Ini membantu untuk memiliki beberapa dokumentasi yang tersedia. Dokumentasi Microsoft Edge DevTools dapat membantu Anda di sana, tetapi sering kali tidak ada di ujung jari Anda saat sedang mengerjakan tugas. Baru-baru ini, kami menambahkan fitur untuk membuat pembelajaran kontekstual tentang alat baru menjadi lebih mudah: DevTools Tooltips. DevTools Tooltips adalah hamparan yang mencakup alat dan menyediakan dokumentasi kontekstual tentang alat tersebut, dengan tautan untuk mempelajari lebih lanjut. Anda dapat mengaktifkan DevTools Tooltips dengan 3 cara berbeda: Buka tombol Sesuaikan dan kontrol DevTools (…) > Bantuan > Beralih Tooltips DevTools. Anda juga dapat menggunakan pintasan keyboard Ctrl+Shift+H (Cmd+Shift+H di Mac). Atau gunakan menu perintah, dan ketik”tooltips”Setelah diaktifkan, cukup gerakkan mouse Anda ke area yang disorot untuk menampilkan tooltip informasi tentang area spesifik dari alat ini (Anda juga dapat menggunakan tombol Tab untuk menavigasi melalui tooltips). Beberapa tooltips bahkan berisi tautan ke situs web dokumentasi untuk mengetahui lebih banyak lagi. Perhatikan bahwa Anda juga dapat membuka panel lain saat DevTools Tooltips aktif. Dengan cara ini, Anda dapat menavigasi DevTools dan terus belajar tentang hal-hal baru tanpa harus mengubah fitur mati dan hidup lagi setiap saat. Mengubah bahasa Kami tahu bahwa pengembang bisa lebih produktif jika alat mereka cocok dengan bahasa mereka preferensi penggunaan. Selain itu, produk pengembang Microsoft lainnya, termasuk VS Code, dapat digunakan dalam bahasa lain. Inilah sebabnya kami membuat DevTools tersedia dalam 11 bahasa yang berbeda. Secara default, DevTools cocok dengan bahasa yang Anda pilih untuk UI browser, tetapi Anda dapat menyetelnya secara independen ke salah satu bahasa lain ini. Inggris Jerman – Tionghoa Jerman (Sederhana) – (简体)（简体） Tionghoa (Tradisional) – (繁體)（繁體） Prancis – Français Spanyol – Español Portugis – Portugis Jepang – Italia – Italia Korea – Rusia – Pусский Untuk mengubah bahasa, navigasikan ke Pengaturan DevTools (menggunakan pintasan F1 atau mengeklik ikon roda gigi di bilah alat) dan pilih dari Bahasa daftar tarik-turun. Setelah memuat ulang DevTools, antarmuka penggunanya akan muncul dalam bahasa pilihan Anda, membuatnya lebih mudah menggunakan alat. Berikut tampilannya dalam bahasa Prancis: Ini juga berfungsi dengan baik dengan fitur DevTools Tooltips, karena dokumentasi kontekstual juga diterjemahkan, seperti yang ditunjukkan dalam bahasa Rusia di bawah ini. Sejak kami mengumumkan rilis eksperimental fitur DevTools yang dilokalkan pada tahun 2020, kami terus berkolaborasi dengan tim Lighthouse dan Chrome di Google melalui proyek Chromium, dan fitur tersebut sekarang tidak hanya tersedia untuk semua pengguna Microsoft Edge, b ut juga untuk siapa saja yang menggunakan DevTools di browser berbasis Chromium. Menyesuaikan tema warna Anda Jika Anda menggunakan Visual Studio Code (atau editor teks dan IDE lainnya dalam hal ini), Anda kemungkinan menyesuaikan tema warnanya menjadi sesuatu yang secara visual menyenangkan dan nyaman untuk digunakan dalam jangka waktu yang lama. Hingga saat ini, tema warna DevTools dapat hanya dapat disesuaikan dengan memilih antara tema gelap atau terang. Namun sekarang, ada 9 tema warna baru untuk dipilih. Ini sama dengan Visual Studio Code yang sudah diinstal sebelumnya dan oleh karena itu seharusnya sudah tidak asing lagi. Berikut seluruh daftar tema di Microsoft Edge DevTools sekarang: Tema yang ada: Light+ Dark+ Chromium Light Chromium Dark Tema baru: Cahaya Tenang Cahaya Solarized Dark Abyss Kimbie Dark Monokai Monokai Dimmed Red Tomorrow Night Blue Untuk memilih tema baru, Anda dapat membuka Setelan (ikon roda gigi di bilah alat ) dan gunakan tarik-turun Tema . Anda juga dapat menggunakan menu perintah dan mengetik”tema”untuk melihat seluruh daftar tema warna yang tersedia. Perhatikan bahwa jika Anda menggunakan Microsoft Edge Tools for VS Code, Anda mungkin pernah melihat bahwa DevTools tidak selalu ditampilkan dengan tema warna yang sama dengan antarmuka pengguna VS Code itu sendiri. Sekarang, berkat yang baru tema warna di DevTools, ini tidak akan terjadi lagi. Mulai Microsoft Edge 95, UI DevTools, yang disematkan di VS Code akan cocok dengan tema warna yang dipilih. Jika Anda tidak tahu tentang ekstensi ini, pelajari lebih lanjut di sini. Umpan Balik Umpan balik pengguna adalah cara kami mendorong prioritas untuk pekerjaan yang terjadi di Microsoft Edge DevTools. Jika Anda memiliki pertanyaan atau umpan balik tentang fitur ini atau lainnya, kirimkan beberapa kata dan tangkapan layar kepada kami menggunakan tombol masukan di DevTools. Jangan ragu untuk juga mengajukan pertanyaan kepada tim kami di Twitter dengan menyebutkan @EdgeDevTools akun. – Patrick Brosset, Manajer Program Senior, Microsoft Edge

Tidak banyak yang tidak dapat Anda lakukan dengan teknologi web saat ini. Platform web telah berkembang sedemikian rupa sehingga beragam hal seperti elemen animasi, memutar atau merekam media, mengakses file atau penyimpanan, mencegat permintaan jaringan, dan mengakses