Close Menu
  • Pengaturcaraan
    • Laravel
    • UI/UX
    • SEO
  • Teknologi
    • Mata Wang Kripto
  • Filem & Siri
  • Motivasi
    • Agama
    • Kata Inspirasi
    • Viral
  • How to?
Mencari
Facebook X (Twitter) Instagram
Azmir Shah
  • Pengaturcaraan
    1. Laravel
    2. UI/UX
    3. SEO
    4. View All

    Apa itu Laravel? Adakah ia lebih baik berbanding Core PHP?

    24/04/2019

    4 laman web yang memberi inspirasi UIUX

    28/02/2021

    4 aplikasi rekaan UI/UX yang menjadi kegemaran saya

    25/06/2019

    Perbezaan wireframe, mockup dan prototaip untuk UI/UX

    18/06/2019

    Panduan On-page SEO yang semua orang wajib tahu!

    08/02/2021

    Apa itu SEO? Kenapa ia penting kepada laman web?

    10/10/2020

    LT Browser: Menguji reka bentuk responsif laman web anda secara offline

    22/02/2022

    Bagaimana cara debug ghost CSS secara manual

    15/02/2022

    Beza camel, snake, kebab dan pascal case dalam penulisan kod

    12/02/2020
  • Teknologi
    1. Mata Wang Kripto
    2. View All

    Cara beli token di Pancakeswap

    08/01/2022

    11 tip trade kripto untuk golongan pemula

    05/10/2021

    Panduan menjual mata wang kripto di Binance P2P Malaysia?

    10/06/2021

    5 platform jual beli Bitcoin di Malaysia untuk pemula

    21/02/2021

    Apa itu digital nomad? Adakah ia bakal menjadi trend di Malaysia?

    02/05/2023

    Tiktok memintas Google sebagai laman web paling popular

    02/01/2022

    Keburukan ekonomi gig kepada gigger

    18/01/2021

    Apa itu ekonomi gig? Adakah Malaysia terkesan?

    09/12/2019
  • Filem & Siri

    Idiocracy (2006): Filem bodoh yang buat anda berfikir sejenak

    7.0 01/01/2022

    Ulasan Love Destiny (2018), Drama Thai yang anda patut tonton

    7.3 24/09/2021

    7 Drama Korea terbaik lakonan Lee Jong-Suk

    06/02/2021

    Tonton movie online secara percuma dengan Streamio

    17/01/2021

    7 filem manusia genius terbaik sepanjang zaman

    16/12/2019
  • Motivasi
    1. Agama
    2. Kata Inspirasi
    3. Viral
    4. View All

    Panduan melaksanakan solat jenazah dengan sempurna

    22/01/2017

    Peranan Yang Dimainkan Si Ayah Mempengaruhi Tingkah Laku Anak-Anak

    22/12/2015

    Pengisian Kuliah Ustaz Azhar Idrus Di Surau Al-Iman

    13/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 3

    12/11/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 2

    29/10/2015

    Koleksi Kata Inspirasi Daripada Tokoh Dunia Bahagian 1

    22/10/2015

    Kisah Katak : Apa Beza Diri Anda Dan Katak Ini?

    20/12/2015

    Kisah Penjual Tempe Yang Penuh Dengan Pengajaran

    27/11/2015

    Cerita Rakyat Daripada Jepun Ini Sarat Dengan Pengajaran

    23/10/2015

    Mesej Seorang Bapa Kepada Anaknya Ini Pasti Membuatkan Anda Tersentuh

    15/10/2015

    Jangan fokus kepada matlamat dan kongsikannya dengan sesiapa

    28/03/2019

    Kenapa perlu terima diri kita seadanya sebelum berubah?

    17/01/2016

    7 Perbezaan M40 dan T20 Yang Anda perlu Tahu

    16/01/2016

    7 Tabiat Yang Mampu Meningkatkan Produktiviti Kerja Anda

    14/01/2016
  • How to?

    Cara tukar kad Maybank expired secara online

    21/04/2023

    Cara hantar Whatsapp tanpa save nombor seseorang

    17/10/2022

    Cara install aplikasi Disney+ Hotstar di Samsung TV Malaysia

    08/02/2022

    Cara menyelesaikan masalah “card information is invalid” di Samsung Pay

    12/06/2021

    Terlupa judul lagu? Ini cara cari lagu dengan bersenandung

    23/02/2021
