Bagaimana Cara Melihat Kode Sumber Situs Web di Microsoft Edge?

Diterbitkan: 2021-09-20

Di Windows 11, Microsoft akhirnya menyingkirkan browser Internet Explorer mereka yang terkenal dan ikonik. Anda hanya akan memiliki Edge yang didasarkan pada basis kode Chromium Google. Oleh karena itu, Anda akan merasakan browser Edge mirip dengan Google Chrome dalam banyak hal. Saat Anda ingin menganalisis kode sumber halaman web, Anda dapat melakukannya dengan mudah di Edge tanpa mencari Chrome atau Firefox. Pada artikel ini, kami akan menjelaskan cara melihat kode sumber situs web seperti HTML, CSS, dan JavaScript di browser Microsoft Edge.

Lihat Sumber di Chrome

Lihat Sumber di Safari

Kode Sumber Situs Web

Umumnya, halaman web ditulis dalam HTML dan menggunakan berbagai jenis file seperti CSS, JavaScript, gambar, video, dll. Browser seperti Edge akan memproses HTML / CSS / JavaScript ini dan hanya menampilkan teks dan konten media yang dapat dibaca kepada pembaca. Namun, dalam banyak situasi Anda mungkin perlu menganalisis kode sumber untuk mendapatkan detail lebih lanjut.

Anda adalah seorang pengembang atau blogger dan ingin memeriksa kode sumber untuk tujuan pemecahan masalah.
Halaman web yang Anda lihat menarik dan Anda ingin menemukan warna dan font yang digunakan pada halaman tersebut.
Anda ingin mengedit sumber dan menguji hasilnya di browser langsung tanpa benar-benar mengubah kode aslinya. Misalnya, Anda ingin menerapkan warna berbeda pada judul atau memeriksa ukuran font.
Uji respons seluler halaman atau temukan elemen yang dimuat di halaman.

Dalam beberapa kasus, Anda juga dapat menemukan tema dan plugin yang digunakan di situs dengan melihat kode sumbernya. Apa pun alasannya, Anda dapat menganalisis kode sumber dengan dua cara.

Dengan langsung melihat kode sumber lengkap
Menggunakan opsi Inspeksi elemen dengan Microsoft Edge DevTools

Mari kita jelaskan kedua metode secara rinci.

Melihat Kode Sumber Lengkap

Katakanlah, Anda ingin menemukan file CSS dan JS yang digunakan pada halaman. Anda dapat melakukannya dengan mudah dengan melihat kode sumber lengkap. Buka halaman di Edge, klik kanan pada area kosong mana pun dan pilih "Lihat sumber halaman" dari menu konteks.

Ini akan membuka halaman baru yang menunjukkan kode sumber lengkap dari halaman yang Anda lihat seperti di bawah ini.

Anda dapat menemukan kode HTML dari setiap elemen, file CSS yang ditautkan antara bagian <head> dan </head>, tag meta, skrip yang ditautkan sebelum tag body penutup </body>. Meskipun ini akan berguna dalam banyak situasi, Anda tidak akan menemukan detail gaya CSS mana yang diterapkan ke elemen HTML mana pada halaman. Misalnya, Anda tidak dapat menemukan keluarga font dari elemen judul dengan melihat kode sumber yang lengkap. Anda harus mengklik tautan file .css atau .min.css dan mencari di file tersebut untuk menemukan gaya yang digunakan untuk heading. Ini adalah tugas yang sulit karena Anda tidak tahu judul yang dimiliki tag heading HTML dari H1 hingga H6. Selain itu, mungkin ada kelas CSS khusus yang diterapkan untuk tag judul yang tidak dapat Anda temukan dengan mencari CSS secara mandiri.

Saat ini, banyak situs web menggabungkan semua file CSS untuk mengurangi jumlah permintaan HTTP dan meningkatkan caching. Dengan demikian, melihat kode sumber yang lengkap tidak akan membantu ketika file CSS halaman digabungkan sebagai satu file. Solusinya adalah dengan melihat HTML elemen dan CSS secara bersamaan sehingga akan memberi Anda gambaran lengkap tentang elemen spesifik tersebut.

