เพิ่มใน Chrome
← กลับไปยังคุณสมบัติ
Free

ตรวจสอบ CSS

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

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox

ไม่ว่าคุณจะแก้ไขปัญหาเลย์เอาต์ ศึกษาดีไซน์ หรือตรวจสอบค่าต่างๆ CSS Inspector ให้ทุกอย่างในแผงลอย

ตัวอย่างสด
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
คุณสมบัติหลัก

ดูคุณสมบัติเรียลไทม์

เลื่อนเมาส์ไปบนองค์ประกอบใดก็ได้เพื่อดู CSS ที่คำนวณแล้วทั้งหมด — ฟอนต์ ขนาด ความสูงบรรทัด สี พื้นหลัง padding margin border และอื่นๆ คุณสมบัติอัปเดตแบบเรียลไทม์

คลิกเพื่อล็อค

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

แก้ไขสไตล์สด

ดับเบิลคลิกค่า CSS เพื่อแก้ไขโดยตรง เปลี่ยนสี ปรับระยะห่าง แก้ไขฟอนต์ — การเปลี่ยนแปลงจะมีผลทันที

คัดลอกคลิกเดียว

คัดลอกคุณสมบัติเดียวหรือทั้งบล็อกสไตล์ไปยังคลิปบอร์ดด้วยคลิกเดียว ผลลัพธ์เป็น CSS ที่จัดรูปแบบแล้วพร้อมใช้

แสดง Box Model

ดู Box Model ทั้งหมด — เนื้อหา padding border และ margin — แสดงเป็นภาพพร้อมค่าพิกเซลทุกด้าน

ขนาดและตำแหน่ง

ดูความกว้าง ความสูง และตำแหน่งบนหน้า กรอบขอบเขตจะถูกเน้นด้วยการซ้อนแบบกึ่งโปร่งใส

สิ่งที่คุณสามารถตรวจสอบได้

CSS Inspector แสดงค่า 40+ คุณสมบัติ CSS:

ตัวอักษร

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Box Model

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

เลย์เอาต์

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

พื้นหลัง

  • background-color
  • background-image
  • background-size
  • background-position

เอฟเฟกต์

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
กรณีการใช้งานทั่วไป

แก้ไขปัญหาเลย์เอาต์

เลื่อนเมาส์ไปบนองค์ประกอบที่จัดตำแหน่งผิดเพื่อดูค่า padding margin และตำแหน่งทันที

เรียนรู้จากดีไซน์

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

ทดลองดีไซน์เร็ว

ใช้การแก้ไขสดเพื่อทดสอบการเปลี่ยนแปลงก่อนเขียนโค้ด ลองขนาดฟอนต์ สี หรือระยะห่างต่างๆ

รีวิวและ QA

ตรวจสอบว่าการใช้งานตรงกับ mockup ตรวจค่าพิกเซล ขนาดฟอนต์ และสีอย่างแม่นยำ

ดึงสไตล์สำหรับคอมโพเนนต์

ตรวจสอบองค์ประกอบอ้างอิง คัดลอกคุณสมบัติ CSS ทั้งหมดและวางเป็นสไตล์พื้นฐานของคอมโพเนนต์

วิธีใช้งาน
1

เปิดใช้งาน CSS Inspector

เปิด dock ลอยของ DevSuite Pro และคลิกไอคอน CSS Inspector เครื่องมือจะเปิดใช้งานทันที

2

สำรวจด้วยเมาส์

เลื่อนเมาส์ไปบนองค์ประกอบ แผงลอยจะแสดงชื่อแท็ก คลาส ขนาด และคุณสมบัติ CSS

3

คลิกเพื่อล็อคแผง

คลิกองค์ประกอบที่ต้องการตรวจสอบ แผงจะล็อคและไม่หายไปเมื่อขยับเมาส์

4

แก้ไขสไตล์สด

ดับเบิลคลิกค่า CSS พิมพ์ค่าใหม่แล้วกด Enter หน้าจะอัปเดตทันที

5

คัดลอกและใช้งาน

คลิกไอคอนคัดลอกหรือใช้ปุ่ม คัดลอก CSS ทั้งหมด วางลงในไฟล์ CSS ของคุณ

พร้อมที่จะลองหรือยัง? ตรวจสอบ CSS?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox