Mengaktifkan dan menggunakan DevTools di Microsoft Edge

Jika Anda mengembangkan aplikasi web, DevTools adalah pisau Swiss Army Anda.: memeriksa DOM dan gaya, men-debug JavaScript, mengukur kinerja, dan bahkan meniru perangkat seluler tanpa meninggalkan browser. Microsoft EdgeUtilitas ini terintegrasi sebagai Microsoft Edge DevTools dan memungkinkan alur kerja yang sangat tangkas untuk menemukan dan memperbaiki masalah dengan cepat.

Dalam panduan ini Anda langsung menuju ke hal yang penting:Cara membuka DevTools di Edge dengan pintasan dan menu, apa yang ditawarkan setiap tab, cara menyesuaikan antarmuka, Trik Alat jaringan dan konsol untuk mendeteksi kemacetan atau kesalahan, serta cara mengintegrasikannya dengan Visual Studio Code. Anda juga akan menemukan rekomendasi praktis untuk kinerja, aksesibilitas, dan pengujian responsif berdasarkan alur kerja dunia nyata.

Apa itu Edge DevTools dan mengapa Anda peduli?

Microsoft Edge DevTools adalah serangkaian alat pengembangan yang tertanam dalam peramban. yang muncul di samping halaman yang dimuat. Dari sana, Anda dapat memeriksa HTML/CSS, men-debug JavaScript dengan breakpoint, melihat lalu lintas jaringan, menganalisis memori dan kinerja, bahkan mengedit berkas dan menyinkronkannya ke sistem berkas saat menyiapkan ruang kerja.

Apa yang dapat Anda lakukan secara rutin:: Tinjau dan modifikasi gaya langsung, periksa tempat setiap sumber daya (.html, .css, .js, .png) disimpan dan dimuat, tiru perangkat dan kondisi jaringan, selidiki masalah aksesibilitas, kompatibilitas, dan keamanan, serta debug antarmuka pengguna dengan konsol interaktif yang menerima ekspresi dalam konteks saat ini.

Selain Edge, browser lain termasuk DevTools (Chrome, Firefox, Safari, dan Opera) dengan fungsi yang setara untuk inspeksi, konsol, jaringan, dan debugging. Pintasan umumnya sama: F12 atau Ctrl+Shift+I (Cmd+Option+I di macOS), lalu klik kanan pada elemen dan pilih "Inspect".

Untuk mempelajari lebih lanjut, menggabungkan dokumentasi resmi (Microsoft Learn, MDN Web Docs) dengan tutorial dan video. Anda akan menemukan panduan langkah demi langkah, contoh, dan detail lanjutan untuk menguasai setiap panel.

Cara membuka DevTools di Microsoft Edge

Ada beberapa cara cepat untuk membuka alat, dan yang Anda pilih dapat memengaruhi panel mana yang muncul lebih dulu. Berikut adalah pintasan paling berguna untuk penggunaan sehari-hari.

Metode utama untuk membuka: Klik kanan di mana saja pada halaman dan “Periksa” (membuka Elemen dengan simpul yang disorot), F12, atau Ctrl+Shift+I (Cmd+Option+I pada macOS) untuk membuka kembali alat yang terakhir digunakan atau layar Selamat Datang jika ini pertama kalinya Anda.

tindakan	Apa yang terbuka
Klik kanan > Periksa	Elemen dengan DOM diperluas pada node yang dipilih
Ctrl + Shift + I (atau Cmd+Option+I)	Alat terakhir yang digunakan atau layar selamat datang
F12	Alat terakhir yang digunakan atau layar selamat datang

Formulir tambahan yang sangat praktisDari menu Edge di bawah "Pengaturan & lainnya > Alat lainnya > Alat pengembang"; pintasan konsol langsung (Ctrl+Shift+J / Cmd+Option+J) atau pemilihan item (Ctrl+Shift+C / Cmd+Option+C). Shift+F10 membuka menu konteks keyboard dan memungkinkan Anda memilih Periksa.

tindakan	Panel yang akan Anda lihat
Menu Edge > Alat Lainnya > Alat Pengembang	Alat terakhir yang digunakan atau diterima
Ctrl + Shift + J (Cmd+Opsi+J)	Konsol
Ctrl + Shift + C (Cmd+Opsi+C)	Elemen dengan fokus pada
Shift + F10 dan pilih “Periksa”	Elemen dengan pohon yang diperluas

