PDF download Unduh PDF PDF download Unduh PDF

Ingin melakukan debug (menghapus bug atau galat) situs web di iPhone tetapi tidak bisa menemukan " Inspect Element "? Walaupun fitur peramban ( browser ) web ini tidak disertakan pada Safari di iPhone, masih ada beberapa cara yang dapat Anda lakukan untuk memeriksa elemen ( inspect element ) tanpa harus membeli aplikasi berbayar. Cara yang resmi adalah menggunakan Developer Tools Safari, yang dilakukan dengan menghubungkan iPhone ke komputer Mac. Jika tidak ada komputer di sekitar Anda, Anda bisa menggunakan aplikasi gratis Web Inspector, atau membuat markah ( bookmark ) JavaScript (yang juga bisa digunakan di Google Chrome). Atau, apabila Anda tidak ingin melakukan debug aplikasi web, tetapi sekadar ingin mengganti tampilan situs, gunakan pintasan ( shortcut ) iPhone yang bernama Edit Webpage.

Hal yang Perlu Anda Ketahui

  • Periksa elemen menggunakan Developer Tools Safari dengan menghubungkan iPhone ke komputer Mac.
  • Anda bisa memeriksa elemen tanpa menggunakan komputer, dengan memasang aplikasi Web Inspector, atau menggunakan markah JavaScript.
  • Untuk menyunting teks atau menghilangkan gambar yang ada di suatu situs, cobalah menggunakan pintasan Edit Webpage di aplikasi Shortcuts.
Metode 1
Metode 1 dari 4:

Menggunakan Developer Tools Safari

PDF download Unduh PDF
  1. Untuk menggunakan Inspect Element pada Safari di iPhone tanpa memakai alat pihak ketiga, gunakan Developer Tools Safari. Kekurangannya, Developer Tools hanya bisa digunakan di komputer Mac. Jadi, Anda harus bisa mengakses komputer untuk menjalankan metode ini.
  2. Cara melakukannya:
    • Buka Settings di iPhone.
    • Gesek layar ke bawah, lalu sentuh Safari .
    • Gesek layar ke bawah, lalu sentuh Advanced .
    • Sentuh sakelar " Web Inspector " untuk mengaktifkannya (menjadi berwarna hijau).
  3. Lewati langkah ini jika menu Develop sudah ada ketika Safari dibuka di komputer Mac. Jika tidak ada, lakukan langkah-langkah berikut ini untuk mengaktifkannya:
    • Klik menu Safari .
    • Klik Settings .
    • Klik Advanced .
    • Pilih " Show Develop menu in menu bar ". [1]
  4. Gunakan Safari pada iPhone untuk membuka situs yang ingin diperiksa dengan Inspect Element.
  5. iPhone Anda akan tercantum di dalam daftar di sini.
  6. Tindakan ini akan membuka panel Inspect Element di komputer Mac untuk situs yang Anda buka di iPhone.
    • Ketika memilih item di dalam tab Elements di Mac, eleman yang Anda pilih akan disorot di iPhone. [2]
    • Jika ingin terus menggunakan Inspect Element tanpa harus menghubungkan iPhone ke komputer Mac, klik kembali menu Develop , lalu pilih Connect via Network .
    Iklan
Metode 2
Metode 2 dari 4:

Menggunakan Ekstensi Web Inspector

PDF download Unduh PDF
  1. Ekstensi Safari gratis untuk iPhone/iPad ini bisa digunakan untuk memeriksa elemen tanpa komputer. Buka App Store dan cari " Web Inspector " buatan " And a Dinosaur ". Anda juga bisa mengunjungi https://apps.apple.com/us/app/web-inspector/id1584825745 untuk mengunduhnya langsung.
    • Anda bisa menggunakan Web Inspector untuk memeriksa elemen pada Safari tanpa harus menghubungkan iPhone ke komputer Mac. Untuk melakukan debug di Google Chrome, gunakan markah JavaScript .
    • Walaupun nama ekstensinya sama dengan "Web Inspector" Safari, ini bukan alat resmi Apple.
  2. Cara melakukannya:
    • Jalankan Safari dan kunjungi situs apa saja.
    • Sentuh Aa di kolom alamat.
    • Sentuh Manage Extensions . [3]
    • Sentuh sakelar di sebelah " Web Inspector " untuk mengaktifkannya.
    • Sentuh Done .
  3. Setelah Web Inspector diaktifkan, Anda bisa langsung memeriksa elemen dari Safari.
  4. Anda bisa melakukannya dengan menyentuh Aa lagi dan memilih Web Inspector .
    • Untuk memberi izin kepada Web Inspector memeriksa elemen di situs ini untuk sehari saja, pilih Allow for One Day .
    • Jika Web Inspector ingin digunakan lebih dari sehari, atau untuk beberapa situs, pilih Always Allow . Selanjutnya, Anda bisa memilih Always Allow on This Website atau Always Allow on Every Website .
      • Jika memilih opsi terakhir, di masa mendatang Anda tidak perlu lagi memberi izin kepada Web Inspector untuk mengakses situs web.
  5. Alat Inspect Element akan dibuka di sisi bawah Safari.
    • Setelah selesai, tutup Web Inspector dengan menyentuh Aa 2 kali.
    Iklan
