Cara Untuk Inspect Element Pada iPhone

Salah satu cabaran ketika mengubah reka bentuk paparan sesebuah laman web adalah ketika berdepan dengan kesukaran membuat perincian untuk paparan telefon pintar (mobile optimised atau responsive design).

Tidak seperti menggunakan pelayar web pada komputer yang membolehkan kita untuk inspect element bagi melihat atau mengubah kod-kod yang diinginkan, proses pengubahsuaian menjadi lebih sukar kerana telefon pintar tidak mempunyai fungsi “right click” seperti yang selalu kita gunakan.

Inspect Element menggunakan pelayar Safari pada iPhone

Bercakap mengenai salah satu fungsi terbina didalam iPhone, kekurangan ini dapat diatasi dengan menggunakan pelayar Safari (iaitu pelayar web yang dibangunkan oleh Apple).

Melalui pelayar Safari ini, pembangun atau pereka sesebuah laman web bukan sahaja dapat menggunakan fungsi debug malah turut juga boleh memeriksa elemen-elemen terkandung (inspect element) di paparan sebenar laman web pada sesebuah telefon pintar (buat masa sekarang hanya untuk iPhone and iPad).

Cara untuk menggunakan fungsi inspect element pada iPhone ini mudah saja. Langkah pertama yang perlu korang lakukan adalah dengan menghidupkan fungsi “Web Inspector” pada iPhone menerusi tetapan; Settings » Safari » Advanced » Web Inspector.

Kemudian, sambungkan iPhone korang pada mesin Mac (sama ada Macbook ataupun iMac) dan seterusnya, dengan menggunakan iPhone tersebut, layari laman web yang ingin diperiksa.

Kemudian, buka pula pelayar Safari pada Macbook ataupun iMac korang. Diikuti dengan menghidupkan fungsi developer menu pada pelayar tersebut menerusi tetapan: Safari » Preferences » Advanced » Tick pada checkbox “Show Develop menu in menu bar”.

Nah.. Sekarang, korang mempunyai option “Develop” dibahagian atas menu bar. Klik pada option tersebut, dan korang akan dapat melihat nama profile iPhone korang sebagai pilihan yang seterusnya. Arahkan cursor pada profile itu dan ia akan menunjukkan kepada korang laman web yang sedang dilayari pada Safari iPhone korang.

Kemudian klik pula pada laman web yang tertera, dan anda akan dipaparkan dengan satu tetingkap Web Inspector baru untuk halaman yang sedang disemak di iPhone korang.

Dari sini, korang sudah boleh memulakan kerja-kerja korang. Ubah CSS? Tak ada masalah lagi. Cool kan?

Untuk makluman, fungsi tetingkap web inspector ini menjadi lebih menarik ketika korang sedang membuat semakan terhadap elemen-elemen yang dipaparkan, dimana ketika paparan di tetingkap web inspector dipilih, begitu juga dengan paparan di iPhone yang juga turut meng-highlight-kan elemen-elemen yang sama.

Sekaligus menjadikan proses ini sedikit sebanyak membantu korang untuk mengetahui secara tepat akan elemen-elemen yang perlu diubah tetapan yang diperlukan.