JSFiddle - เครื่องมือทดสอบ Javascript, CSS, HTML ออนไลน์สำหรับนักพัฒนา

JSFIDDLE บริการสำหรับทดสอบ Javascript, CSS, HTML บน Web based เพื่อให้นักพัฒนาสามารถทดสอบ แชร์ โค้ดของตัวเองให้กับผู้สนใจ ตัว JSFIDDLE มี Javascript Library ยอดนิยมให้สามารถเลือกเพื่อทดสอบ ตัวอย่างเช่น JQuery, Mootools, YUI, Prototype, Dojo, ExtJS และอื่นๆ 

เริ่มต้นทำความรู้จักเมนูต่างๆ บน JSFIDDLE

เมนูด้านซ้าย สำหรับเลือก Frameworks & Extensions, External Resources, Languages ตามต้องการ

พื้นที่ด้านขวา เป็นช่องสำหรับใส่โค้ดที่ต้องการทดสอบ ประกอบด้วย HTML, CSS, Javascript, Result

เมนูด้านบน

• Run - ทำการประมวลผลและแสดงผลลัพธ์ที่ช่อง Result
• Save - บันทึกโค้ด เมื่อบันทึกเสร็จ จะทำให้สามารถ Share ได้
• TidyUp - ทำการจัด Format โค้ดภายในช่อง HTML, CSS, Javascript
• JSHint - ช่วยเหลือเมื่อโค้ดภายในช่อง Javascript ผิดพลาด
• Collaboration - ใช้สำหรับทำงานร่วมกัน

เริ่มต้นลองใช้งาน JSFIDDLE

1. ไปที่ http://jsfiddle.net/

2. เลือก Frameworks & Extensions เป็น jquery เวอร์ชั่นที่ต้องการ

3. ทดสอบนำโค้ดด้านล่างไปใส่ในช่องต่างๆ เมื่อใส่เสร็จกด Run ดูผลที่ช่อง Result 

HTML

<p>
   <span id="green" >share.</span>
   <span id="red" >olanlab</span>
   <span id="blue" >.com</span>
</p>

CSS

#green {
    color: green;
}

Javascript

$('#red').css('color', 'red');
$('#blue').css('color', 'blue');

Result

วิธีการ Share 

    JSFIDDLE สามารถ Share โค้ดที่เราทดสอบผ่าน link, iframe, Facebook, Twitter แต่ต้องทำการ Save เสียก่อน เมื่อ Save เสร็จเรียบร้อย จะมีปุ่ม Share ปรากฏขึ้นมาตามรูปด้านล่าง 

วิธีการสมัครสมาชิก JSFIDDLE
1. กดที่ปุ่ม Login/ Sign Up กรอกรายละเอียดเพื่อทำการลงทะเบียน

2. เมื่อลงทะเบียนเสร็จทำการ Login จะปรากฏหน้า Profile ของเรา ประโยชน์ของการเป็นสมาชิก เราสามารถ Save เพื่อเก็บโค้ดทดสอบไว้ใน Profile ได้ โดยจะแสดงที่ All your fiddles ดังรูป

จบการแนะนำวิธีการใช้งาน JSFIDDLE แบบง่ายๆ ครับ