ตัวแก้ไข CSS พร้อมการแสดงตัวอย่างแบบเรียลไทม์และการเลือกภาษาท้องถิ่น

ชื่อบอกทุกอย่างเกี่ยวกับสิ่งที่ฉันกำลังมองหา โดยทั่วไปควรเป็นซอฟต์แวร์ที่รวบรวมทุกรูปแบบของเว็บไซต์เพื่อให้ฉันสามารถแก้ไขและบันทึกได้

โปรดอ่านคำถามนี้อย่างถี่ถ้วนเพราะฉันต้องการให้มีการปฏิบัติตามเงื่อนไขที่ระบุไว้ทั้งหมด

แก้ไข:ฉันต้องการชัดเจนมากขึ้นที่นี่หรืออธิบายเวิร์กโฟลว์ที่ต้องการ สถานการณ์เริ่มต้นคือคุณมีแหล่งที่มาของเว็บไซต์ในเครื่องของคุณ
ตอนนี้ฉันต้องการเปิดแหล่งที่มาธรรมดา (HTML / CSS) ในตัวแก้ไขของฉัน / IDE / อะไรก็ตาม (ไม่มี WYSIWYG!) และฉันต้องการดูตัวอย่างแบบสดถัดจากมันหรือในหน้าต่างอื่น (ไม่ใช่ในแท็บอื่น!) ฉันต้องการดูมันในขณะที่ฉันแก้ไขต้นฉบับ ภาพตัวอย่างควรอัปเดตโดยอัตโนมัติ (หรือเมื่อฉันบันทึกไฟล์ซึ่งโดยพื้นฐานแล้วจะเหมือนกันเพราะ CTRL + S เป็นแบบ reflex: P)
นอกจากนี้ควรมีผู้ตรวจสอบที่ทำงานเหมือนใน Firebug หรือ Chrom (e | ium) เมื่อฉันคลิกที่ตัวเลือก CSS ในตัวตรวจสอบนั้นเคอร์เซอร์ควรข้ามไปทางขวาในไฟล์ต้นฉบับที่เกี่ยวข้อง

อีกแก้ไข:พบนี้https://stackoverflow.com/q/4680109/220652 เกือบจะเป็นปัญหาเดียวกัน

มีตัวเลือกน้อย

ปัจจุบันฉันใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ( Action Video ) ของ Google Chromeเพียงอย่างเดียวเนื่องจากสามารถตรวจสอบได้หลากหลายรายงานโดยละเอียดและครอบคลุมมากกว่า หลังจากทำการเปลี่ยนแปลงฉันเพิ่งคัดลอก CSS ที่อัปเดตแล้วเขียนทับส่วนที่เกี่ยวข้องของไฟล์ CSS รีเฟรชและเสียบต่อไป

ที่นี่ฉันได้แก้ไขคำจำกัดความในเครื่องมือนักพัฒนาซอฟต์แวร์ของ Chrome

ฉันสามารถติดตามชื่อไฟล์และหมายเลขบรรทัด (หลังจากคัดลอกการเปลี่ยนแปลง) และวางลงในโปรแกรมแก้ไข

นอกเหนือจากนั้นยังมีเครื่องมือที่เพิ่งเปิดตัวซึ่งเรียกว่าWebPuttyซึ่งออกแบบมาเพื่อบรรเทาปัญหาที่คุณอธิบายไว้ ในขณะที่ฉันไม่ได้ใช้มันเอง แต่มันก็พัฒนาโดยโจ Spolskyบริษัทหมอกครีซอฟแวร์ (โจเอลยังเป็นผู้ร่วมก่อตั้งของ StackOverflow) ดังนั้นผมจึงต้องการจะยินดีที่จะเดิมพันมันเป็นมีเสถียรภาพค่อนข้างง่ายและผลิตภัณฑ์ที่มีประสิทธิภาพ

ดูเหมือนว่าคำถามนี้จะมีการพูดคุยกันแล้ว แต่คุณกำลังพูดถึง CSS Editor เป็นพิเศษ และฉันมั่นใจว่านั่นเป็นเหตุผลที่พวกเขาไม่ได้ทำเครื่องหมายคำถามของคุณว่าซ้ำซ้อน

อย่างไรก็ตามสิ่งที่ฉันสามารถแนะนำคุณคือการใช้เครื่องมือต่าง ๆ ที่ฉันได้โพสต์ในคำตอบสำหรับคำถามอื่น ๆ เช่นนี้: Dreamweaver ทางเลือกในอูบุนตู? และแม้กระทั่งเมื่อฉันสามารถเดิมพันที่คุณได้เห็นมันฉันถอดเทปที่นี่เพื่อความสะดวกของคุณ:

