Cara Mengedit Fail Sumber secara langsung di Chrome

Edit Kod Sumber Laman Web secara langsung dalam Pelayar Chrome, mengucapkan selamat tinggal kepada penyuntingan yang membosankan - Refresh Loop! Artikel ini akan membimbing anda cara menggunakan alat pemaju Chrome untuk mengedit fail HTML, CSS dan JavaScript secara langsung dan berulang dalam pembangunan dengan cepat.

aliran kerja harian pemaju web biasanya: tulis kod HTML, CSS dan JavaScript dalam editor, kemudian buka halaman dalam penyemak imbas, gunakan alat pemaju untuk debug setelah menemui masalah, ubah kod dan salinnya kembali ke Editor, dan kemudian memuatkan semula halaman ... sementara alat seperti Hot Reloading memudahkan proses, banyak pemaju masih beralih antara alat pemaju dan editor. Malah, Chrome membolehkan anda membuka dan mengedit fail sumber secara langsung dalam penyemak imbas.

Langkah 1: Mulakan alat pemaju

Buka Chrome, muatkan halaman pada sistem fail atau pelayan tempatan, dan kemudian buka alat pemaju melalui menu lebih banyak alat, atau tekan

f12 atau Shift i (bergantung kepada sistem operasi anda). Tukar ke tab Sumber untuk melihat Fail Explorer:

Anda boleh membuka dan mengedit fail CSS dan JavaScript secara langsung dalam pandangan ini, tetapi sedar bahawa perubahan ini akan hilang selepas menyegarkan halaman.

Langkah 2: mengaitkan folder ruang kerja

Klik pada tab "Filessystem", dan kemudian klik "Tambah Folder ke Ruang Kerja". Anda akan diminta untuk memilih folder kerja dan anda akan diminta untuk membenarkan Chrome mengakses folder. Explorer akan memaparkan fail pada sistem, anda boleh mengklik untuk membuka:

Langkah 3: Edit dan simpan kod

Sekarang anda boleh mengedit kod secara langsung. Pengeditan yang tidak disimpan ditandai dengan asterisk (*) pada label fail. Perubahan CSS dikemas kini dengan segera, tetapi untuk HTML dan JavaScript, anda biasanya perlu menekan

s

kesannya.

Anda juga boleh klik kanan label fail dan pilih "Simpan sebagai ..." untuk menyimpan salinan fail ke lokasi lain.

Langkah 4: Lihat dan undo perubahan

Untuk melihat perubahan, klik kanan label fail dan pilih "Pengubahsuaian Tempatan ..." dari menu konteks:

akan memaparkan pandangan yang serupa dengan diff. Ikon anak panah di sudut kiri bawah panel akan membatalkan semua perubahan dan memulihkan fail ke keadaan asalnya.

Alat pemaju Chrome bukan pengganti lengkap untuk editor kod yang biasa digunakan, tetapi ia masih merupakan alat yang sangat berguna ketika membuat perubahan cepat atau bekerja pada komputer lain di mana editor tidak dipasang.

soalan yang sering ditanya untuk Chrome untuk mengedit fail sumber secara langsung

Bolehkah saya mengedit kod sumber dalam Chrome?

Ya, anda boleh secara langsung mengedit kod sumber laman web menggunakan alat pemaju terbina dalam Chrome. Buka alat pemaju (tekan F12 atau CTRL Shift I) dan menavigasi ke tab "Elemen". Cari elemen HTML yang ingin anda edit, klik kanan dan pilih Edit sebagai HTML atau klik dua kali kod. Selepas membuat perubahan, tekan Enter untuk memohon perubahan dan halaman akan dikemas kini dengan segera. Ingat bahawa perubahan ini adalah sementara dan hanya menjejaskan sesi penyemak imbas semasa;

Apakah kekunci pintasan untuk "edit sebagai html" dalam krom?

Tidak ada pintasan khusus untuk "Edit sebagai HTML" dalam alat pemaju Chrome. Walau bagaimanapun, anda boleh menggunakan CTRL Shift C (CMD Option C pada Mac) untuk mengaktifkan mod "Periksa" dan klik elemen yang anda ingin edit untuk mencapai fungsi yang sama.

Bagaimana untuk mengedit fail JS dalam alat pemaju Chrome?

Buka tab Sumber dalam alat pemaju Chrome, cari fail JavaScript yang anda mahu edit, klik untuk membukanya dalam panel editor kod di sebelah kanan, dan buat perubahan. Selepas penyuntingan selesai, tekan Ctrl S (CMD S pada Mac) untuk menyimpan perubahan. Ingat bahawa perubahan ini bersifat sementara dan hanya digunakan untuk sesi penyemak imbas semasa. Untuk mengubah suai fail JavaScript secara kekal di laman web, anda perlu mengakses pelayan hosting fail dan dapat mengeditnya secara langsung pada pelayan.

Atas ialah kandungan terperinci Cara Mengedit Fail Sumber secara langsung di Chrome. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!