Periksa Opsi Elemen di Edge

Anda dapat menganalisis elemen apa pun di halaman web untuk mendapatkan HTML dan CSS-nya menggunakan opsi ini. Untuk menggunakan ini, luncurkan browser Edge dan buka halaman web yang ingin Anda analisis. Anda harus membuka Microsoft Edge DevTools (atau Edge Developer Tools) untuk mulai menganalisis elemen di halaman web. Ada beberapa cara untuk membuka Edge DevTools.

Cukup, klik kanan pada area kosong mana pun dan pilih "Periksa" dari menu konteks.
Anda dapat menekan F11 di Windows yang akan berfungsi di sebagian besar model desktop dan laptop. Atau, tekan tombol "Control + Shift + I" untuk membuka bagian alat pengembang Edge.
Tekan "Alt + F" untuk membuka menu dan pergi ke "Alat lainnya> Alat pengembang".

Buka Alat Pengembang dari Pengaturan Tepi

Secara default, Edge akan membuka bagian alat pengembang di bagian bawah browser seperti yang ditunjukkan di bawah ini.

Anda dapat menyesuaikan ketinggian dengan menyeret dan mengklik ikon horizontal tiga titik pada bilah menu alat pengembang untuk mengubah posisi ke atas/bawah atau membukanya di jendela baru.

Meskipun DevTools memiliki banyak item menu, Anda hanya perlu menggunakannya sedikit untuk menganalisis kode sumber situs web di Edge. Akan ada tab "Selamat Datang" ketika Anda pertama kali membuka DevTools yang dapat Anda tutup dengan mudah.

Melihat Sumber HTML dan Kode CSS

Seperti disebutkan, setiap elemen di halaman web berisi kode HTML sumber dengan gaya CSS. Untuk melihat HTML dan CSS sumber, Anda harus memilih elemen.

Ikon pertama di menu DevTools adalah alat pemilihan elemen.
Klik pada ikon dan arahkan kursor ke elemen yang ingin Anda temukan HTML sumbernya. Misalnya, mari kita temukan detail untuk judul yang bertuliskan, “Layanan Premium Kami”.

Saat mengarahkan kursor ke elemen heading itu, Edge akan menampilkan pop-up mengambang dengan sebagian besar detail yang diperlukan. Anda dapat menemukan judulnya adalah h3, ukuran font 26px, menggunakan keluarga font sebagai Museo500Regular dan warna #0875c9. Anda juga dapat mengklik elemen yang ditampilkan di bawah tab "Elemen" dan melihat detail CSS serupa di bawah bagian "Gaya" di panel kanan. Menggunakan alat elemen pilih, Anda bisa mendapatkan detail lengkap HTML dan CSS untuk elemen apa pun.

Di bawah bagian "Gaya", Anda dapat melihat tautan file CSS untuk setiap gaya. Anda dapat mengklik tautan file untuk membukanya di bawah tab "Sumber" yang akan kami jelaskan di bagian bawah.

Pengeditan Langsung Konten Halaman Web

Sekarang Anda ingin menerapkan beberapa perubahan pada judul dan melihat tampilannya di situs langsung. Untuk melakukan ini, Anda harus masuk ke panel administrator situs web Anda dan memperbarui konten sumber. Namun, Anda akan mengalami masalah seperti memvisualisasikan elemen dengan warna atau ukuran font yang berbeda. Cara mudah adalah mengedit HTML sumber di bawah bagian "Elemen" atau gaya CSS di bawah bagian "Gaya".

Untuk mengedit HTML, pertama-tama pilih elemen di bawah tab "Elemen" dan klik kanan padanya. Atau Anda dapat mengklik ikon tiga titik yang muncul di bagian paling kiri dari elemen yang dipilih. Anda cukup menghapus atau menyembunyikan elemen dengan memilih opsi itu dari menu konteks. Jika ingin mengedit, pilih opsi “Edit as HTML”.

