เครื่องมือสร้าง

เครื่องมือสร้าง — เครื่องมือนักพัฒนาฟรี 10 รายการบนเบราว์เซอร์ เช่น ตัวสร้าง UUID, Hash ID และข้อมูลจำลอง ประมวลผลในเครื่อง ข้อมูลเป็นส่วนตัว

10 เครื่องมือ

ตัวสร้าง UUIDสร้าง UUID เวอร์ชัน 1, 4 และ 7 ทีละหลายรายการพร้อมตรวจสอบความถูกต้อง สร้างอย่างปลอดภัยด้วย crypto.getRandomValues สูงสุด 1,000 รายการต่อครั้ง ใช้ฟรี

ตัวสร้าง Hash IDสร้างรหัสสุ่มสั้นแบบ nanoid ที่ปลอดภัยกับ URL กำหนดความยาวและชุดอักขระ สร้างทีละตัวหรือหลายตัวพร้อมกันแล้วคัดลอกไปใช้เป็นคีย์และ slug ใช้ฟรี

ตัวสร้างข้อมูลจำลองเครื่องมือสร้างข้อมูลจำลองออนไลน์ฟรีด้วย faker.js สร้างชื่อ อีเมล และที่อยู่ปลอมที่สมจริง เลือกฟิลด์ที่ต้องการแล้วส่งออกข้อมูลทดสอบเป็น JSON, CSV หรือ SQL

ตัวสร้างรหัส QRแปลงข้อความหรือ URL เป็นภาพคิวอาร์โค้ด ปรับขนาด ระดับการแก้ไขข้อผิดพลาด และสีพื้นหน้ากับพื้นหลังได้ ดาวน์โหลด PNG ได้ทันที ใช้ฟรี

ตัวสร้าง Faviconสร้าง favicon จากข้อความ อิโมจิ หรือสี เลือกฟอนต์ พื้นหลัง และรูปทรง แล้วดาวน์โหลดไอคอน PNG หลายขนาดพร้อมใช้กับเว็บไซต์ ใช้ฟรีในเบราว์เซอร์

ตัวสร้างคลื่น SVGสร้างคลื่น SVG ด้วยตัวแก้ไขแบบภาพ ปรับความสูง สี และจำนวนชั้น ใช้พรีเซ็ตสำเร็จรูป แล้วคัดลอกโค้ด CSS และ SVG ไปทำพื้นหลังหรือตัวคั่น ใช้ฟรี

ตัวสร้าง CSS Gradientสร้าง CSS gradient แบบภาพ ทั้ง linear, radial และ conic เพิ่มจุดสี ปรับมุม แล้วคัดลอก CSS ไปใช้กับพื้นหลังและปุ่มได้ทันที ใช้ฟรีในเบราว์เซอร์

ตัวสร้าง CSS Box Shadowเครื่องมือสร้าง CSS box-shadow ออนไลน์ฟรี ปรับ offset, blur, spread, สี และ inset พร้อมพรีวิวเงาเรียลไทม์และคัดลอกโค้ด CSS ได้ทันที

ตัวสร้าง CSS Border Radiusสร้าง CSS border-radius ด้วยจุดควบคุมมุมอิสระ 8 จุดและตัวเลื่อน ดูตัวอย่างมุมโค้งแบบเรียลไทม์ และคัดลอกโค้ด CSS ไปใช้ได้ทันที ใช้ฟรีในเบราว์เซอร์

ตัวสร้าง CSS Flexboxสนามทดลอง CSS Flexbox ปรับ justify-content, align-items, flex-direction และ wrap แบบภาพ ดูเลย์เอาต์เรียลไทม์ และคัดลอกโค้ด Flexbox ได้ทันที ใช้ฟรี

วิธีใช้งาน

1
ปรับค่าด้วยตัวควบคุมภาพ— ลากแถบเลื่อนและจุดจับของไล่เฉดสี เงา ความมนของมุม หรือเลย์เอาต์ flexbox ตัวอย่างจะอัปเดตทุกครั้งที่ปรับ จึงกะค่าด้วยสายตาได้
2
คัดลอกโค้ดที่สร้างได้— ตัวสร้างแต่ละตัวเขียน CSS ให้พร้อมวางลงสไตล์ชีต ส่วนตัวสร้างคิวอาร์โค้ด favicon และคลื่น SVG จะส่งออกเป็นไฟล์สำหรับใส่ในโปรเจกต์
3
สร้างรหัสระบุและข้อมูลทดสอบทีละมาก ๆ— กดครั้งเดียวได้ UUID หรือ Hash ID สั้น ๆ เป็นชุด หรือสร้างเรกคอร์ดจำลองเป็น JSON และ CSV เพื่อเติมตารางระหว่างทดสอบ

คำถามที่พบบ่อย

ถ้าค่านั้นจะเป็นคีย์หลัก ให้ใช้ v7 เพราะขึ้นต้นด้วยเวลาแบบมิลลิวินาที แถวใหม่จึงเรียงติดกันในดัชนี B-tree แทนที่จะกระจายไปตามหน้าแบบสุ่มเหมือน v4 แต่ถ้าตัวระบุต้องไม่เปิดเผยเวลาที่สร้าง เช่น โทเคนสำหรับแชร์แบบสาธารณะ ให้ใช้ v4

จริง ทั้งสองใช้ crypto.getRandomValues() ซึ่งเป็นตัวสร้างเลขสุ่มที่ปลอดภัยเชิงรหัสลับของเบราว์เซอร์ ไม่ใช่ Math.random() ตัวสร้างรหัสผ่านยังแสดงค่าเอนโทรปีเป็นบิต ทำให้เห็นได้ว่าความยาวและชุดอักขระที่เลือกแข็งแรงพอหรือไม่

ได้ ตัวสร้างเกรเดียนต์ เงากล่อง ความโค้งมุม และ Flexbox จะแสดงผล CSS มาตรฐานคู่กับตัวอย่างแบบเรียลไทม์ และคุณสมบัติเหล่านี้ไม่ต้องใช้ vendor prefix บนเบราว์เซอร์ปัจจุบันแล้ว ส่วนตัวสร้างคลื่น SVG จะให้ทั้งโค้ด SVG และ CSS ที่ต้องใช้เมื่อนำไปทำพื้นหลัง