การแก้ไขซอร์สโค้ด HTML ด้วย Google Chrome


34

ใน Internet Explorer ฉันสามารถเปิดไฟล์. html แบบโลคัลและแก้ไขได้โดยเลือก "แหล่งที่มา" ในเมนู "มุมมอง" ทำการเปลี่ยนแปลงอย่างรวดเร็วจากนั้น "รีเฟรช" (โหลดซ้ำ) หน้าเว็บ

ฉันจะทำเช่นนั้นกับ Google Chrome ได้อย่างไร

ฉันสามารถเปิดไฟล์. html ใน Windows Notepad ได้หรือไม่ (ฉันชอบ Notepad เพราะมันเร็วจริงๆ)

คำตอบ:


27

Ctrl+Shift+I or F12-> องค์ประกอบมันควรจะแสดงที่มาของคุณ คลิกขวาที่องค์ประกอบใดก็ได้แล้วคลิกEdit as HTML

แก้ไข:

มีส่วนขยายบางอย่างที่ดูเหมือนว่าคุณต้องการ: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor& Live WebSite Editorดูมีแนวโน้ม

เพิ่มโดย barlop
ฉันเห็นว่า (หลังจาก ctrl-shift-I / F12) คลิกขวาที่<HTML..> or </HTML>แท็กและคลิก "แก้ไขเป็น html" อนุญาตให้ฉันแก้ไขที่ใดก็ได้ภายในนั้น การเลือกแท็กเปิดหมายถึงป๊อปอัปสำหรับการแก้ไขครอบคลุมเฉพาะแหล่ง html ทั้งหมดที่มี - ซึ่งมีความประณีตในแง่ของพื้นที่เมื่อทำการแก้ไข การเลือกแท็กปิดอาจมีประโยชน์เมื่อป๊อปอัปปรากฏขึ้นภายใต้ html เพื่อให้คุณเห็นก่อน / หลัง หรือดีกว่าอย่างที่เบนจามินบอกไว้ F2 เพื่อแก้ไข ctrl-enter เพื่อคอมมิท


1
ลองคลิกที่ชื่อแท็กอย่างแน่นอน<body>
Casual Coder

1
นี่คือเครื่องมือดีบั๊ก มันไม่ใช่เครื่องมือแก้ไข สำหรับการสร้างหน้าใช้แอพทานา Netbeans หรือ IDE ที่เหมาะสมกว่า ด้วยความสมบูรณ์ของแท็ก, การอ้างอิง, ความสมบูรณ์ของจาวาสคริปต์ ฯลฯ นี่เป็นวิธีที่มีประสิทธิภาพมากขึ้นในการสร้างหน้าเว็บ หากคุณยืนยันที่จะใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เป็นเครื่องมือแก้ไข html ของคุณจะมีcopy as htmlตัวเลือกเมนูตามบริบท ดังนั้นคุณสามารถวางกลับไปที่โปรแกรมแก้ไขข้อความหลักที่คุณเลือกหรือเครื่องมืออื่น ๆ
Coder ที่ไม่เป็นทางการ

1
สิ่งที่คุณกำลังพูดถึงอยู่ใกล้เคียงที่สุดที่ฉันรู้คือ Firebug addon ใน Firefox ในบรรดาเครื่องมือการดีบัก javascript / css / dom ที่หลากหลายนั้นจะให้คุณในเมนูบริบทในOpen with Editorตัวเลือกหน้า คุณสามารถเพิ่มบรรณาธิการหลายคน แน่นอนคุณสามารถกำหนดค่าให้ใช้ Notepad
Coder ชั่วคราว

2
มันเร็วกว่าเล็กน้อยเมื่อใช้ F2 เพื่อแก้ไขและ Ctrl + Enter เพื่อคอม
มิชชัน

1
F2 และ F2 ทำหน้าที่เดียวกันกับ Ctrl + Enter อีกครั้ง
Frank Nocke

23
  1. เปิด DevTools
  2. เปิดองค์ประกอบแผง
  3. เลือก html หรือ body หรือองค์ประกอบอื่นที่คุณต้องการ
  4. เปิดคอนโซลโดย Esc
  5. เขียน $ 0.contentEditable = true

ตอนนี้คุณสามารถแก้ไขข้อความบนหน้าและย้ายรูปภาพได้ แต่ไม่ใช่ที่คุณต้องการจริงๆ :)


4
ไม่ใช่สิ่งที่ฉันต้องการ แต่มันเป็นคุณสมบัติที่น่าสนุกมาก!
barlop

ฉันถูกใช่ไหมว่านี่เป็นค่าเริ่มต้นใน Chrome รุ่นปัจจุบัน? ฉันหมายความว่าฉันสามารถแก้ไขได้ในแท็บองค์ประกอบ
Alex

ฉันเพิ่งให้คุณ +100 โดยใช้คุณสมบัตินี้
Benjamin

คุณสมบัติที่น่าทึ่งจริงๆ
iroel

@Benjamin คุณจริงจังกับ +100 (เช่นคุณให้คะแนนพิเศษแก่เขาในสำเนาของคุณอย่างเห็นได้ชัดว่าไม่ได้มีผลกระทบกับเว็บไซต์ แต่ยังคง) ซึ่งน่าสนใจ .. คุณทำเช่นนั้น? หรือว่าคุณกำลังทำเรื่องตลกที่ไม่ดีและทำให้เข้าใจผิด?
barlop

1

คุณสามารถลอง InlineEditor นี้เพื่อแก้ไขและบันทึก html คงที่ในหน้าเบราว์เซอร์ที่นี่คือการสาธิต


1

หากคุณต้องการแก้ไขไฟล์เป็นแหล่ง html (และไม่ใช่องค์ประกอบแต่ละรายการ) คุณสามารถทำสิ่งต่อไปนี้:

  1. เลือกแท็บ 'แหล่งที่มา' ทางด้านซ้าย
  2. คลิกขวาในบานหน้าต่าง 'แหล่งที่มา' และเลือก 'เพิ่มโฟลเดอร์ในพื้นที่ทำงาน' และเพิ่มโฟลเดอร์ที่มีไฟล์ HTML ต้นทาง
  3. คลิกขวาที่ไฟล์ html ที่คุณต้องการแก้ไขและเลือก 'แมปไปยังทรัพยากรเครือข่าย'

นี่เป็นวิธีที่ถูกต้องในการพัฒนาในเบราว์เซอร์
sidonaldson
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.