Ini akan membuka edit teks dan Anda dapat mengubah tag HTML di editor atau menambahkan kelas CSS tambahan ke elemen. Setelah mengedit, klik area kosong di DevTools untuk keluar dari pengeditan. Editor akan secara otomatis memvalidasi dan memperbaiki tag. Misalnya, jika Anda mengubah tag awal sebagai <h4> dan lupa mengganti tag akhir dan dibiarkan sebagai </h3>, maka secara otomatis akan berubah kembali ke tag <h3>…</h3> asli.

Demikian pula, Anda dapat mengubah gaya CSS di bawah tab "Gaya". Misalnya, tingkatkan font heading h3 menjadi 40px dan ubah warnanya menjadi #c94608.

Anda dapat melihat pratinjau instan di halaman untuk memberi Anda gambaran tentang bagaimana tampilannya dengan CSS dan HTML yang dimodifikasi. Namun, perubahan tersebut bersifat sementara dan menyegarkan atau memuat ulang halaman akan mengembalikan konten aslinya. Anda dapat melakukan perubahan di backend untuk menerapkannya secara permanen di halaman web.

Pemecahan Masalah Kesalahan Halaman Web

Salah satu tujuan utama DevTools adalah menemukan masalah browser yang mencegah halaman ditampilkan dengan benar. Seperti yang Anda lihat di tangkapan layar di atas, Edge menunjukkan dua angka (34 dan 33) di bilah menu DevTools.

Ikon angka pertama menunjukkan kesalahan dan peringatan konsol browser yang dapat Anda lihat di bawah tab "Konsol".
Nomor kedua akan menunjukkan kepada Anda masalah yang terbuka jika ada di jendela terpisah di dalam DevTools yang dapat Anda tutup sendiri.

Kesalahan, peringatan, dan tip ditampilkan dengan label untuk membantu Anda memahami masalahnya. Klik setiap item untuk mendapatkan detail selengkapnya tentang masalah dan sumber daya yang terpengaruh di halaman Anda. Anda harus mengubah kode dan menguji ulang lagi untuk memeriksa apakah kesalahan telah diperbaiki.

Lihat File Sumber Secara Independen

Tab "Sumber" di Edge DevTools adalah sesuatu yang mirip dengan melihat kode sumber lengkap. Namun, ini menunjukkan sumber daya yang dimuat dari setiap bagian domain dan dari domain eksternal secara terpisah dalam suatu struktur. Anda dapat memilih file apa saja dan melihat pratinjau konten di dalam DevTools.

Saat Anda memilih file yang diperkecil, Edge akan meminta Anda dengan pertanyaan "Cetak cantik file yang diperkecil ini?". Minifikasi akan menghapus semua spasi dan jeda baris dalam file dan membuatnya tidak dapat dibaca oleh pengguna. Anda dapat menggunakan pencetakan cantik untuk mengonversi file yang diperkecil ke mode yang dapat dibaca dengan jeda baris dan spasi. Anda dapat mengeklik tombol “Cetak Cantik” atau mengeklik {} yang ditampilkan di bilah status.

Semua item lain seperti Jaringan, Performa, dll. berguna untuk analisis lanjutan waktu pemuatan halaman, memeriksa header HTTP, menemukan masalah keamanan, dan menguji skor performa SEO. Anda dapat menutup DevTools setelah Anda selesai menganalisis.

Kata-kata Terakhir

Versi Edge Chromium terbaru lebih kuat daripada browser lainnya. Anda dapat menggunakan Microsoft Edge DevTools untuk melihat kode sumber halaman web untuk tujuan pemecahan masalah dan perancangan. Dimungkinkan juga untuk mendapatkan kode sumber lengkap tampilan file yang digunakan pada halaman.