แก้ไข CSS ใน In-Browser ด้วย CSS George

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

นั่นคือสิ่งที่ CSS George เข้ามาฟรี เครื่องมือแก้ไขในเบราว์เซอร์ โรงงาน น้อยกว่า และมันริเริ่มโดย ไฟล์ JavaScript ง่าย ๆ.

นักพัฒนาส่วนใหญ่ชอบ เครื่องมือแก้ไขเบราว์เซอร์ เนื่องจากไม่ใช่ทุกคนที่ใช้ precompiler ของ LESS แต่ CSS George ทำงานในสภาพแวดล้อมที่มีค่าน้อย ซึ่งสามารถติดตั้งได้อย่างรวดเร็ว ผ่าน npm.

หากคุณมีการติดตั้ง NPM แล้วคุณสามารถเรียกใช้รหัสง่ายๆนี้เพื่อ เพิ่มไฟล์ต้นฉบับ โครงการปัจจุบันของคุณ:

 npm ติดตั้ง - บันทึก-dev css-george 

หรือคุณสามารถ ดึง George.js ไฟล์ จาก GitHub ที่โฮสต์อยู่ข้างไฟล์ต้นฉบับอื่นทั้งหมด โครงการทั้งหมดฟรีและโอเพนซอร์สเพื่อให้คุณสามารถ ดาวน์โหลดสำเนาทั้งหมด จาก GitHub หากคุณไม่ต้องการใช้ NPM.

กับ .js ไฟล์ถูกเพิ่มไปยังส่วนหัวของเว็บไซต์ของคุณคุณสามารถเริ่มต้น การใช้งานฟังก์ชันของ George ได้จากเบราว์เซอร์ ไปยัง เปิดหน้าต่างตัวแก้ไข, คลิกปุ่มตัวหนอนซึ่งสามารถเข้าถึงได้จาก Shift + 'ซึ่งอยู่ที่มุมซ้ายบนของคีย์บอร์ดส่วนใหญ่ หน้าต่างใหม่ ควรปรากฏที่มีลักษณะดังนี้:

จากหน้าจอนี้คุณสามารถ แก้ไขตัวแปร LESS ใช้สำหรับทุกสิ่งตั้งแต่สีจนถึงขนาดแบบอักษรหรือตระกูลแบบอักษร.

นี่คือที่ปลั๊กอินน้อยกว่า กลายเป็นสิ่งจำเป็น เพราะคุณต้องบอก CSS George ตัวแปรที่จะรวม. เมื่อพวกเขาตั้งค่าคุณก็สามารถทำได้ เปิดตัวแก้ไขเบราว์เซอร์ CSS George และไปที่เมือง.

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

คุณสามารถ เห็นมันมีชีวิตอยู่ ในหน้าตัวอย่าง CSS George หรือ ดาวน์โหลดสำเนาทั้งหมด ผ่าน npm หรือจาก repo ของ GitHub.