emka.web.id

Live Server, sebuah ekstensi Kode Visual Studio (VS), memungkinkan pengembang untuk mempratinjau pekerjaan mereka secara waktu nyata. Ekstensi menghilangkan kebosanan menyegarkan browser secara manual setiap kali Anda melakukan perubahan, yang dapat bertambah dalam proyek yang lebih besar. Ini sangat berguna untuk pengembang web yang bekerja dengan HTML, CSS, dan JavaScript.

Tutorial ini akan menjelaskan cara menyiapkan, menyesuaikan, dan menggunakan alat dengan jenis file berbeda, dan memecahkan beberapa masalah umum yang mungkin dihadapi pengembang saat menggunakannya.

Membuka Proyek Dengan Server Langsung di Kode VS

Tanpa Server Langsung, setiap kali Anda mengubah kode atau menambahkan konten, Anda harus menyegarkan browser secara manual agar pembaruan muncul. Sebagai gambaran – jika Anda membuat 100 perubahan sehari, Anda mungkin harus menyegarkan browser lebih dari 100 kali untuk melihat setiap perubahan. Inilah cara Anda dapat membuka proyek menggunakan Live Server di Visual Studio Code:
Instal ekstensi Live Server dari Marketplace. Anda dapat menemukannya di Bilah Aktivitas Kode VS. Buka proyek Anda dengan mengeklik "File" dan "Buka File" atau menggunakan pintasan keyboard, sesuka Anda. Klik kanan file HTML di proyek dan pilih "Buka dengan Live Server ” dari menu konteks.
A jendela browser baru akan menampilkan situs langsung. Setiap perubahan yang Anda lakukan pada file proyek akan diperbarui secara otomatis di browser.

Menyesuaikan Pengaturan Server Langsung di Kode VS

Untuk memaksimalkan ekstensi Server Langsung, cobalah berbagai opsi penyesuaian yang tersedia di pengaturannya. Anda dapat mengubah nomor port, HTTPS, dan konfigurasi proxy, di antara fitur lainnya. Mari kita selangkah demi selangkah menerapkan opsi penyesuaian ini.

Mengubah Nomor Port Default

Anda mungkin ingin menggunakan nomor port yang berbeda dari default 5500. Ini mudah dilakukan:
Lokasi baris “liveServer.settings.port” (nilai port default adalah 5500).Atur ke 0 untuk nomor port acak, atau pilih nomor yang ingin Anda gunakan.
Aktifkan Koneksi HTTPS

Aktifkan koneksi HTTPS untuk keamanan lebih, seperti ini:
Temukan baris protokol HTTPS "liveServer.settings.https".Ubah " aktifkan” nilai menjadi “benar”. Ketik jalur file sertifikat, kunci, dan kata sandi seperlunya.
Konfigurasikan Pengaturan Proksi

Mengonfigurasi pengaturan proxy mungkin diperlukan untuk skenario tertentu. Berikut cara mengatur proxy:
Enable proxy dengan "liveServer.settings.proxy." Ubah "enable" menjadi "true" jika belum. Atur "baseUri" untuk lokasi proxy yang diinginkan. Berikan "proxyUri" untuk URL sebenarnya.
Mengintegrasikan Edge DevTools Dengan Live Server di VS Code

Edge DevTools dan integrasi Live Server di Visual Studio Code dapat meningkatkan pengembangan web dengan membuatnya jauh lebih efisien. Kombo alat ini secara bersamaan menampilkan perubahan waktu nyata dan memungkinkan mengakses alat pengembang secara langsung.
Instal ekstensi Live Server untuk Visual Studio Code dari VS Code Marketplace.Instal ekstensi Edge DevTools untuk VS Code dari sumber yang sama dengan mencari “Microsoft Edge Tools untuk VS Code.”Gunakan alat pengembang browser terintegrasi untuk menyinkronkan perubahan dengan sumber secara otomatis.
Dengan kedua ekstensi terpasang, Anda dapat melihat pratinjau langsung dari perubahan Anda di jendela browser tersemat di dalam VS Code.

Menggunakan Server Langsung Dengan Jenis File Berbeda

