เวลาเราแก้ theme ใน exteen หรือเว็บไซต์ต่างๆ เราจะใช้ CSS กันทั้งนั้น ซึ่งการแก้โค้ดบางคนชำนาญก็สบายไป แต่บางคนยัง งงๆ กับ CSS ที่โค้ดมากมาย วันนี้ผมจะมาแนะนำเครื่องมือที่จะช่วยประหยัดเวลาลงได้

1.)Rapid CSS


เป็นโปรแกรมที่เอาไว้แก้ CSS โดยเฉพาะ(แต่แก้ไฟล์อื่นได้) เป็นโปรแกรมครอบจักรวาล อารมณ์เดียวกับ Editplus แต่ความสามารถในการแก้ CSS มันเยอะกว่ามากมาย แถมเลือก Preview ได้ตามสะดวกว่าจะให้ Output เป็น IE หรือ Internet Explorer

2.)CSS Viewer (Firefox Extension)

เป็น Extension(โปรแกรมเสริมใน Firefox) ซึ่งมีไว้เพื่อส่องว่า ส่วนไหนของเว็บไซต์ที่เราดูอยู่ ใช้ CSS ส่วนไหน แล้วมีค่าต่างๆ(ขนาด/ความยาว/ความสูง/สี ฯลฯ) อะไรบ้าง เรียกได้ว่า ส่องมันทั้งหน้าเลย แถมมันตีกรอบให้เราด้วยว่าส่องอะไรอยู่ !!! แจ่มครับ โหลดที่นี่

3.Edit CSS (Firefox Extension)

เป็น Extension อีกเช่นกัน แต่ตัวนี้ไม่ได้ไว้ส่องดูความสูง แต่เรียกดูโค้ดแล้วมาแก้ แล้วจะแสดงผลลัพธ์ทันทีใน Firefox เลย แต่ตัวนี้จะมีผลเสียกับเว็บที่ใช้ CSS อ้างอิงด้วย URL แบบไม่เต็มเช่น ./test.gif เป็นต้น มันจะไม่แสดงให้ ยกเว้นถ้า URL เต็มรูปแบบ เช่น http://www.test.com/test.gif แต่ผมก็ไว้แก้ได้สดๆเลย เสียเวลาน้อยลง โหลดที่นี่

4.X-Ray (Java Script)

ตัวนี้เป็น Java Script ซึ่งต้องรันขณะที่ต่อเน็ตอยู่เท่านั้น (เพราะ Script อยู่ที่อื่น) ซึ่งหลักการคล้าย CSS Viewer แต่ ตัวนี้จะมีขีดแสดงความกว้างยาวให้เราเห็น แถม Highlight ได้ชัดเจนมากเลยครับ แต่ข้อเสียคือ รายละเอียดไม่ชัดเจนเท่า CSS Viewer

วิธีการใช้ คือไปที่เว็บที่เราต้องการส่อง แล้วกดลิงค์ที่เราลากไว้ที่ Bookmarks Toolsbar แล้วคลิกเลือกวัตถุใน Webที่เราต้องการส่องได้เลย ลากลิงค์นี้ไปไว้ที่ Bookmarks Toolsbar

5.ColorZilla (Firefox Extension)

ถึงแม้ตัวนี้จะไม่เกี่ยวกับ CSS โดยชัดเจน แต่ก็เป็น Extension ที่เหมาะไว้วัดค่าสีอย่างรวดเร็วในหน้าเว็บที่เราต้องการ โดยลืมวิธีการเก่าๆที่ต้อง print screen > Paste ใน Photoshop > ใช้ eyedropper วัดสี โอยยยยุ่งยากจริงๆ 55+ใช้ Color Zilla ก็จบเลยครับ โหลดที่นี่

 

เพิ่มเติมจากคอมเมนต์ครับ ขอบคุณครับ

6.)Firebug (Firefox Extension)

 

 

Firefox Extension อีกตัวที่ไว้แก้ CSS,HTML,Javascript ได้ดีเยี่ยมผมลองแล้วคิดว่า work กว่าตัวข้างบนอีก 555+ แถมแก้แแล้วดูผลลัพธ์ได้เลย โดยสามารถดูความเร็วในการโหลดวัตถุต่างๆในเว็บของเรา เช่น css,รูปภาพ,javascript ต่างๆ จุดเด่นอีกจุดคือ เวลาเราแก้แล้วเอาเมาส์ไปวางในโค้ด CSS จะมี Thumbnail รีวิวเล็กๆขึ้นมาว่าเป็นสีอะไร หรือเป็นรูปอะไร แจ่มดีครับ โหลดที่นี่

 7.)Web Developer(Firefox Extension)

 

 

 จะบอกว่าอันนี้สุดยอดจริงๆครับ !!! สุดยอด extension เลยแหละ ความสามารถรอบตัวจริงๆ สามารถเปิด/ปิดวัตถุในเว็บเพจต่างๆได้หมดเลย เช่นรูป/Script หรือแม้กระทั่งการไม่สนใจสี Font !!! สิ่งที่ชอบคือเรื่องการ Resize หน้าจอครับเพราะผมใช้ 1024*768 เวลาทำเว็บจะต้องย่อ Browser ไปที่ขนาด 800*600 ซึ่งมันก็ไม่แน่นอนเหมือนกัน แต่ Extension ตัวนี้ทำได้หมดเลยครับ แต่อารมณ์ดู CSS เหมือนไปดู RSS เลยแฮะ :P มันมาในรูปแบบ Toolsbar ครับ เครื่องมือเยอะมากสุดยอดจริงๆ !!! โหลดที่นี่

 

