Saat kamu mengakses website dan menemukan error atau broken link sehingga tidak enak dilihat atau diakses, sebenarnya kamu bisa mengecek kendala atau masalah yang terjadi pada Console langsung dari Google Chrome. Di artikel ini, kamu akan mempelajari apa saja masalah website pada Console Google Chrome.
Penjelasan Console
Console pada Google Chrome sebenarnya dibuat untuk developer, agar mereka dapat dengan mudah mengecek kerusakan atau peringatan pada website.
Cara membuka Console:
Klik kanan pada konten di website, kemudian Inspect element (jika MacOS atau Linux) More tools -> Developer Tools (jika Windows).
Pilih Console.
Jika terjadi masalah, maka akan terlihat pada Console tersebut.
Masalah Website pada Console Google Chrome
MIME type
Refused to apply style from ‘https://www.dewiweb.net/wp-content/uploads/elementor/css/post-3765.css?ver=157234822’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Masalah ini terjadi pada file CSS di elementor, biasanya karena file-nya menggunakan permission 0600. Permission ini hanya mengizinkan pemilik untuk read dan write, pengunjung selain pemilik website tidak bisa membaca (read) file tersebut.
Akibatnya, tampilan website tidak sempurna karena ada CSS (Cascading Style Sheets) yang tidak terbaca. Solusinya yaitu dengan mengubah permission-nya menjadi 0644 agar isi website dapat dibaca oleh pengunjung atau publik juga.
CORS Policy
Access to XMLHttpRequest at ‘https://dewiweb.net/api/dashboard’ from origin ‘https://dashboard-dewiweb.test’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Masalah ini terletak pada CORS (Cross-Origin Resource Sharing) yang biasanya terjadi pada API. Website biasanya melakukan XMLHttpRequest ke server atau website tujuan namun tidak ada kendali akses yang diizinkan.
Hal ini menyebabkan website tidak dapat menarik data atau menyambungkan informasi ke API yang dituju. Solusinya adalah dengan menambahkan script di bawah ini pada .htaccess file website kamu.
Header set Access-Control-Allow-Origin “*”
ERR_Blocked_By_Client
GET https://googleads.g.doubleclick.net/pagead/id net::ERR_BLOCKED_BY_CLIENT
Masalah yang satu ini terjadi ketika website yang seharusnya memperoleh data atau informasi dari link tersebut terblokir dari sisi CLIENT. Kondisi ini terjadi pada user yang melakukan akses ke website tersebut, bukan masalah dari sisi website.
Hal ini biasanya terjadi karena pengunjung yang mengakses website menggunakan Extension AdGuard atau AdBlocker di Chrome atau browser lain. Website yang menggunakan ads bisa saja terblokir oleh extension tersebut.
Akibatnya, website yang dituju tidak dapat menampilkan iklan atau widgets karena diblokir oleh extension AdGuard atau AdBlock yang digunakan. Solusinya, matikan perlindungan AdGuard atau AdBlock pada website yang hendak dituju.
Simpulan
Itulah beberapa masalah website pada Console Google Chrome yang bisa kamu pelajari. Tools Console yang sediakan oleh Google ini bisa sangat berguna bagi developer dalam mengidentifikasi masalah yang terjadi pada website, karena error yang ditampilkan pada Console terlihat cukup jelas.
Demikian artikel ini, jangan sungkan untuk meninggalkan ide-ide topik yang ingin kamu baca di blog Dewaweb. Semoga artikel ini membantu!