Siaran Langsung Ekstensi server cukup serbaguna untuk banyak jenis file. Ini bekerja dengan file HTML secara default dan mendukung file CSS dan JavaScript. Saat Anda mengubah lembar gaya atau skrip dengan jenis file ini, ekstensi akan langsung menyegarkan browser untuk mencerminkan perubahan tersebut. Pengembang, terutama desainer web front-end, bisa mendapatkan keuntungan dari fitur update instan Live Server. Jika mengutak-atik CSS, Anda akan melihat efek perubahan secara waktu nyata – tidak perlu menunggu untuk memeriksa apakah warna, font, atau tata letak sudah benar. Dan untuk pembuat kode HTML dan JavaScript, mudah menemukan bug dan kesalahan di antara file yang berbeda.

Live Server masih berguna bagi mereka yang terutama bekerja dengan file PHP. Namun, untuk menggunakan fungsionalitasnya dengan PHP, Anda harus mengonfigurasi server lokal yang mendukung PHP. Server Langsung kompatibel dengan generator situs statis seperti Jekyll dan Hugo. Mereka memungkinkan Anda untuk melihat dan dengan cepat mengubah keluaran situs statis Anda. Mengintegrasikan Live Server dengan generator situs statis memungkinkan pengembangan yang efisien tanpa membuat dan menerapkan situs secara manual setiap kali Anda membuat perubahan.

Memecahkan Masalah Umum Server Live

Meskipun ekstensi Live Server secara umum dapat diandalkan, beberapa masalah mungkin masih muncul. Misalnya, Live Server mungkin gagal memulai, live reloading mungkin berhenti bekerja, atau Anda dapat mengalami masalah CORS.

Live Server Gagal Memulai

Hal ini dapat terjadi jika ekstensi tidak dipasang dengan benar. Jika ya, Anda dapat:
Memverifikasi bahwa ekstensi telah dipasang dengan benar dan diaktifkan. Jika Anda lupa mengaktifkan atau tidak sengaja menonaktifkannya, aktifkan untuk menyelesaikan masalah. Jika Anda mencurigai adanya masalah penginstalan, coba instal ulang ekstensi. Periksa pengaturan Anda dan pastikan folder ruang kerja Anda dapat diakses, dikonfigurasi, dan tidak dibuka di contoh lain .
Live Reloading Tidak Berfungsi

Jika live reloading tidak berfungsi sebagaimana mestinya, inilah sesuatu yang dapat Anda coba:
Periksa ulang jenis file dan dukungan jenis file Anda.Konfirmasikan bahwa ekstensi melacak perubahan dengan benar dan tidak mengabaikan file yang seharusnya menerima modifikasi . Periksa pengaturan seperti “liveServer.settings.ignoreFiles.”
Masalah Berbagi Sumber Daya Lintas Asal

Masalah CORS mungkin muncul saat menangani sumber daya dari asal yang berbeda. Untuk mengatasi masalah ini:
Izinkan permintaan lintas sumber di server Anda.Gunakan server pengembangan lokal.
Server Langsung Tidak Dapat Membuka Tab Browser

Jika Server Langsung gagal membuka tab browser di browser default Anda, coba sesuaikan pengaturannya:
Periksa browser web default Anda .Sesuaikan pengaturan browser Server di VS Code. Saat Anda mengaktifkan berbagi langsung, Anda harus memulai Sesi Kolaborasi melalui palet perintah.
Fitur Server Langsung Lanjutan

Server Langsung menawarkan beberapa fitur tambahan yang kurang dikenal namun cukup nyaman. Salah satu fitur “tersembunyi” yang perlu disebutkan adalah kompatibilitas dengan preprosesor, seperti Sass, Less, atau TypeScript, untuk mengompilasi kode Anda secara otomatis dan menyegarkan pratinjau. Live Server juga dapat berintegrasi dengan alat dan pustaka pihak ketiga, seperti kerangka kerja dan membangun sistem.

Jelajahi pengaturan dan dokumentasi Live Server untuk mengidentifikasi integrasi relevan yang dapat membantu stack Anda. Performa Live Server Lebih Baik.