คำถามของคุณดูเหมือนจะคลุมเครือเล็กน้อย

ก่อนอื่นและเกี่ยวข้องกับทางเลือกของ Dreamweaver ฉันพบคำแนะนำทั้งหมดของคำตอบอื่น ๆ ที่ยอดเยี่ยม แต่เมื่อมองหาทางเลือก Dreamweaver แอปพลิเคชันที่ใกล้เคียงที่สุด - สำหรับฉัน - เป็นโครงการAmaya ซึ่งดูเหมือนจะร่ำรวยกว่าทางเลือกอื่น ๆ และซับซ้อนกว่า Kompozer เล็กน้อย

ภาพหน้าจอจากเว็บอย่างเป็นทางการพร้อมให้คุณเห็นจริง

สามารถเข้าถึงภาพหน้าจอเพิ่มเติมได้โดยคลิกที่ลิงค์ถัดไป: http://www.w3.org/Amaya/sc Screenshots/Overview.html

คุณอาจพบว่ามันไม่เสถียรหรืออย่างน้อยก็สำหรับฉัน แต่มันก็อาจจะเหมาะกับความต้องการของคุณ

หลังจากเล่นกับบรรณาธิการ WYSIWYG ฉันชอบเข้ารหัสโดยตรงกับ BlueFish แต่ไม่ใช่ WYSIWYG editor

และเกี่ยวกับข้อเสนอแนะสำหรับปัญหาของคุณกับ firebug ฉันไม่สามารถพูดอะไรได้ขอโทษ

โปรดแจ้งให้เราทราบว่าคุณจะทำอย่างไรถ้าคุณให้โอกาสกับ Amaya

โชคดี!

แก้ไข == หลังจากติดตั้ง Amaya แล้วฉันพบว่ายังไม่เสถียร แต่อย่างใดดูเหมือนว่าจะมีคุณสมบัติที่ดีกว่าแอพพลิเคชั่นอื่น ๆ หากคุณพิจารณาว่าซอฟต์แวร์อื่นเป็นตัวแก้ไขข้อความอย่างง่ายและ Amaya ก็เหมือนโปรแกรมแก้ไขแบบ WYSIWYG

ฉันทดสอบสิ่งที่คุณพูดในความคิดเห็นของคุณและฉันพบว่า Amaya ไม่ได้สังเกตว่ามีบางอย่างเปลี่ยนแปลงในโครงสร้าง / ชื่อ / ไฟล์ ซึ่งไม่ตรงกับความต้องการของคุณที่เกี่ยวข้องกับสิ่งนี้

ในภาพหน้าจอถัดไปคุณสามารถเห็นฉันเปลี่ยนชื่อโฟลเดอร์ "resources" เป็น "resources1" และ Amaya ยังแสดงเป็น "resources" และไม่มีวิธีใดที่จะบังคับให้รีเฟรช แม้หลังจากรีสตาร์ทซอฟต์แวร์และโหลดโครงการอีกครั้ง Amaya จะไม่สังเกตเห็น

ฉันจะติดตามคำถามของคุณอย่างใกล้ชิดโดยหวังว่าจะมีใครบางคนเข้ามาและทิ้งทางเลือกที่ดี

โชคดี!

นอกจากนี้ในคำตอบของผู้ใช้คนอื่น ๆ กับคำถามเดียวกันฉันพบ " Blue Griffon Web Editor " ซึ่งดูเหมือนจะเป็นโปรแกรมแก้ไขเว็บที่มีเสถียรภาพเพียงตัวเดียวที่มีหน้าต่างแสดงตัวอย่างแบบเรียลไทม์ซึ่ง -btw- ไม่สามารถมองเห็นได้ในโหมดแยก . คุณสามารถเห็นโค้ดหรือตัวอย่าง WYSIWYG ไม่ใช่ทั้งสองอย่างในเวลาเดียวกัน

วางภาพหน้าจอที่นี่เพื่อความสะดวกของคุณ:

หน้าจอตัวอย่าง:

หน้าจอรหัส:

เครื่องมือนี้มีเครื่องมือที่มีประโยชน์มากมาย แต่ส่วนเสริมหรือปลั๊กอินบางตัวอาจไม่ปลอดค่าใช้จ่าย ซึ่งช่วยลดแรงดึงดูดให้กับมัน

Aptana Studio 3ซึ่งผมแนะนำในคำตอบนี้: การพัฒนาเว็บพื้นฐาน IDE / บรรณาธิการเช่น Dreamweaver? สำหรับฉัน - เครื่องมือที่ดีที่สุดสำหรับการเขียนโปรแกรมเนื่องจากฉันสามารถดูตัวอย่างแบบสดโดยใช้เว็บเบราว์เซอร์ในเดสก์ท็อปแบบขยายมุมมองสองมุมมองของฉัน ซึ่งอาจไม่ใช่กรณีของคุณ

