ฉันมีปัญหานี้ตลอดไปและในที่สุดก็ตัดสินใจว่าเราไม่ควรแก้ไขสิ่งต่าง ๆ ในเว็บสารวัตรและสร้างบางสิ่งให้มัน ( https://github.com/viatropos/design.io )
ทางออกที่ดีกว่า:
เบราว์เซอร์โดยอัตโนมัติสะท้อนให้เห็นถึงการเปลี่ยนแปลง CSS โดยไม่ต้องโหลดเมื่อคุณกดบันทึกในโปรแกรมแก้ไขข้อความของคุณ
เหตุผลหลักที่เรากำลังแก้ไข css ในตัวตรวจสอบเว็บ (ฉันใช้ webkit แต่ FireBug อยู่ในแนวเดียวกัน) เพราะเราต้องทำการปรับเปลี่ยนเล็กน้อยและใช้เวลาโหลดหน้าเว็บนานเกินไป
มี 2 ปัญหาหลักของวิธีนี้คือ ขั้นแรกคุณจะได้รับอนุญาตให้แก้ไของค์ประกอบที่อาจไม่มีidตัวเลือก ดังนั้นแม้ว่าคุณจะสามารถคัดลอก / วาง CSS ที่สร้างขึ้นจากตัวตรวจสอบเว็บก็จะต้องสร้างidเพื่อขอบเขต CSS สิ่งที่ต้องการ:
#element-127 {
background: red;
}
นั่นจะเริ่มทำให้ CSS ของคุณยุ่งเหยิง
คุณสามารถแก้ไขได้โดยการเปลี่ยนสไตล์สำหรับตัวเลือกที่มีอยู่เท่านั้น ( .spaceตัวเลือกคลาสในรูปภาพของผู้ตรวจสอบ webkit ด้านล่าง)
แต่ถึงกระนั้นปัญหาที่สอง อินเทอร์เฟซสำหรับสิ่งนั้นค่อนข้างหยาบยากที่จะทำการเปลี่ยนแปลงครั้งใหญ่ - เช่นถ้าคุณต้องการลองคัดลอกบล็อก css นี้ไปยังสถานที่นี้หรืออะไรก็ตาม
ฉันอยากติด TextMate
อุดมคติคือเพียงแค่เขียน CSS ในเท็กซ์เบราว์เซอร์ของคุณและให้เบราว์เซอร์แสดงการเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าซ้ำซ้ำ วิธีนี้คุณจะเขียน CSS สุดท้ายของคุณเมื่อคุณทำการเปลี่ยนแปลงเล็กน้อย
ระดับถัดไปคือการเขียนในภาษา CSS แบบไดนามิกเช่น Stylus, Less, SCSS, ฯลฯ และให้อัปเดตเบราว์เซอร์ด้วย CSS ที่สร้างขึ้น วิธีนี้คุณสามารถเริ่มสร้างมิกซ์อินได้box-shadow()ที่แยกความซับซ้อนซึ่งผู้ตรวจสอบเว็บทำไม่ได้แน่นอน
มีบางสิ่งที่ทำแบบนั้น แต่ไม่มีอะไรที่ทำให้เพรียวลมในความคิดของฉัน
- LiveReload : กด css ไปยังเบราว์เซอร์โดยไม่ต้องรีเฟรชเมื่อคุณกดบันทึก แต่เป็นแอป macดังนั้นจึงเป็นการยากที่จะปรับแต่ง
- CodeKit : เป็นแอป mac ด้วย แต่จะรีเฟรชเบราว์เซอร์ทุกครั้งที่คุณบันทึก
การไม่มีความสามารถในการปรับแต่งวิธีการทำงานเหล่านี้เป็นเหตุผลหลักที่ฉันไม่ได้ใช้มัน
ฉันรวบรวมhttps://github.com/viatropos/design.ioโดยเฉพาะเพื่อแก้ไขปัญหานี้และทำให้เป็นเช่นนั้น:
- เบราว์เซอร์จะแสดง css / js / html / etc ทุกครั้งที่คุณบันทึกโดยไม่ต้องโหลดหน้าซ้ำ
- สามารถจัดการแม่แบบ / ภาษา / กรอบงานใด ๆ (Stylus, Less, CoffeeScript, Jade, Haml, ฯลฯ )
- มันเขียนใน JavaScript และคุณสามารถรวมส่วนขยายจริง ๆ อย่างรวดเร็วใน JavaScript
ด้วยวิธีนี้เมื่อคุณต้องการเปลี่ยนแปลง CSS เล็กน้อยคุณสามารถพูดตั้งค่าสีพื้นหลังกดบันทึกดูไม่ไม่ปรับฮิว 10 ปรับบันทึกไม่ปรับ 5 ปรับบันทึกดูดี
วิธีการทำงานคือการเฝ้าดูทุกครั้งที่คุณบันทึกไฟล์ (ที่ระดับ OS) ประมวลผลไฟล์ (นี่คือที่ที่ส่วนขยายทำงาน) และผลักข้อมูลไปยังเบราว์เซอร์ผ่าน websockets ซึ่งได้รับการจัดการแล้ว ส่วนขยาย)
ไม่เสียบหรืออะไร แต่ฉันต่อสู้กับปัญหานี้เป็นเวลานานลา
หวังว่าจะช่วย