Pintasan yang mempercepat alur AndaF12 membuka/menutup DevTools, Ctrl+R memuat ulang sambil tetap menampilkannya, dan Ctrl+Shift+C mengaktifkan pemilih elemen. Ingat, Anda dapat menavigasi dengan Tab untuk memfokuskan halaman, lalu membuka menu konteks dengan Shift+F10.

Buat DevTools terbuka secara otomatis di setiap tab:Edge diluncurkan dengan merek --auto-open-devtools-for-tabs. Misalnya dalam Windows: start msedge --auto-open-devtools-for-tabs; di PowerShell: Start-Process -FilePath msedge -ArgumentList --auto-open-devtools-for-tabs; di macOS: /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs; di Linux: microsoft-edge --auto-open-devtools-for-tabs.

Penting dengan boot- Jika Anda mengaktifkan optimasi startup, nonaktifkan di edge://settings/system agar pintasan berfungsi; Anda juga dapat menonaktifkan F12 agar tidak membuka DevTools di bagian yang sama jika Anda tidak ingin pintasan tersebut berfungsi.

Antarmuka, tata letak, dan penyesuaian

• UI DevTools dibagi menjadi dua area utamaBilah aktivitas (atas atau kiri) dan panel Quick Look (bawah, dengan Esc). Bilah aktivitas memusatkan akses ke alat, pengaturan, dan dokumentasi; Quick Look memungkinkan Anda membuka alat kedua secara paralel.
• Anda dapat memasang DevTools di sebelah kanan, kiri, atau bawah, atau membukanya di jendela terpisah. Ubah lokasi dari menu “Kustomisasi dan Kontrol DevTools”, atau dengan perintahBilah aktivitas dapat berada di atas (horizontal), di sebelah kiri (vertikal), atau secara otomatis beradaptasi dengan dok.
• Zoom independen untuk DevTools dan halaman: Pastikan Anda fokus pada area yang diinginkan dan gunakan Ctrl + / – (cmd di macOS) untuk memperbesar/memperkecil, atau Ctrl+0 untuk mengatur ulang. Dari menu perintah, cari "zoom" untuk melakukan "Zoom In", "Zoom Out", atau "Reset Zoom Level".
• Alat yang disematkan dan dapat diurutkan ulangElemen, Konsol, dan Sumber sudah tetap, tetapi Anda dapat menambahkan sisanya dari "Alat Lainnya". Jika Anda kekurangan ruang, beberapa dikelompokkan di bawah menu tersebut. Klik kanan pada tab untuk menghapusnya atau memindahkannya ke Tampilan Cepat, dan sebaliknya.

PR	Bagaimana melakukannya?
Buka alat di bilah aktivitas	“Alat lainnya” di bilah aktivitas dan pilih yang diinginkan
Buka alat di Quick Look	Tekan Esc, “Alat Lainnya” di bilah bawah dan pilih alat
Berpindah antara bilah atas dan Tampilan Cepat	Klik kanan pada tab alat dan pilih pindah ke atas/bawah
Panggil panel mana pun berdasarkan nama	Ctrl+Shift+P (Cmd+Shift+P) dan ketik “Tampilkan "

Menu perintah adalah pintasan universal Anda (Ctrl+Shift+P): Menampilkan atau menyembunyikan panel, menjalankan tindakan, dan mengubah pengaturan tanpa menavigasi menu. Gunakan, misalnya, untuk membuka "Perubahan" saat mengubah CSS di Elemen.

Penyesuaian dan eksperimenDi Pengaturan (F1), ubah tema, bahasa, pintasan (ada preset bergaya Visual Studio Code), profil jaringan terbatas, lokasi tiruan, dan perangkat. Di Eksperimen, aktifkan fitur pratinjau, dan jika Anda menginginkan fitur terbaru, instal Edge Canary.

Alat utama dan kasus penggunaan di dunia nyata