นั่นคือสิ่งที่ฉันสามารถแนะนำ ขออภัยถ้าสิ่งนี้ไม่ตรงกับความต้องการของคุณและ ...

โชคดี!

ตกลงทุกคนฟัง! Geanyนั้นยอดเยี่ยมมาก! มันมีปลั๊กอินที่เพิ่มตัวอย่างเบราว์เซอร์ คุณสามารถวางไว้ในแถบด้านข้างใน "bottombar" หรือในหน้าต่างพิเศษ และตอนนี้คุณสมบัติพิเศษของสองนักฆ่า ass bad bad 1.เบราว์เซอร์นี้ใช้ WebKit นั่นหมายความว่ามีผู้ตรวจสอบที่ยอดเยี่ยมคนนี้! 2.เบราว์เซอร์จะโหลดซ้ำเมื่อคุณบันทึกเอกสารที่เปิดอยู่

นอกจากนี้ยังมีคุณสมบัติที่ยอดเยี่ยมอื่น ๆ อีกมากมาย แต่คุณควรลองด้วยตัวเอง ฉันคนหนึ่งตกหลุมรัก ที่นี่คุณมีภาพหน้าจอ:

ขออภัยผู้คน แต่ฉันจะตอบคำถามของฉันเอง ฉันเพิ่งพบStylebot มันตรงตามเงื่อนไขเกือบทั้งหมดที่ฉันมี มันไม่มีความสมบูรณ์แบบอัตโนมัติ แต่ฉันสามารถอยู่กับมันได้

นี่คือภาพหน้าจอ แถบด้านข้างคือ Stylebot คุณมีโหมดแก้ไขพื้นฐานที่คุณสามารถแก้ไขคุณสมบัติพื้นฐานบางอย่างได้อย่างรวดเร็วซึ่งเป็นโหมดขั้นสูงที่คุณสามารถแก้ไข CSS ธรรมดาสำหรับองค์ประกอบที่เลือกและด้วย "แก้ไข CSS" คุณสามารถแก้ไข CSS ทั้งหมดสำหรับหน้าได้

ลอง Firefox addon Firediff มันทำงานร่วมกับ Firebug เพิ่มแท็บ "การเปลี่ยนแปลง" ซึ่งเป็นชื่อเหมือนเซนที่แสดงให้เห็นถึงการเปลี่ยนแปลงใด ๆ ที่คุณทำกับ CSS หรือ DOM

คลิกขวาที่การเปลี่ยนแปลง CSS ในแท็บ "การเปลี่ยนแปลง" เพื่อบันทึก diff หรือ snapshot ของการเปลี่ยนแปลงของคุณ

นอกจากนี้ยังมีcssUpdaterแต่ฉันไม่ได้ใช้

ในฐานะที่เป็น "ตัวเลือกการแปล" ผมไม่แน่ใจว่าทั้งหมดสิ่งที่คุณหมาย แต่มีselectBugซึ่งคุณสามารถดาวน์โหลดได้ที่นี่

Aptana Studio เป็น IDE ที่ยอดเยี่ยม แต่ถ้าฉันไม่ผิดมันไม่มีพรีวิวแบบเรียลไทม์ อย่างไรก็ตามหากคุณสนใจ: http://www.aptana.com/products/studio3

PS: มันมีชุดคีย์ลัดสำหรับดูตัวอย่างดังนั้นจึงไม่ใช่เรื่องใหญ่

ไม่ใช่ซอฟต์แวร์ตามความเหมาะสม แต่ Stylish Addon (chrome และ firefox) จะอัปเดตหน้าโดยอัตโนมัติเมื่อคุณบันทึกสไตล์ชีทแทนที่ ซึ่งแตกต่างจาก FireBug แต่จะบันทึกเพื่อให้คุณสามารถคัดลอกและวางลงใน.cssไฟล์ที่เหมาะสมเมื่อคุณพอใจ

เมื่อไม่กี่สัปดาห์ที่ผ่านมามีผู้เล่นหน้าใหม่เพิ่มเข้ามาในสาขานี้ ฉันกำลังพูดถึงตัวแก้ไขโค้ดโอเพนซอร์สของ Adobe ข้อมูลทั้งหมดที่คุณต้องการที่นี่: https://github.com/adobe/brackets/wiki/Linux-Version

เวอร์ชั่น spring30 เพิ่งเปิดตัวเมื่อไม่กี่วันที่ผ่านมา :) ขอให้โชคดี!