ส่งออกการเปลี่ยนแปลง CSS จากตัวตรวจสอบ (webkit, firebug ฯลฯ )

เมื่อฉันทำงานกับ CSS ฉันมักจะทดสอบในเบราว์เซอร์เช่น Chrome คลิกขวาที่องค์ประกอบคลิกตรวจสอบองค์ประกอบและแก้ไข CSS ที่นั่น การใช้ปุ่มลูกศรเพื่อเปลี่ยนสิ่งต่างๆเช่นระยะขอบและช่องว่างภายในทำให้การจัดเรียงสิ่งต่างๆทำได้ง่ายมาก

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

สิ่งนี้มีอยู่จริงหรือไม่?

ฉันพบคำตอบสำหรับสิ่งนี้แล้วอย่างน้อยก็ใน Chrome v14

ในส่วน Elements ให้คลิกที่ลิงก์ "filename: linenumber" ถัดจากกฎ CSS ไฟล์ CSS ที่แสดงจะมีการแก้ไขทั้งหมด

สถานที่นี้คือ:

ใน Chrome คุณสามารถคลิกขวาที่ไฟล์ CSS ในแท็บ Sources แล้วคลิก "Local Modifications"

สิ่งนี้แสดงให้คุณเห็นการเปลี่ยนแปลงทั้งหมดในท้องถิ่นของคุณ การแก้ไขแต่ละครั้งจะมีการประทับเวลาและคุณสามารถย้อนกลับไปยังการแก้ไขก่อนหน้าได้

ดูส่วนประวัติการแก้ไขและการแก้ไขสดของบทช่วยสอนนี้

Firediffเป็นส่วนเสริม Firebug ที่ติดตามการเปลี่ยนแปลงที่ทำใน Firebug มันบันทึกทุกสิ่งที่คุณจะทำในบานหน้าต่าง HTML (ดีมาก) แต่ยังใช้ส่วนขยาย Web Developer Toolbar สั้น ๆ (ไม่ค่อยดีนัก) พูด Shift-Ctrl-F เพื่อรับข้อมูลขนาดตัวอักษรเป็น px

ฉันเคยเห็นส่วนขยาย Firebug ใน Chrome แต่ไม่ได้ทดสอบฉันใช้ Firediff กับ Firefox

ฉันสร้างส่วนขยาย Chrome ที่ทำสิ่งนี้ได้

เรียกว่าStyleURL - ใช้การเปลี่ยนแปลง CSS ใด ๆ ก็ตามที่คุณทำใน Chrome Inspector และเอาต์พุต CSS ที่ถูกต้องตามความแตกต่าง: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

นี่คือตัวอย่างที่ฉันเพิ่ม "padding-bottom: 50px" ลงในหน้านี้:

เป็นโอเพ่นซอร์สและบน GitHub ด้วย: https://github.com/Jarred-Sumner/styleurl-extension

ใน Chrome ยังมีแท็บการเปลี่ยนแปลงในลิ้นชักคอนโซลที่แสดงการปรับเปลี่ยน CSS ทั้งหมด ไม่ใช่การส่งออก แต่อย่างน้อยก็สะดวกมากที่จะเข้าใจสิ่งที่เปลี่ยนแปลงไปอย่างรวดเร็ว

ฉันเคยแนะนำผลิตภัณฑ์นี้ใน SO มาก่อน (ฉันไม่ได้มีส่วนเกี่ยวข้องกับพวกเขา แต่อย่างใด)

http://www.skybound.ca/

ผลิตภัณฑ์ที่ยอดเยี่ยม ดูเหมือนสิ่งที่คุณกำลังมองหาและอื่น ๆ อีกมากมาย

แก้ไข:คำตอบอื่น ๆ อีกมากมายที่นี่ได้กล่าวถึงความสามารถของ Google Chrome ในการเชื่อมโยงไปยังไฟล์ในเครื่องของคุณ (ซึ่งยอดเยี่ยมมาก) ตรวจสอบคำตอบอื่น ๆ !