ทั้งหมดนี้ก็เป็นเครื่องมือที่เหมาะไว้สำหรับเวลาแก้ CSS นะครับ จะสังเกตว่า มี Tools ที่ใช้กับ Firefox ทั้งนั้น !!! แนะนำเลยครับ ใครที่ยังใช้ Internet Explorer อยู่ เปลี่ยนมาใช้ Firefox กันเถอะครับ คนทำเว็บเหนื่อยมาก :P เพราะ IE เรื่องมากสุดๆ T_T

ถ้าใครมีโปรแกรมเพิ่มเติมที่แจ่มกว่าก็คอมเม้นท์ไว้นะครับ ^^ จะได้เอาไว้ใช้งานด้วย

ปล.แถวนี้มีใครรู้จัก AKB48 รึเปล่าครับ ถ้ารู้จักส่งเสียงหน่อยนะครับ :P

Comment

Comment:

Tweet

ฮาได้ใจ สุดๆไปเลย แต่ก็แอบเครียดนะครับเจอแบบนี้
เพิ่งเจอเหตุการณ์แบบนี้สดๆร้อนๆเพื่อนบ้านผมเลย มีอัพไว้ในบล้อคผมล่ะครับ

#32 By Chevrolet Manual Steering Rack (122.168.56.248) on 2012-03-24 18:34

ทำไงดีคะ แก้ css แล้วบล็อกเสียหมดเลยง่ะ

#31 By M a y J i i2 on 2010-12-17 16:48

Excellent & remarkable post!
I have been visiting various blogs for my Book report help. I have found your blog to be quite useful. Keep updating your blog with valuable information....... Regards

#30 By Book report help (182.178.0.2) on 2010-10-04 12:39

กำลังคิดจะเปลี่ยนธีมพอดีเลยครับ
แต่ทำ CSS ไม่ค่ยเป็น
ได้ความรู้มากเลยครับconfused smile

#29 By Ratcicle on 2007-10-20 12:02

โหลด Firefox มาแล้น แต่ไม่รุ้คิดไปเองรึเปล่า รู้สึกว่ามันช้ากว่า IE และ Safari (ซึ่งปกติไม่ได้ใช้กับ exteen) อ่ะ เลยไม่ค่อยได้ใช้ แต่ถ้าต้องแก้โค้ดในเครื่องแม็คก็จะใช้ firefox อ่ะค่ะ

#28 By ++ r o s i f i x ++ on 2007-10-20 02:51

อื่ม อ่านๆๆเหมือนอ่านหนังสือเรียน
แต่ แค่เก็บ รายชื่อเพื่อนให้หายไป เรายังทำไม่ได้ แล้วอย่างอื่นจะเหลือเหรอ อื่ม เศร้าๆๆๆ โง่จริงเรื่องพวกนี้
ปล. มาเชียงใหม่เมื่อไรให้บอก กินซีสเค้กกัน

#27 By ลนล on 2007-10-19 21:59

ขอบคุณสำหรับโปรแกรมดีๆคร่า อิอิ

#26 By ฺBear-killer on 2007-10-19 19:28

โอ้พระเจ้ายอดมันจอร์จมากเลยค่ะ
ขอบคุณมากเลยนะคะ
ไว้จะลองไปใช้ดูค่ะ big smile

#25 By Bowajung on 2007-10-19 16:24

มาสเตอร์พูดโดนมาก

#24 By [ พี โพ แคน ] on 2007-10-19 14:39

โอ้ว~ ปกติงมเอาเองหมด

ได้เครื่องมืออำนวยความสะดวกซะที ขอบคุณมากจ้า ^ ^

#23 By DreamChaser on 2007-10-19 14:10

ใช้เหมือนมาสเตอร์แชมป์ครับ

#22 By Maxtrix™ on 2007-10-19 13:14

ใช้แมค ไม่มีอะไรให้ใช้เลยนอกจาก webdev tool กับ firebug ของ firefox กับ debug mode ของ safari
ทำแล้วก็ไปติดปัญหาที่ IE อีก เซ็งเจงๆ ง้อยย sad smile

