GrabCSS: ดึง HTML และ CSS ที่สะอาดจากองค์ประกอบเว็บใด ๆ
GrabCSS โดย Schneider Damien เป็นส่วนขยายของ Chrome สำหรับการดึงรหัสส่วนประกอบจากหน้าเว็บสดอย่างรวดเร็ว มันคัดลอก HTML และ CSS ที่สะอาดและจัดรูปแบบเมื่อคุณชี้ไปที่องค์ประกอบ โดยแก้ไขตัวแปร CSS และกฎที่สืบทอดมาเพื่อให้ผลลัพธ์ทำงานได้อย่างอิสระสำหรับการสร้างต้นแบบ การตรวจสอบ และการเรียนรู้ ความสามารถรวมถึง Scoped CSS, Inline Styles, Tailwind output, การจับการเคลื่อนไหวและสถานะจำลอง การนำทาง DOM ด้วยแป้นพิมพ์ และการตรวจสอบความคอนทราสต์ WCAG เครื่องมือนี้มุ่งเป้าไปที่นักพัฒนาฝั่งหน้า นักออกแบบ UI/UX ผู้ตรวจสอบเว็บ และนักเรียนที่ต้องการรหัสส่วนประกอบที่อ่านได้อย่างรวดเร็ว。
สร้าง CSS ที่กระชับและอ่านได้โดยการละเว้นเสียงรบกวนที่คำนวณ
GrabCSS ดึงกฎที่มุ่งเน้น แทนที่จะเป็นรายการยาวของคุณสมบัติที่คำนวณซึ่งแสดงในแผงตรวจสอบเบราว์เซอร์ ส่วนขยายนี้จะทำการแก้ไขตัวแปร CSS และการประกาศที่สืบทอดเพื่อให้โค้ดทำงานได้อย่างอิสระ และจัดรูปแบบผลลัพธ์ให้เหมาะสมกับการทำงานทั่วไป ตัวแปรผลลัพธ์รวมถึงตัวเลือก CSS ที่มีขอบเขตซึ่งใช้ชื่อคลาสที่สะอาด ตัวเลือกสไตล์ในบรรทัด และตัวเลือกคลาส Tailwind CSS ซึ่งทำให้การปรับเปลี่ยนส่วนประกอบที่วางไว้ทำได้ง่ายกว่ารูปแบบที่คำนวณดิบ
รองรับการเลือกที่แม่นยำและการจับโค้ดอย่างรวดเร็วผ่านการควบคุมด้วยเมาส์และแป้นพิมพ์
ตัวเลือกจะแสดงแผงลอยเมื่อเปิดใช้งาน ทำให้คุณสามารถตรวจสอบองค์ประกอบโดยการเลื่อนเมาส์และคัดลอกโค้ดที่จัดรูปแบบด้วยการคลิก การนำทาง DOM ที่ขับเคลื่อนด้วยแป้นพิมพ์ใช้ลูกศรขึ้นและลูกศรลงเพื่อเคลื่อนที่ระหว่างองค์ประกอบหลักและองค์ประกอบย่อยเพื่อการกำหนดเป้าหมายที่แม่นยำ ตัวดึงข้อมูลจับการเคลื่อนไหว การเปลี่ยนแปลง และสถานะพิเศษเช่น :hover และการตรวจสอบความแตกต่างของ WCAG จะทำงานบนองค์ประกอบข้อความที่เลื่อนเมาส์ไปเพื่อช่วยในการตรวจสอบการเข้าถึงพื้นฐาน
ประมวลผลในเครื่อง, เหมาะกับการทำงานของ Chromium, และทำหน้าที่เป็นทางเลือก DevTools ที่เบา
การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยไม่มีการเก็บข้อมูลภายนอกและไม่ต้องการบัญชี ดังนั้นการจับภาพจึงยังคงอยู่ในเครื่อง ส่วนขยายนี้ติดตั้งบน Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่นๆ เช่น Microsoft Edge และ Brave ทำให้การเพิ่มเข้าไปในการตั้งค่าการพัฒนาที่มีอยู่ทำได้ง่าย นักพัฒนาวางเครื่องมือนี้เป็นทางเลือกที่เบาในการค้นหาผ่าน DevTools ซึ่งได้รับคำชมสำหรับผลลัพธ์ที่รวดเร็วและสะอาด การขาดการซิงค์ที่อิงจากบัญชีหมายความว่าการแชร์โค้ดที่รวมศูนย์ต้องใช้ขั้นตอนแยกต่างหาก
ตัวเลือกที่ใช้งานได้จริงสำหรับการทำงานของแต่ละบุคคล โดยมีการแลกเปลี่ยนสำหรับการแชร์ทีม
GrabCSS เป็นตัวเลือกที่เหมาะสมสำหรับผู้ปฏิบัติงานด้านหน้าและนักเรียนที่ต้องการชิ้นส่วนคอมโพเนนต์ที่สามารถแก้ไขได้ในเครื่องเดียว การออกแบบที่ใช้เฉพาะเบราว์เซอร์ช่วยให้ควบคุมในท้องถิ่นและการดึงข้อมูลที่รวดเร็ว แม้ว่าการออกแบบเดียวกันนี้จะหมายความว่าไม่สามารถให้การซิงโครไนซ์ตามบัญชีสำหรับห้องสมุดทีม หรือหลายอุปกรณ์ได้ เลือกใช้สำหรับการจับข้อมูลอย่างรวดเร็วและด้วยตนเอง; พึ่งพาห้องสมุดที่แชร์แยกต่างหากเมื่อจำเป็นต้องมีการแจกจ่ายร่วมกัน.