• Elemen: Inspeksi dengan superposisi model kotakAktifkan tombol inspeksi untuk mengarahkan kursor ke halaman dan melihat dimensi, padding, dan margin beserta warnanya. Edit HTML dan CSS dengan cepat, terapkan status :hover/:active/:focus, dan deteksi konflik pewarisan atau spesifisitas.
• Editor CSS dengan utilitas tambahanAktifkan/nonaktifkan deklarasi dengan kotak centang, tampilkan properti singkat untuk melihat komponennya, tambahkan aturan baru, dan lompat ke berkas/baris sumber. Di tab terkait, Anda akan menemukan "Dihitung", "Tata Letak/Model Kotak/Kisi", dan "Sumber" (tergantung peramban) untuk melihat nilai dan geometri akhir.
• Konsol: eksekusi dan diagnosis segeraFilter pesan, evaluasi ekspresi secara real-time, dan gabungkan dengan debugger untuk memeriksa status saat kode dijeda. Tombol seperti "jeda pada pengecualian" akan memandu Anda ke baris yang bermasalah; kontrol langkah demi langkah akan membantu Anda memahami alurnya.
• Debugger/Sumber: Titik Henti dan Kode yang Dapat DibacaTetapkan breakpoint, pantau variabel, periksa Call Stack dan Cakupan. Jika kode diperkecil, gunakan ikon kurung kurawal. {} untuk “mempercantiknya” dan mengubahnya menjadi pohon yang dapat dinavigasi.
• Jaringan: Sinar-X permintaan dan kinerjaBuka tab Jaringan, muat ulang, dan tinjau kolom-kolom penting: Ukuran (mengoptimalkan gambar dan mengecilkan CSS/JS), Waktu (server dan jarak memengaruhi hal ini), dan Kaskade (urutan dan durasi pemuatan). Klik kanan untuk menyesuaikan kolom, dan di bagian bawah, centang "Selesai" untuk melihat totalnya.
• Tips kinerja praktisUkur terlebih dahulu di perangkat seluler tanpa caching dan targetkan tolok ukur yang wajar, yaitu 2 hingga 4 detik; di desktop, ulangi keduanya, baik tanpa maupun dengan caching. Minimalkan CSS/JS untuk mengurangi jumlah permintaan, dan kelompokkan setiap jenis ke dalam satu berkas jika memungkinkan untuk mengurangi jumlah permintaan (alat seperti Closure Compiler dapat membantu).
• Performa dan MemoriProfil log untuk menemukan hambatan, tata letak yang mahal, dan tugas yang memakan waktu. Situs yang lebih cepat akan mempertahankan pengguna, meningkatkan kinerja, dan meningkatkan produktivitas. SEO dan biasanya konversinya lebih baik. Di Memori, ia menemukan kebocoran dan objek yang seharusnya tidak dibiarkan hidup.
• Aplikasi dan penyimpanan: Memeriksa dan mengedit cookie, localStorage, IndexedDB, dan cache. Berguna untuk men-debug sesi, flag, atau kebijakan persistensi.
• Emulasi perangkat dan jaringan: Beralih ke mode seluler, sesuaikan tampilan dan DPI, dan simulasikan kehilangan 3G/4G atau konektivitas. Uji UX realistis tanpa meninggalkan desktop Anda.
• Men-debug kasus dengan konsol dan debugger: Jeda, picu kesalahan, dan Edge akan memandu Anda ke baris yang tepat. Gunakan tombol "langkah" untuk mengikuti alur dan mengoreksi variabel dari konsol untuk langsung memvalidasi solusi.
• Memeriksa Iklan dengan DevTools: di Filter Jaringan berdasarkan ads? untuk melihat apakah halaman Anda mengeluarkan permintaan. 403 biasanya menunjukkan kebijakan atau situs yang tidak disetujui; 200 tanpa tampilan menunjukkan masalah keamanan. ads.txt. Jika kamu melihat ERR_BLOCKED_BY_CLIENT, mungkin ada pemblokir yang mencegah pengunduhan adsbygoogle.jsKesalahan validasi yang umum mencakup pesan seperti: adsbygoogle.push() error: Fluid responsive ads must be at least 250px wide: availableWidth=0.
• Pintasan dan menu di browser lainDi Firefox, Inspector/Debugger/Console berada di bawah "Web Developer"; di Safari, aktifkan menu Develop dari Preferences > Advanced. Filosofi penggunaannya mirip dengan Edge dan Chrome.
• Berita dengan IA di chromeFitur "Insight Konsol" menjelaskan kesalahan konsol, menyarankan penyebab, dan kemungkinan solusi. Fitur ini diaktifkan di Pengaturan > "Inovasi AI" dan memerlukan peramban berbahasa Inggris, berusia di atas 18 tahun, dan sesi aktif. Google dengan sinkronisasi. Edge memiliki alat serupa untuk menjelaskan pesan, dan implikasi privasinya patut ditinjau: beberapa data browser dan situs mungkin digunakan untuk meningkatkan model; Anda memiliki kendali atas opsi ini.