Azmir Shah
ghost css, debug css, debug css bookmark, cara tengok bug, layout html css
Pengaturcaraan

Bagaimana cara debug ghost CSS secara manual

Azmir ShahBy Azmir ShahNo Comments3 Mins Read
Share
Facebook Twitter Telegram WhatsApp

Sudah menjadi satu kebiasaan apabila anda ingin nyahpijat (debug) elemen atau isu yang melibatkan CSS, maka Chrome Devtools adalah jawapannya. Rutin ini dilakukan berulang-ulang sehinggalah anda menjadi buntu apabila menerima satu masalah yang pelik melibatkan CSS. Ianya tidak lain dan tidak bukan adalah berkenaan ghost CSS.

Apa itu Ghost CSS

Ghost CSS ini ialah isu berkaitan dengan elemen CSS dimana anda membuat susun atur rekaan UI, tetapi hasilnya itu tidak seperti yang dimahukan anda. Lebih menjengkelkan, anda tidak pasti apa masalahnya kerana anda tidak nampak secara visual elemen yang menjadi punca permasalahan tersebut.

Banyak faktor yang mempengaruhinya. Antaranya susun atur elemen. Sebab itulah paparan antaramuka anda kadang-kala terlalu ketepi, scrollbar tak keluar, ada whitespace dan macam-macam lagi. Puas ditenung dan dibuat dianogsis dengan Devtools, tidak pula menjumpai jawapannya. Jadi masalah-masalah seperti ini sememangnya menyakitkan hati.

Masalah saya

https://azmirshah.com/wp-content/uploads/2022/01/first.mp4

Dalam isu saya, saya hadapi masalah dengan whitespace di sebelah kanan UI untuk paparan telefon bimbit sahaja. Jika diimbas dengan mata kasar, tidak pula nampak dimana silapnya.

Walaupun tau isu overflow, kita nak juga tahu elemen mana yang menjadi punca dan menganggu susunan UI. Kalau terpaksa refactor, kita akan buat. Kalau hal kecil, kita ubah sedikit sahaja.

Jadi bagaimana cara untuk siasat?

Mudah sahaja. Kita perlu nyahpejat (debug) CSS secara manual. Caranya ialah dengan memasukkan kod berikut dalam fail CSS.

/* Debug Ghost CSS*/
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Ini adalah cara untuk anda debug kod secara manual menggunakan CSS. Kebiasaannya saya akan menggunakan cara ini sebab bukan selalu saya nak spotcheck elemen CSS.

Tapi kalau anda nak jadikan aktiviti ini sebagai satu tabiat, anda boleh gunakan kod Javascript dibawah dan jadikannya sebagai bookmark browser anda.

javascript: ( function () { const xray = document.createElement('style'); xray.innerHTML = "*{background:#000!important;color:#0f0!important;outline:solid #f00 1px!important;}"; const xraysInPage = [...document.body.getElementsByTagName("style")].filter(style => style.innerHTML === xray.innerHTML); if(xraysInPage.length > 0) { xraysInPage.forEach(style => document.body.removeChild(style)); } else { document.body.appendChild(xray) } } )();

Caranya ialah dengan highlight code Javascript ini, kemudian drag sahaja kod ini ke ruangan bookmark browser anda. Selepas itu anda boleh cuba untuk klik bookmark tadi. Anda akan dapati laman web yang anda buka akan bertukar warna.

ghost css, cara debug css, cara kenalpasti layout html css, debug css bookmark
Ini adalah cara bagaimana untuk jadikan kod ini sebagai bookmark

