Mengedit kode sumber HTML dengan Google Chrome

34

Di Internet Explorer saya dapat membuka file .html lokal dan mengeditnya dengan memilih "Sumber" di menu "Lihat", "buat perubahan cepat, lalu" Refresh "(muat ulang) halaman web.

Bagaimana saya bisa melakukannya dengan Google Chrome?

Bisakah saya membuka file .html di Windows Notepad? (Saya suka notepad karena sangat cepat.)

google-chrome browser html notepad barlop
sumber

Jawaban:

27

Ctrl+Shift+I or F12-> Elemen, Ini harus menunjukkan sumber Anda. Klik kanan pada elemen apa pun dan klikEdit as HTML

Edit:

Ada beberapa ekstensi yang terlihat seperti yang Anda inginkan: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor& Live WebSite Editorterlihat menjanjikan.

Ditambahkan oleh barlop
saya melihat itu (setelah ctrl-shift-I / F12), mengklik kanan <HTML..> or </HTML>tag dan mengklik "edit sebagai html". memungkinkan saya untuk mengedit di mana saja di dalamnya. Memilih tag pembuka berarti popup untuk mengedit hanya mencakup semua sumber html yang ada di sana - yang sangat rapi dalam hal ruang saat mengedit. Memilih tag penutup mungkin berguna karena popup kemudian muncul di bawah html sehingga Anda melihat sebelum / sesudah. Atau lebih baik, seperti kata Benjamin, F2 untuk mengedit, ctrl-enter untuk melakukan.

Coder Kasual
sumber
1
coba klik persis pada nama tag misalnya<body>
Casual Coder
1
Ini adalah alat debugging. Ini bukan alat pengeditan. Untuk membuat halaman gunakan sesuatu seperti Aptana, Netbeans atau IDE lain yang lebih cocok. Dengan pelengkapan tag, referensi, pelengkapan javascript dll. Ini adalah cara yang jauh lebih produktif untuk membuat halaman web. Jika Anda bersikeras menggunakan Alat Pengembang Chrome sebagai editor html Anda, ada copy as htmlopsi menu konteks. Jadi Anda dapat menempelkannya kembali ke editor teks utama pilihan Anda atau alat lain.
Casual Coder
1
Yang paling dekat dengan apa yang Anda bicarakan yang saya ketahui, adalah addon Firebug di Firefox. Di antara banyak berbagai alat debugging javascript / css / dom itu memberi Anda dalam menu konteks pada Open with Editoropsi halaman . Anda dapat menambahkan beberapa editor. Tentu saja Anda dapat mengonfigurasinya untuk menggunakan Notepad.
Casual Coder
2
itu sedikit lebih cepat menggunakan F2 untuk mengedit dan Ctrl + Enter untuk melakukan
Benjamin
1
F2 dan F2 lagi melakukan pekerjaan yang sama dengan Ctrl + Enter.
Frank Nocke
23
  1. buka DevTools.
  2. buka panel Elemen.
  3. pilih html atau badan atau elemen lain yang Anda inginkan.
  4. buka konsol oleh Esc.
  5. tulis $ 0.contentEditable = true

sekarang Anda dapat mengedit teks pada halaman dan memindahkan gambar tetapi bukan itu yang Anda inginkan :)

loislo
sumber
4
bukan yang saya inginkan, tapi itu fitur yang sangat lucu!
barlop
Apakah saya benar bahwa ini diaktifkan secara default di versi Chrome saat ini? Maksudku, aku sudah bisa mengedit di tab Elemen.
Alex
Saya baru saja memberi Anda +100 menggunakan fitur ini.
Benjamin
Fitur yang sangat luar biasa
iroel
@Benjamin Apakah Anda serius tentang +100 (yaitu apakah Anda memberinya suara tambahan di salinan lokal Anda jelas tidak akan berpengaruh pada situs itu sendiri tetapi tetap saja), itu akan menarik .. Bagaimana Anda melakukannya? atau apakah Anda membuat lelucon yang sangat buruk dan menyesatkan?
barlop
1

Anda dapat mencoba InlineEditor ini untuk mengedit dan menyimpan html statis di halaman browser di sini adalah demo

MKK
sumber
1

Jika Anda ingin mengedit file sebagai sumber html (dan bukan elemen individual) Anda dapat melakukan hal berikut:

  1. pilih tab 'Sumber' di sebelah kiri
  2. klik kanan di panel 'Sumber' dan pilih 'Tambah folder ke ruang kerja' dan tambahkan folder dengan file HTML sumber
  3. klik kanan file html yang ingin Anda edit dan pilih 'peta ke sumber daya jaringan'
Paul Troon
sumber
Ini adalah cara yang benar untuk berkembang di browser
sidonaldson