#21 By หนึ่งในเทเลทับบี้ส์ (58.10.33.149) on 2007-10-19 11:48

ผมใช้ Dreamweaver CS3 ครับ sad smile
ส่วนจัดรูป css ใช้ Microsoft Office SharePoint Designer 2007 ครับ sad smile

แต่ว่ายังไงก็ขอบพระคุณสำหรับคำแนะนำดีๆ มากๆ ครับ CSS Viewer นี่น่าใช้มากมาย

#20 By kunemata on 2007-10-19 11:03

ขอบคุณที่แนะนำค่ะ เจ๋งมากจะเอาไปใช้บ้าง

#19 By uregus on 2007-10-19 10:46

confused smile confused smile ยอดมากๆๆๆๆๆ

#18 By zero-be on 2007-10-19 09:08

ว้าว น่าสนใจมากเลยค่ะ ช่วงปิดเทอม(อันน้อยนิด)เราคงได้ลองใช้งานดู เพราะอยากทำให้บล็อกสวยงามกว่านี้อ่ะค่ะ ขอบคุณนะคะที่มีอะไรดี ๆ มาฝากเสมอ ๆ เลย big smile
เครื่องมือแจ่มๆ ทั้งนั้น โดยเฉพาะคนใช้ Firefox
ผมถนัดดรีมกับ notepad แล้วสั่ง validate กับ W3C

#16 By n-blue (124.120.14.109) on 2007-10-19 02:28

ว้าวลองศึกษาดูมั่งดีกว่า
จาทำได้ไหมเนี่ย >_<'

#15 By 0uo on 2007-10-19 02:03

โอ้วที่รอคอย....confused smile

แจ่มมักเลยครับ...


ว่าแต่กำลังหัดใช้ editPlus อยู่เลย....sad smile

#14 By MONKIJI321 on 2007-10-19 00:30

ปกติใช้ firebug กับ web developer tool อะครับ


เหมือนกันเลยครับ
ปัญหาโลกแตกมักจะเกิดกับ แสดงผลใน Firefox /IE6 /IE7 ไม่เหมือนกัน T____T

!important ก็ไม่ค่อยมีประโยชน์เท่าไรเลย เง้ออ

#13 By CybErPunK (124.120.103.170) on 2007-10-18 23:56

ขอบคุณนะครับ ได้ิยินกิตติศัพท์มานานแล้ว extension ของ firefox เนี่ย งานนี้ได้โหลดมาลองแล้วล่ะ

#12 By เจ้าชายน้อย on 2007-10-18 23:55

รับไปลองใช้ดูครับbig smile
เผื่อจะได้แก้ css ได้ง่ายขึ้นsad smile

#11 By worapoj@~@ on 2007-10-18 23:49

ผมใช้ web developer tool confused smile

#10 By เอกน้อย on 2007-10-18 23:32

เหนือมาก แต่ใช้ไม่เป็นอยู่ดี

#9 By ข้าวฟ่าง on 2007-10-18 23:09

โห มีประโยชน์มั่กๆค่ะ

กำลังท้ออยู่พอดี ว่ามันย่งยากชะมัด

#8 By TheDoctorWearsPrada on 2007-10-18 22:59

extension ที่ชื่อ web developer ของไฟร์ฟอกซ์สุดยอดครับ.. จัดการได้ทั้ง image, css , java ให้มัน disable เพื่อดูบัคของหน้าเวบ หน้าบลอกเราได้

#7 By palermos on 2007-10-18 22:53

ผมว่า IE ไม่ใช่เรื่องมากหรอก แต่ IE โง่แล้วอวดฉลาด (ไปแก้นู่น แก้นี่ ที่ไม่ควรจะแก้ ไปคิดแทนผู้ใช้) มากกว่า

แต่ยังไงคนทำเว็บก็ต้องทำซัพพอร์ตหมดอยู่ดี เซ็ง sad smile
sad smile
ผมอ้างอิงจาก w3schools ตลอดเลยครับ
บางทีก็เล่นง่าย
ไปเปิด css ชาวบ้านมาศึกษา

#5 By AkE on 2007-10-18 22:49

ลืม Firebug ไปได้ไงเนี้ย - -"

#4 By meddlesome_ on 2007-10-18 22:48

แนะนำ firebug ค่ะ ดีมากๆ เป็น Firefox extension ค่ะ big smile

#3 By เจนเนสซ่า on 2007-10-18 22:46

ปกติใช้ firebug กับ web developer tool อะครับ
พระเจ้าจอร์จมันยอดมาก wink

เอาไปลองใช้มั้งดีกว่า confused smile

#1 By mimie-chan on 2007-10-18 22:42