LiveReload, Lihat Hasil Perubahan Web Tanpa Refresh

Bagi anda yang biasa melakukan develop untuk aplikasi berbasi web, langkah yang biasanya anda tempuh adalah melakukan penulisan kode program pada web editor kesukaan anda dan kemudian melakukan refresh pada browser anda untuk melihat hasilnya. Saat ini langkah tersebut tidak perlu dilakukan lagi apabila anda menggunakan LiveReload. Dengan LiveReload, anda cukup menyimpan perubahan yang anda lakukan pada kode program anda dan secara otomatis tampilan pada browser akan terupdate tanpa perlu refresh.

LiveReload melakukan monitoring pada sistem file anda dan saat anda menyimpan sebuah file, maka browser secara otomatis akan refresh. Perubahan baik kode HTML atau CSS dapat secara langsung dilihat hasilnya tanpa melakukan refresh pada browser. LiveReload terdiri dari dua jenis file yang perlu anda pasang, yakni sebagai aplikasi pada desktop anda dan sebagai plugin atau addon pada browser yang anda gunakan. Saat ini(01/2015) LiveReload dapat berjalan pada browser Safari, Chrome, Firefox dan Mobile Safari. Dapat juga dipergunakan pada browser Opera apabila anda mengaktifkan web socket. Satu hal yang lebih menggembirakan lagi, LiveReload merupakan software open source, anda dapat langsung mengunduhnya di GitHub

Cara Instalasi LiveReload

Langkah 1: Download dan install aplikasinya

LiveReload Pada Mac

LiveReload Pada Windows

Langkah 2: Jalankan aplikasi LiveReload dan tambahkan folder project anda pada LiveReload. Cukup lakukan drag drop folder atau klik pada tombol +

Langkah 3: Ini tergantung cara kerja anda. Anda dapat menginstal ekstensi browser atau menempelkan kode Javascript pada tiap file anda.

Tampilan LiveReload yang telah terinstall.

Download Ekstensi LiveReload Untuk Browser

Berikut ini link download untuk tiap pengguna browser:

Cara Menggunakan Ekstensi Pada Browser

  • Pastikan aplikasi LiveReload telah terinstall dan dijalankan
  • Pastikan anda telah menambahkan folder project anda
  • Klik pada toolbar LiveReload untuk mengaktifkan(enable) atau menonaktifkan

Hingga langkah ini harusnya anda telah dapat menggunakan LiveReload. Untuk mencobanya, silahkan buka aplikasi web anda pada browser. Selanjutnya silahkan lakukan perubahan pada kode programnya. Simpan perubahan yang anda lakukan. Perhatikan pada browser anda, maka perubahan akan langsung terlihat tanpa anda melakukan refresh pada browser anda.

Incoming search terms:

Be Sociable, Share!

Related Posts:

  • No Related Post

Add a Comment

Your email address will not be published. Required fields are marked *