เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome: จะค้นหาสิ่งที่เอาชนะกฎ CSS ได้อย่างไร


196

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

ฉันต้องการที่จะทราบว่าจะมีอะไรที่เหมือน"แสดงให้ฉันเห็นสิ่งนี้แทนที่"

OBS: ได้ โปรดอย่าชี้ให้ฉันไปที่ Firebug


2
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ยังแสดงให้คุณเห็นกฎการเอาชนะ
Zoltan Toth

คำตอบ:


284

ใช้แผงลักษณะที่คำนวณของตัวตรวจสอบองค์ประกอบ ขยายคุณสมบัติที่น่าสนใจเพื่อดูรายการกฎที่ใช้บังคับและข้อใดที่ชนะ

ภาพหน้าจอของ Chrome


สำหรับฉันแท็บที่คำนวณถูกเปิดโดยค่าเริ่มต้นและดังนั้นจึงไม่ได้ระบุว่าเป็นแท็บควรมีส่วนหัว 'คำนวณ' มิฉะนั้นคุณอาจกำลังมองหาเป็นเวลานาน
MrFox

1
เทคนิคมีการเปลี่ยนแปลงเล็กน้อยเมื่อ Chrome มีระดับสูง แทนที่จะเป็น 'ขยายคุณสมบัติที่น่าสนใจ' ให้คลิกที่กระจกสอดแนมถัดจากคุณสมบัติและจะแสดงให้เห็นว่ารูปแบบใดจะกลับคืนในแท็บสไตล์
intotecho

3
@intotecho: Chrome 47 คืนค่าส่วนขยายในแท็บคำนวณเนื่องจากการเปลี่ยนการดูดของแว่นขยาย crbug.com/496263
josh3736

จะทำอย่างไรถ้าพวกเขาทั้งหมดถูกยกเลิก อาจเป็นเพราะสคริปต์หรือไม่? คุณจะรู้ได้อย่างไรว่าใครเป็นคนทำ?
darkgaze

ยังคงมีอยู่ในแท็บ "คำนวณ" บนแผงองค์ประกอบ
josh3736

7

คุณสามารถดูชื่อที่มีชื่อเดียวกันซึ่งไม่ได้ขีดเส้นใต้ไว้ได้โปรดจำไว้ว่ารายชื่อนั้นสำคัญมาก

หรือคุณสามารถดูสไตล์ที่คำนวณได้ พวกเขาจะเป็นสไตล์ที่ใช้จริง


2

crtrl + shift + c และตรวจสอบองค์ประกอบ จากนั้นค้นหาสไตล์ที่ไม่มีเส้นผ่านในช่องที่มุมขวาล่าง

การแทนที่อยู่ในกรณีส่วนใหญ่ที่ด้านบน (และไม่มีบรรทัดผ่านเนื่องจากสไตล์นี้คือ "การชนะ" อย่างใดอย่างหนึ่ง)


4
ไม่ใช่กรณีเมื่อสไตล์ถูกตั้งค่าสถานะเป็น! important
JCorriveau
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.