วิธีค้นหาองค์ประกอบ DOM โดยใช้ตัวเลือก XPath หรือ CSS ใน Chrome Developer Tools

116

เอกสารhttp://code.google.com/chrome/devtools/docs/elements.htmlระบุว่ารองรับ XPath หรือ CSS selectors แต่เมื่อฉันลองแล้วดูเหมือนจะไม่ได้ผลสำหรับฉัน

มีใครรู้วิธีใช้ไหม

dom google-chrome google-chrome-devtools

— Bobo
แหล่งที่มา

คำตอบ:

263

คุณสามารถใช้$xในคอนโซลจาวาสคริปต์ของ Chrome ไม่จำเป็นต้องมีส่วนขยาย

อดีต: $x("//img")

— Matt Polito
แหล่งที่มา

นี่คือคำตอบที่เป็นประโยชน์ หากต้องการเพิ่มเข้าไปฟังก์ชัน $ x ยอมรับอาร์กิวเมนต์ที่เป็นทางเลือกที่สองบริบท $ x (xpath, context) สิ่งนี้ช่วยให้คุณสามารถเลือกเนื้อหา iframe ที่เฉพาะเจาะจงได้เช่นและเรียกใช้แบบสอบถาม xpath กับมัน ดังนั้นสำหรับ iframe แรก: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath สอบถามว่า iframe สำหรับเซลล์ตาราง: $ x ("// td", myframe);

— Adolph Trudeau

ในการค้นหาองค์ประกอบด้วยตัวเลือก CSS ควรใช้ฟังก์ชัน $$ console เช่น $$ ('body')

— user907860

สามารถดูคำสั่งเพิ่มเติมได้ที่นี่: developers.google.com/chrome-developer-tools/docs/…

— Dmitry Polushkin

กลับมาที่คำถามนี้หลังจากผ่านไปเกือบ 2 ปีใช่คำถามนี้ดีกว่า

— Bobo

ดีมากสำหรับการดีบัก XPaths! อย่างไรก็ตาม$x()ฟังก์ชันนี้ทำงานใน API บรรทัดคำสั่งของ Safari ด้วย

— Otto G

เพียงแค่พิมพ์ xpath expression ในช่องค้นหาก็น่าจะใช้ได้ มันใช้ได้ผลสำหรับฉันในการสร้างปลายต้นไม้

ดูเหมือนว่าคุณลักษณะนี้จะใช้งานไม่ได้ใน Chrome 11 แต่ฉันได้ยื่นข้อบกพร่องเกี่ยวกับสิ่งนี้: http://crbug.com/79716

— Yury Semikhatsky
แหล่งที่มา

คุณพูดถูก มันใช้งานได้ แต่ฟีเจอร์ไฮไลต์เสีย ฉันใช้ chrome 10.0. * บน Mac os X

— Bobo

คำตอบที่ดีกว่าโดย Mark Polito ด้านล่าง

— FGM

ใช้ได้กับ Chrome 32 ไปที่แท็บ Element ของ devtool แล้วกด CTRL + S แล้วค้นหา xpath

— eeezyy

@eeezyy คุณหมายถึง ctrl + f?

— กล่อง

$x('xpathSelector')สำหรับการใช้งานค้นหา XPath $('cssSelector')สำหรับการใช้งานเลือก CSS

อย่างไรก็ตามตัวเลือกสุดท้ายนี้ส่งกลับเฉพาะองค์ประกอบที่ตรงกันแรก หากคุณต้องการดูองค์ประกอบที่ตรงกันทั้งหมดให้ไปที่$$('cssSelector')

— จาม
แหล่งที่มา