Menerusi kaedah ini, anda dapat mendiagnosis elemen dengan lebih mudah kerana setiap bahagian akan diwarnakan. Sempadan elemen diwarnakan dengan warna merah, latar belakang warna hitam dan tulisan berwarna hijau. Jadi anda akan nampak susunan elemen dibahagian mana yang bermasalah.

ghost css, tnb, cara tengok white space,
Paparan seperti ini memudahkan saya untuk mengesan susunan elemen CSS

Bagi kes saya, masalah berpunca daripada seksyen hero saya sahaja. Memandangkan ini masalah kecil, saya hanya tambahkan overflow-x: hidden; pada HTML dan body tanpa usik elemen hero. Dimasa akan datang, mungkin ada benda lain yang hendak diperbetulkan, cara ini mungkin boleh membantu.

Kesimpulan

Ini adalah cara mudah yang menjimatkan masa jika anda berkerja dengan UI tetapi UI itu degil tak dengar cakap. Adakalanya bila dah menulis beribu kod, kita penat dan terleka sehingga terbuat silap. Ini salah satu cara untuk debug dan kenalpasti masalahnya.

Baca juga: Beza camel, snake, kebab dan pascal case dalam penulisan kod

Terima kasih kerana sudi membaca. Jika ada trick lain lagi, saya pasti akan kongsikannya di masa akan datang.

Nota: Kalau anda tambah kod tersebut di CSS, dah sudah debug, jangan lupa buang kod tu.

cara debug css chrome developer tools css display debug css debug css bookmark debug dengan mudah ghost css how to debug css in chrome inspect elemen layout css website
Share. Facebook Twitter Telegram WhatsApp
Previous ArticleCara install aplikasi Disney+ Hotstar di Samsung TV Malaysia
Next Article LT Browser: Menguji reka bentuk responsif laman web anda secara offline
Azmir Shah
  • Website
  • Facebook
  • X (Twitter)
  • Instagram

Seorang programmer yang mempunyai pengalaman yang tidak seberapa. Memiliki kelulusan daripada universiti terkemuka di Malaysia dan secara jujurnya beliau meminati Elon Mask lebih daripada Bill Gate.Seorang yang bercita-cita tinggi, kini bekerja sebagai Front-End developer di salah sebuah syarikat di Shah Alam.

Artikel Berkaitan

LT Browser: Menguji reka bentuk responsif laman web anda secara offline

Beza camel, snake, kebab dan pascal case dalam penulisan kod

Leave A Reply Cancel Reply

Cari Sesuatu?
Media Sosial
  • Facebook
  • Twitter
Artikel Terbaru
Percutian

Pengalaman bercuti di Kuantan edisi food hunt

By Azmir Shah24/09/2023
Teknologi

Apa itu digital nomad? Adakah ia bakal menjadi trend di Malaysia?

By Azmir Shah02/05/2023
Tutorial

Cara tukar kad Maybank expired secara online

By Azmir Shah21/04/2023
Hiburan

Lagu raya moden yang berpotensi menjadi malar segar

By Azmir Shah19/04/2023
Percutian

Bercuti di Universal Studio Singapore (USS) – Bahagian 3

By Azmir Shah07/04/2023
Kategori
Mengenai Kami
Mengenai Kami

Platform penulisan untuk kami kongsikan segala informasi yang bersarang di minda. Berkongsi pengetahuan untuk anda para pembaca yang budiman.

Pautan Berkaitan
  • Dasar Privasi
  • Hubungi
  • Tentang
Artikel Terbaru

Pengalaman bercuti di Kuantan edisi food hunt

24/09/2023

Apa itu digital nomad? Adakah ia bakal menjadi trend di Malaysia?

02/05/2023

Lirik Tak ingin usai – Keisya Levronka

01/05/2023

Cara tukar kad Maybank expired secara online

21/04/2023
© 2025 Hak Cipta Terpelihara. Direka untuk Azmir Shah.

Type above and press Enter to search. Press Esc to cancel.

Go to mobile version