Pelayan Langsung, sambungan Kod Visual Studio (VS), membolehkan pembangun pratonton kerja mereka dalam masa nyata. Sambungan itu menghilangkan kebosanan menyegarkan penyemak imbas secara manual setiap kali anda membuat sebarang perubahan, yang boleh ditambah dalam projek yang lebih besar. Ia amat berguna untuk pembangun web yang bekerja dengan HTML, CSS dan JavaScript.
Tutorial ini akan menerangkan cara menyediakan, menyesuaikan dan menggunakan alat dengan jenis fail yang berbeza dan menyelesaikan beberapa isu biasa yang mungkin dihadapi oleh pembangun semasa menggunakannya.
Membuka Projek Dengan Pelayan Langsung dalam Kod VS
Tanpa Pelayan Langsung, setiap kali anda menukar kod anda atau menambah kandungan, anda mesti memuat semula penyemak imbas secara manual untuk kemas kini dipaparkan. Untuk meletakkan perkara ini dalam perspektif – jika anda membuat 100 perubahan sehari, anda mungkin perlu memuat semula penyemak imbas sehingga 100 kali untuk melihat setiap perubahan. Begini cara anda boleh membuka projek menggunakan Pelayan Langsung dalam Kod Visual Studio:
- Pasang sambungan Pelayan Langsung daripada Marketplace. Anda boleh menemuinya dalam Bar Aktiviti Kod VS.
- Buka projek anda dengan sama ada mengklik “Fail” dan “Buka Fail” atau menggunakan pintasan papan kekunci, seperti yang anda suka.
- Klik kanan fail HTML dalam projek dan pilih “Buka dengan Pelayan Langsung” daripada menu konteks.
Tetingkap penyemak imbas baharu akan memaparkan tapak langsung. Sebarang perubahan yang anda lakukan pada fail projek akan dikemas kini secara automatik dalam penyemak imbas.
Menyesuaikan Tetapan Pelayan Langsung dalam Kod VS
Untuk memanfaatkan sepenuhnya sambungan Pelayan Langsung, cuba pilihan penyesuaian berbeza yang tersedia dalam tetapannya. Anda boleh mengubah suai nombor port, HTTPS dan konfigurasi proksi, antara ciri lain. Mari kita pergi langkah demi langkah melalui melaksanakan pilihan penyesuaian ini.
Tukar Nombor Port Lalai
Anda mungkin mahu menggunakan nombor port yang berbeza daripada 5500 lalai. Ini mudah dicapai:
- Cari baris “liveServer.settings.port” (nilai port lalai ialah 5500).
- Tetapkan kepada 0 untuk nombor port rawak, atau pilih nombor yang anda mahu gunakan.
Dayakan Sambungan HTTPS
Dayakan sambungan HTTPS untuk lebih keselamatan, seperti ini:
- Cari baris protokol HTTPS “liveServer.settings.https”.
- Tukar nilai “dayakan” kepada “benar.”
- Taipkan laluan fail sijil, kunci dan frasa laluan jika perlu.
Konfigurasikan Tetapan Proksi
Mengkonfigurasi tetapan proksi mungkin diperlukan untuk senario tertentu. Berikut ialah cara untuk menyediakan proksi:
- Dayakan proksi dengan “liveServer.settings.proxy.”
- Tukar “dayakan” kepada “benar” jika ia tidak begitu.
- Tetapkan “baseUri” untuk lokasi proksi yang dikehendaki.
- Sediakan “proxyUri” untuk URL sebenar.
Mengintegrasikan Edge DevTools Dengan Pelayan Langsung dalam Kod VS
Penyepaduan Edge DevTools dan Pelayan Langsung dalam Kod Visual Studio boleh meningkatkan pembangunan web dengan menjadikannya lebih cekap. Kombo alat ini secara serentak memaparkan perubahan masa nyata dan membolehkan mengakses alat pembangun secara langsung.
- Pasang sambungan Pelayan Langsung untuk Kod Visual Studio daripada Pasaran Kod VS.
- Pasang sambungan Edge DevTools untuk Kod VS daripada sumber yang sama dengan mencari “Alat Microsoft Edge untuk Kod VS.”
- Gunakan alat pembangun penyemak imbas bersepadu untuk menyegerakkan perubahan dengan sumber secara automatik.
Dengan kedua-dua sambungan dipasang, anda boleh melihat pratonton langsung perubahan anda dalam tetingkap penyemak imbas terbenam dalam Kod VS.
Menggunakan Pelayan Langsung Dengan Jenis Fail Berbeza
Sambungan Pelayan Langsung cukup serba boleh untuk banyak jenis fail. Ia berfungsi dengan fail HTML secara lalai dan menyokong fail CSS dan JavaScript. Apabila anda menukar helaian gaya atau skrip dengan jenis fail ini, sambungan akan menyegarkan penyemak imbas serta-merta untuk mencerminkan perubahan. Pembangun, terutamanya pereka web bahagian hadapan, boleh mendapat manfaat daripada ciri kemas kini segera Pelayan Langsung. Jika mengubah suai CSS, anda akan melihat kesan perubahan dalam masa nyata – tidak perlu menunggu untuk menyemak sama ada warna, fon atau reka letak adalah betul. Dan untuk pengekod HTML dan JavaScript, mudah untuk mengesan pepijat dan kesilapan antara fail yang berbeza.
Pelayan Langsung masih berguna untuk mereka yang bekerja dengan fail PHP. Walau bagaimanapun, untuk menggunakan fungsinya dengan PHP, anda perlu mengkonfigurasi pelayan tempatan yang menyokong PHP.
Pelayan Langsung serasi dengan penjana tapak statik seperti Jekyll dan Hugo. Mereka membenarkan anda melihat dan mengubah suai output tapak statik anda dengan cepat. Mengintegrasikan Pelayan Langsung dengan penjana tapak statik membolehkan pembangunan yang cekap tanpa membina dan menggunakan tapak secara manual setiap kali anda membuat perubahan.
Menyelesaikan Masalah Lazim Pelayan Langsung
Walaupun sambungan Pelayan Langsung secara amnya boleh dipercayai, beberapa isu mungkin masih timbul. Sebagai contoh, Pelayan Langsung mungkin gagal dimulakan, muat semula secara langsung mungkin berhenti berfungsi, atau anda mungkin menghadapi masalah CORS.
Pelayan Langsung Gagal Dimulakan
Ini mungkin berlaku jika sambungan tidak dipasang dengan betul. Jika ya, anda boleh:
- Sahkan bahawa sambungan dipasang dengan betul dan didayakan. Jika anda terlupa untuk mendayakan atau melumpuhkannya secara tidak sengaja, dayakannya untuk menyelesaikan isu tersebut.
- Jika anda mengesyaki isu pemasangan, cuba pasang semula sambungan.
- Semak tetapan anda dan pastikan folder ruang kerja anda boleh diakses, dikonfigurasikan dan tidak dibuka dalam keadaan lain.
Muat Semula Langsung Tidak Berfungsi
Jika muat semula secara langsung tidak berfungsi sebagaimana mestinya, berikut ialah sesuatu yang anda boleh cuba:
- Semak semula jenis fail dan sokongan jenis fail anda.
- Sahkan bahawa sambungan menjejaki perubahan dengan betul dan tidak mengabaikan fail yang sepatutnya menerima pengubahsuaian. Semak tetapan seperti “liveServer.settings.ignoreFiles.”
Masalah Perkongsian Sumber Rentas Asal
Isu CORS mungkin timbul apabila berurusan dengan sumber dari asal yang berbeza. Untuk menyelesaikan masalah ini:
- Benarkan permintaan silang asal pada pelayan anda.
- Gunakan pelayan pembangunan tempatan.
Pelayan Langsung Tidak Dapat Membuka Tab Penyemak Imbas
Jika Pelayan Langsung gagal membuka tab penyemak imbas dalam penyemak imbas lalai anda, cuba laraskan tetapan:
- Semak pelayar web lalai anda.
- Laraskan tetapan penyemak imbas Pelayan dalam Kod VS. Apabila anda mendayakan perkongsian langsung, anda perlu memulakan Sesi Kerjasama melalui palet arahan.
Ciri Pelayan Langsung Lanjutan
Pelayan Langsung menawarkan beberapa ciri tambahan yang kurang dikenali tetapi agak mudah. Satu ciri “tersembunyi” yang patut disebut ialah keserasian dengan prapemproses, seperti Sass, Less atau TypeScript, untuk menyusun kod anda secara automatik dan memuat semula pratonton. Pelayan Langsung juga boleh disepadukan dengan alatan dan perpustakaan pihak ketiga, seperti rangka kerja dan sistem binaan.
Terokai tetapan dan dokumentasi Pelayan Langsung untuk mengenal pasti penyepaduan berkaitan yang boleh membantu timbunan anda.
Pengoptimuman Prestasi Pelayan Langsung
Terdapat beberapa tweak untuk cuba menjadikan Pelayan Langsung berprestasi lebih baik.
Elakkan Muat Semula Berlebihan
Satu cara untuk menjadikan Pelayan berprestasi terbaik adalah dengan mengkonfigurasi tetapan untuk mengelakkan lebihan tambah nilai. Sebagai contoh, anda boleh melaraskan pilihan “liveServer.settings.ignoreFiles” untuk menentukan fail atau folder yang tidak boleh mencetuskan muat semula langsung. Mengehadkan jumlah data yang layak untuk muat semula mengurangkan kekerapan penyegaran dan menjimatkan sumber sistem.
Tingkatkan Kelewatan Segar Semula
Perhalusi kelewatan muat semula penyemak imbas untuk memerah lebih banyak prestasi daripada Pelayan anda. Untuk mencapai ini, laraskan tetapan pelayan “liveServer.settings.wait”. Muat semula pantas yang kadangkala berlaku apabila menyimpan berbilang fail berturut-turut boleh membebankan sumber sistem anda. Meningkatkan kelewatan melalui “liveServer.settings.wait” membantu mengekalkan potensi isu ini.
Tutup Kejadian Tidak Digunakan
Akhir sekali, pertimbangkan untuk menutup contoh Pelayan Langsung yang tidak digunakan untuk helah prestasi yang lebih mudah apabila bekerja pada berbilang projek. Memastikan beberapa keadaan terbuka serentak boleh menggunakan sumber sistem yang ketara, bergantung pada perkakasan anda.
Petua Pelayan Langsung
Untuk memanfaatkan Pelayan Langsung, cuba beberapa petua praktikal:
Asingkan Persekitaran Pembangunan dan Pengeluaran
Satu petua yang mungkin dikongsi oleh pembangun lain ialah memastikan persekitaran pembangunan anda berasingan daripada persekitaran pengeluaran anda. Pemisahan ini membantu anda mengelak daripada menggunakan kod yang belum selesai atau belum diuji secara tidak sengaja, dengan itu memastikan kod anda lebih bersih dan menjimatkan masa yang berharga.
Gunakan Ruang Kerja Berasingan untuk Berbilang Projek
Jika anda bekerja pada berbilang projek serentak, gunakan ruang kerja yang berasingan dalam Kod VS untuk memastikan projek anda teratur. Pendekatan ini akan membolehkan anda menukar antara projek dengan mudah dan mengurus kejadian Pelayan Langsung masing-masing.
Kerjasama Lebih Baik Dengan Kongsi Langsung dan Pelayan Langsung
Sambungan Kongsi Langsung dan Pelayan Langsung juga meningkatkan kerjasama anda dengan pembangun lain. Persediaan ini membolehkan anda berkongsi ruang kerja anda dan pratonton langsung dengan orang lain. Ia merupakan pendekatan yang optimum untuk pasukan yang bekerjasama dalam projek dan menyelesaikan masalah dalam masa nyata.
Soalan Lazim Tambahan
Apakah Pelayan Langsung dalam Kod Visual Studio?
Pelayan Langsung ialah sambungan Kod VS popular yang mempratonton fail HTML, CSS dan JavaScript dalam masa nyata.
Bagaimanakah cara saya menghentikan Pelayan Langsung?
Untuk menghentikan pelayan, buka Palet Perintah dan taip “Pelayan Langsung: Hentikan Pelayan Langsung.”
Mengapa Pelayan Langsung tidak berjalan?
Beberapa kemungkinan sebab untuk isu ini melibatkan pemasangan sambungan yang tidak betul, persediaan projek yang salah atau tembok api atau proksi yang menyekat pelayan.
Bolehkah saya menggunakan Pelayan Langsung dengan Microsoft Edge DevTools dalam Kod VS?
Anda boleh menggunakan Pelayan Langsung bersama-sama dengan Microsoft Edge. Untuk melakukan ini, pasang sambungan Live Server dan Edge DevTools untuk Kod Visual Studio.
Sertai Perbualan Langsung (Pelayan).
Sambungan Pelayan Langsung dalam Kod Visual Studio ialah alat yang mesti ada untuk pembangun moden, membantu mereka mengoptimumkan aliran kerja dan mengeluarkan projek terkemuka. Ia menghapuskan penyegaran penyemak imbas yang tidak perlu dan membolehkan kerjasama masa nyata dengan berkongsi ruang kerja dan pratonton.
Apakah pendapat anda tentang sambungan ini? Petua dan petua manakah yang anda dapati sangat membantu? Beritahu kami dalam ulasan – ia boleh membantu rakan pengekod.