Hindari Kelebihan Reloads

Salah satu cara untuk membuat Server bekerja dengan baik adalah dengan mengonfigurasi pengaturan untuk menghindari pemuatan ulang yang berlebihan. Misalnya, Anda dapat menyesuaikan opsi "liveServer.settings.ignoreFiles" untuk menentukan file atau folder mana yang tidak boleh memicu pemuatan ulang langsung. Membatasi jumlah data yang memenuhi syarat untuk dimuat ulang akan mengurangi frekuensi penyegaran dan menghemat sumber daya sistem.

Meningkatkan Penundaan Penyegaran

Sempurnakan penundaan penyegaran browser untuk memeras lebih banyak kinerja dari Server Anda. Untuk mencapai ini, sesuaikan pengaturan server "liveServer.settings.wait". Reload cepat yang terkadang terjadi saat menyimpan banyak file secara berurutan dapat membebani sumber daya sistem Anda. Meningkatkan penundaan melalui “liveServer.settings.wait” membantu menjaga kemungkinan masalah ini. Menjaga beberapa instans tetap terbuka sekaligus dapat menghabiskan sumber daya sistem yang signifikan, bergantung pada perangkat keras Anda.

Tips Server Langsung

Untuk mendapatkan hasil maksimal dari Server Langsung, cobalah beberapa kiat praktis:

Jaga Lingkungan Pengembangan dan Produksi Terpisah

Satu tip yang mungkin dibagikan pengembang lain adalah menjaga lingkungan pengembangan Anda terpisah dari lingkungan produksi Anda. Pemisahan ini membantu Anda menghindari penerapan kode yang belum selesai atau belum teruji secara tidak sengaja, sehingga kode Anda tetap bersih dan menghemat waktu yang berharga.

Gunakan Ruang Kerja Terpisah untuk Banyak Proyek

Jika Anda mengerjakan beberapa proyek secara bersamaan, gunakan ruang kerja terpisah di VS Code agar proyek Anda tetap teratur. Pendekatan ini akan memungkinkan Anda untuk dengan mudah beralih di antara proyek dan mengelola instans Live Server masing-masing.

Kolaborasi Lebih Baik Dengan Live Share dan Live Server

Ekstensi Live Share dan Live Server juga meningkatkan kolaborasi Anda dengan pengembang lain. Pengaturan ini memungkinkan Anda berbagi ruang kerja dan pratinjau langsung dengan orang lain. Ini adalah pendekatan yang optimal untuk tim yang bekerja sama dalam proyek dan memecahkan masalah secara waktu nyata.

FAQ tambahan
Apa itu Live Server dalam Visual Studio Code?


Live Server adalah ekstensi Kode VS populer yang mempratinjau file HTML, CSS, dan JavaScript secara waktu nyata.
Bagaimana Saya menghentikan Server Langsung?


Untuk menghentikan server, buka Palet Perintah dan ketik “Server Langsung: Hentikan Server Langsung.”
Mengapa Server Langsung tidak berjalan? firewall atau proxy memblokir server.
Dapatkah saya menggunakan Live Server dengan Microsoft Edge DevTools di VS Code?


Anda dapat menggunakan Live Server bersamaan dengan Microsoft Edge. Untuk melakukan ini, instal ekstensi Live Server dan Edge DevTools untuk Visual Studio Code.

Bergabung dengan Percakapan Langsung (Server)

Ekstensi Server Langsung dalam Visual Studio Code adalah alat yang harus dimiliki oleh pengembang modern, membantu mereka mengoptimalkan alur kerja dan merilis top- proyek takik. Itu menghilangkan penyegaran browser yang tidak perlu dan memungkinkan kolaborasi waktu nyata dengan berbagi ruang kerja dan pratinjau.

Apa pendapat Anda tentang ekstensi ini? Kiat dan trik mana yang menurut Anda sangat membantu? Beri tahu kami di komentar – ini bisa sangat membantu sesama coders.
Artikel Diperbarui pada: May 11, 2023
Kontributor: Syauqi Wiryahasana
Model: Haifa Manik Intani