Catatan tentang pemberitahuan privasiPlatform seperti Reddit menampilkan banner kebijakan dan cookie yang dapat memengaruhi pemuatan skrip atau sumber daya hingga Anda menyetujuinya. Jika ada yang tidak berfungsi dalam pengujian Anda, periksa apakah persetujuan memblokir permintaan.

Edge DevTools di dalam Visual Studio Code

Ekstensi “Microsoft Edge Tools” mengintegrasikan DevTools ke dalam VS Code dengan peramban tertanam (Edge DevTools: Browser) dan tab alat (Elemen, Konsol, dll.). Anda dapat membuka halaman lokal, meluncurkan instans tanpa perlu men-debug, atau memulai proyek dengan konfigurasi.

• Opsi langsung untuk file HTML:Di VS Code Explorer, klik kanan pada .html dan pilih "Buka dengan Edge > Buka peramban dengan DevTools." Anda akan melihat DevTools dalam mode debug di samping halaman yang ditampilkan dan bilah dengan kontrol umum (jeda, langkah, mulai ulang).
• Mulai instans (tanpa debugging)- Buka tampilan "Microsoft Edge Tools" di bilah aktivitas dan ketuk "Luncurkan Instans". Edge DevTools dan Edge DevTools: Peramban akan terbuka, menampilkan halaman beranda. Di bilah alamat peramban tertanam, tempel jalur atau URL lokal (misalnya, http://localhost:8080).
• Mulai proyek (dengan launch.json):Jika folder Anda memerlukan server, buat file peluncuran dengan “Hasilkan launch.json” dan edit kunci “url” dengan alamat Anda (misalnya http://127.0.0.1:8080). Simpan dan gunakan "Mulai Proyek" untuk membuka aplikasi secara langsung dengan DevTools yang tertanam.
• Pemetaan file dan pengeditan cermin CSSKetika DevTools dapat memetakan sumber daya yang diunduh ke folder terbuka Anda, perubahan CSS di Elemen akan tercermin dalam berkas sumber lokal. Jika tidak ada folder yang cocok atau tidak ada kepercayaan yang diberikan, hapus centang pada kotak Edit Cermin untuk bereksperimen tanpa kesalahan, atau buka folder yang benar dan tandai sebagai aman.
• Perbedaan antara URL dan jalur fileDengan jalur lokal, editor langsung tahu di mana harus menulis; dengan URL jarak jauh, Anda perlu membuka folder yang berisi sumber yang setara untuk mengaktifkan mirror. Jika tidak, Anda dapat memeriksa dan mengedit "langsung", tetapi tanpa perlu melanjutkan.
• Tutup instance ketika Anda sudah selesaiDari tab (ikon "x"), dari bagian "Target" di ekstensi, atau dengan menghentikan proses debug jika aktif. Anda juga dapat menutup folder atau jendela VS Code untuk mengakhiri semua sesi.
• Sesuatu yang layak diingat:Tab “Edge DevTools: Browser” mencakup bilah emulasi perangkatnya sendiri, berguna untuk melihat status seluler tanpa meninggalkan VS Code, dan Anda dapat membuka file (seperti .js) dari Explorer saat melakukan debug untuk melakukan koreksi dengan cepat.
• Semua hal di atas memberi Anda alur kerja yang solidBuka, periksa, ukur, debug, dan sesuaikan antarmuka dengan cepat sesuai keinginan Anda. Jika Anda juga terintegrasi dengan VS Code, Anda dapat mengulanginya dengan pengeditan dan pemetaan lokal. Dan jika Anda bekerja dengan iklan atau API, tab Jaringan dan Konsol akan memberi Anda lokasi pasti setiap masalah.