Metode 3
Metode 3 dari 4:

Menggunakan Markah JavaScript

PDF download Unduh PDF
  1. 1
    Buka situs yang ingin diperiksa. Trik ini mengharuskan Anda membuat markah yang berisi rangkaian kode JavaScript untuk memunculkan Inspect Element pada peramban web apa saja di iPhone. Anda bisa menggunakan metode ini pada Safari dan Chrome, walaupun cara membuat markah agak berbeda.
    • Chrome: Sentuh menu 3 titik dan pilih Add to Bookmarks .
    • Safari: Sentuh ikon Sharing (berbagi) di sisi bawah layar, lalu sentuh Add to Favorites .
  2. Setelah memiliki markah, Anda harus menyuntingnya sekarang.
    • Chrome: Sentuh menu 3 titik, lalu pilih Bookmark di sisi atas layar. Sentuh dan tahan markah yang baru, lalu sentuh Edit Bookmark .
    • Safari: Sentuh ikon buku terbuka di sisi bawah layar, lalu sentuh Favorites . Sentuh dan tahan markah yang baru Anda buat, lalu sentuh Edit .
  3. Gantilah nama markah menjadi " Inspect ", tempelkan ( paste ) kode di bawah ini ke dalam kolom URL atau Link secara persis dan apa adanya. Setelah itu, simpan markah tersebut.
     javascript 
     : 
     ( 
     function 
     () 
     { 
     var 
     script 
     = 
     document 
     . 
     createElement 
     ( 
     'script' 
     ); 
     script 
     . 
     src 
     = 
     "//cdn.jsdelivr.net/npm/eruda" 
     ; 
     document 
     . 
     body 
     . 
     appendChild 
     ( 
     script 
     ); 
     script 
     . 
     onload 
     = 
     function 
     () 
     { 
     eruda 
     . 
     init 
     () 
     } 
     })(); 
    
  4. Di Chrome, Anda bisa membuka markah dengan menyentuh 3 titik, memilih Bookmarks , dan menyentuh Inspect . Pada Safari, Anda bisa menemukan markah Inspect di favorit. Beberapa saat kemudian, ikon gir akan muncul di halaman web yang ingin diperiksa.
  5. Sekarang Anda bisa menggunakan tab Elements di sisi atas panel untuk memeriksa elemen di halaman web yang dibuka pada saat ini.
    Iklan
Metode 4
Metode 4 dari 4:

Menggunakan Pintasan Edit Webpage

PDF download Unduh PDF
  1. Untuk menyunting tampilan suatu situs menggunakan Inspect Element, Anda bisa memperoleh efek yang sama menggunakan pintasan iPhone yang bernama Edit Webpage. Walaupun pintasan ini tidak menampilkan layar Inspect Element biasa, Anda bisa melakukan perubahan langsung pada situs mana saja untuk melihat tampilannya.
    • Aplikasi Shortcut bisa ditemukan di App Library.
    • Cara ini sangat berguna apabila Anda ingin menyunting teks atau menghilangkan gambar dan objek lain di situs yang Anda lihat.
  2. Anda bisa menemukannya di sudut kanan bawah.
  3. Tuliskan edit webpage di kolom Search (pencarian), lalu sentuh Edit webpage yang ditampilkan di urutan teratas hasil pencarian.
  4. Tombol berwarna biru ini terdapat di sisi bawah halaman.
  5. Anda harus mengubah pengaturan di Shortcuts agar Edit Webpage bisa digunakan:
    • Buka Settings di iPhone.
    • Gesek layar ke bawah, lalu sentuh Shortcuts .
    • Sentuh Advanced .
    • Aktifkan sakelar " Allow Running Scripts ".
  6. Anda bisa memodifikasi situs web mana saja menggunakan cara ini.
  7. Ikon Sharing berbentuk kotak biru di bagian bawah layar yang di dalamnya terdapat tanda panah mengarah ke atas.
  8. Dengan melakukannya, pintasan tersebut akan diberi izin untuk "menyunting" situs di jendela peramban.
  9. Layar akan menampilkan kembali halaman situs web, yang bisa Anda sunting secara visual.
    • Sentuh elemen yang ingin disunting. Sekarang Anda bisa menyunting gambar dan teks di situs tersebut, tanpa memiliki fitur Inspect Element resmi bawaan Safari.
    Iklan

Tips

  • Di masa lalu, Adobe Edge Inspect adalah alat yang populer untuk memeriksa elemen pada situs web, tetapi alat ini tidak dikembangkan atau diperbarui lagi. [4]
  • Ada juga beberapa aplikasi berbayar yang bisa digunakan untuk memeriksa elemen web pada iPhone, seperti Inspect Browser dan Achoo HTML Viewer & Inspector.
Iklan

Tentang wikiHow ini

Halaman ini telah diakses sebanyak 3.448 kali.

Apakah artikel ini membantu Anda?

Iklan