หากคุณแก้ไข CSS ภายนอกคุณสามารถลากการแก้ไขล่าสุดออกจากแผงทรัพยากรไปยังโปรแกรมแก้ไขข้อความใดก็ได้ที่รองรับ DnD (ดูhttp://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , ส่วน "การเปลี่ยนแปลงที่ยังคงอยู่" เพื่อดูรายละเอียดเพิ่มเติม) คุณสามารถเปลี่ยนการเปลี่ยนแปลง CSS ของคุณกลับไปเป็นทรัพยากรสไตล์ชีทเวอร์ชันก่อนหน้าได้ (ในเมนูป๊อปอัพคลิกขวาของการแก้ไขสไตล์ชีต)

ดังที่กล่าวไว้ใน cloudworks คำตอบของสิ่งนี้ได้เปลี่ยนไป ตอนนี้สามารถทำได้ค่อนข้างดีโดยส่วนขยายChrome DevTools Autosave เครื่องมือนี้ติดตามการเปลี่ยนแปลง CSS และ JavaScript ที่ทำในคอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และบันทึกกลับไปยังไฟล์ในเครื่อง สำหรับคำแนะนำในการติดตั้งและการติดตั้งส่วนขยายโปรดดูที่คู่มือที่เขียนโดย@addyosmaniในบล็อกของเขาที่นี่

นอกจากนี้ยังมีscreencast ที่มีประโยชน์ซึ่งให้รายละเอียดส่วนขยายค่อนข้างดี

ด้วยพื้นที่ทำงานคุณสามารถบันทึก CSS ของคุณเมื่อคุณพิมพ์ลงในตัวตรวจสอบของคุณ (ใน Chrome) ปัญหาคือการเปลี่ยนแปลงทุกอย่างจะได้รับการบันทึกโดยอัตโนมัติและไม่มีวิธีปิดใช้งานคุณลักษณะนี้ตามที่ระบุไว้ในhttp://www.html5rocks.com/en/tutorials/developertools/revolutions2013/และปิดใช้งานการบันทึกการเปลี่ยนแปลง CSS โดยอัตโนมัติใน Chrome Developer Tools .

ทั้ง Firefox และ Chrome สนับสนุนคุณลักษณะนี้ในขณะนี้ แต่ควรทราบว่าในบางแพลตฟอร์มหากไม่ใช่ Chrome ทั้งหมดไม่แสดงตามค่าเริ่มต้นคุณต้องเปิดใช้งานมุมมอง "การเปลี่ยนแปลง" เพื่อดู (ใน Kubuntu Linux 20.04 ของฉันไม่ใช่ ตามค่าเริ่มต้น) นี่คือวิธีที่คุณสามารถเปิดใช้งานได้โดยไปที่ปุ่ม"กำหนดค่าและควบคุม DevTools" ในแถบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์> "เครื่องมือเพิ่มเติม"> "การเปลี่ยนแปลง"จากนั้นแท็บจะปรากฏที่ปุ่ม:

ใน Firefox ไม่จำเป็นต้องเปิดใช้งาน แต่ถ้าคุณมาจากโลก Chrom * อาจจะหาได้ยาก เพียงตรวจสอบส่วนสุดท้ายทางด้านขวาที่แท็บ "ตัวตรวจสอบ":

หากคุณใช้ Firefox stock dev tools คุณสามารถแก้ไข css ได้โดยตรงในกล่องโต้ตอบ tools - คลิกปุ่ม CSS viewport (นั่นคือปุ่มที่ด้านบนพร้อม{}สัญลักษณ์) และแก้ไข css ของคุณโดยตรง จะอัปเดตแบบเรียลไทม์ในเบราว์เซอร์และเมื่อคุณทำเสร็จแล้วให้คัดลอกวางลงในไฟล์ css ของคุณโดยตรง ดี!

หากต้องการเพิ่มคำตอบสำหรับ Safari โดยเฉพาะเป็นไปได้

เมื่อคุณแก้ไข CSS ในส่วนสไตล์ในตัวตรวจสอบสำหรับไฟล์ CSS ที่มีอยู่คุณสามารถกดCmd-Sเพื่อบันทึกไฟล์ทั้งหมดอีกครั้งด้วยการเปลี่ยนแปลง อย่างไรก็ตามหากคุณใช้ภาษาเมตาเช่น Sass / preprocessor / สร้าง CSS ของคุณด้วยการรวมกลุ่ม ฯลฯ ฉันไม่คิดว่าวิธีนี้จะช่วยแก้ปัญหานั้นได้จริง ๆ แม้ว่าจะเป็นไปได้ด้วยซอร์สแมป CSS ก็ตาม

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

เอกสารแอปเปิ้ลอย่างเป็นทางการน้อยลงวัน แต่ก็พบว่าที่นี่: เว็บสารวัตร Tutorial - การแก้ไขรหัสวิธีการเปลี่ยนหน้าเว็บของคุณ

ใน Chrome ในตัวตรวจสอบ css คุณสามารถคลิกปุ่ม + ค้างไว้จากนั้นเลือกเพิ่มการเปลี่ยนแปลงของคุณลงในตัวตรวจสอบสไตล์ชีต ไม่สะดวกเท่าการแก้ไขโดยตรงใน css-selectors แต่สิ่งที่คุณเขียนทั้งหมดจะอยู่ใน inspector-stylesheet.css

LIVEditorผลิตภัณฑ์ในรุ่นเบต้าของฉันทำสิ่งนี้ได้

เพื่อให้คุณเข้าใจได้ง่ายคุณสามารถนึกถึงตัวตรวจสอบของ Firebug ที่ฝังอยู่ในโปรแกรมแก้ไขข้อความของคุณ

ด้วยวิธีนี้คุณไม่ต้องทำการเปลี่ยนแปลงด้วยตนเองอีกครั้งในโปรแกรมแก้ไขโค้ดของคุณหลังจากที่คุณปรับแต่งโดยใช้เครื่องมือสำหรับนักพัฒนาของ Firebug หรือ Webkit