Google Chrome เทียบเท่ากับ Firebug อย่างไร

29

ฉันกำลังมองหาเครื่องมือที่สามารถ:

ตรวจสอบองค์ประกอบ HTML
จัดการ / ดีบัก JavaScript
ประสิทธิภาพของโปรไฟล์
ปรับเปลี่ยนองค์ประกอบในเวลาจริง

32

มันสร้างขึ้นมาหน้า [กระดาษ] -> นักพัฒนา -> เครื่องมือสำหรับนักพัฒนา (ใน Chrome v5 ขึ้นไป) มีความเป็นไปได้ที่จะแตกต่างกันใน v6 เนื่องจากปุ่มหน้าดูเหมือนจะหายไปในรุ่นนั้น

— มาร์คฮัตตัน
แหล่งที่มา

3

มีข้อเสียบางอย่างสำหรับเครื่องมือของ Google - การรับชมอาแจ็กซ์นั้นไม่ใช่เรื่องง่ายไม่มีโหมดหลายบรรทัดที่สะดวกคุณไม่สามารถแก้ไข HTML ในหน้าต่างมันจะไม่แสดงช่องว่างภายใน / ขอบบนโฮเวอร์ในต้นไม้ HTML คุณไม่สามารถไปที่ DOM จริง ๆ (แค่ต้น HTML) และสุดท้าย แต่ไม่ท้ายสุดฉันพบว่า CSS มีคุณสมบัติการแก้ไขที่น่าเบื่อ - ไม่มีการเติมข้อความอัตโนมัติใน Google อย่างใดอย่างหนึ่ง มันยังคงใช้งานได้ดีมาก แต่ Firebug นั้นดีกว่า

— cgp

2

หรือ shift-ctrl-I สำหรับคนขี้เกียจ :)

— Tim Post

1

@Mark Note ฉันใช้ 5.0.375.99 ฉันไม่แน่ใจว่ามันจะสร้างความแตกต่างในขณะนี้หรือในอนาคต

— Evan Plaice

1

ใน v6 It's Wrench -> เครื่องมือ -> เครื่องมือสำหรับนักพัฒนา

— enobrev

17

คลิกขวา -> ตรวจสอบองค์ประกอบ

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

13

Firebug Lite สำหรับ Google Chrome

— เอ็มเม็ต
แหล่งที่มา

FireBug Lite เป็นเครื่องมือที่ยอดเยี่ยมและใช้งานได้ใน IE, Opera, Safari และ Firefox: getfirebug.com/firebuglite

— Nat Ryall

5

4 ปีแล้วตั้งแต่มีการถามคำถามเดิม Chrome (เสถียร) ตอนนี้อยู่ในเวอร์ชัน 38 เป็นเวลานานซึ่งได้รวมชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เต็มรูปแบบซึ่งเทียบเท่ากับ Firebug สำหรับ Firefox (แม้ว่า Firefox โดยบังเอิญจะมีตัวตรวจสอบในตัวด้วย)

เครื่องมือนักพัฒนาซอฟต์แวร์ของ Chrome ช่วยให้คุณทำสิ่งต่อไปนี้:

ตรวจสอบ DOM
ตรวจสอบ CSS
เข้าถึงคอนโซล JavaScript
ดีบัก JavaScript
ดูคำขอเครือข่ายเวลาและการตอบกลับ
ดูการเรนเดอร์ JavaScript และประสิทธิภาพ CSS
ตรวจสอบที่เก็บข้อมูลภายในและคุกกี้

เครื่องมือ dev สามารถเข้าถึงได้หลายวิธี

เมนู Chrome -> เครื่องมือ -> เครื่องมือสำหรับนักพัฒนา
Ctrl+ Shift+ Iใน Windows หรือCmd+ Shift+ Iบน Mac
F12 บน Windows
คลิกขวาที่ใดก็ได้บนหน้าแล้วเลือกตรวจสอบองค์ประกอบ

3

เครื่องมือในเบราว์เซอร์นั้นยอดเยี่ยมสำหรับงานของพวกเขาและมักจะเป็นตัวเลือกแรกที่ดีที่สุดของคุณ แต่บางครั้งพวกเขาก็ไม่ได้ให้รายละเอียดทางเทคนิคเพียงพอในส่วนของคำขอ / ตอบกลับ HTTP หรือเฉพาะหน้ามากเกินไป

ในกรณีเหล่านี้คุณอาจพบว่าเครื่องมือตรวจสอบ HTTP เฉพาะเช่นFiddlerหรือทางเลือกหนึ่งของLinuxจะให้ข้อมูลเชิงลึกมากขึ้น

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

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

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

— Evan Plaice

พู้ทำเล่นอยู่ใกล้กับเครื่องมือสำหรับนักพัฒนา firebug / chrome เพื่อการใช้งาน หนึ่งในสถานที่ที่ฉันพบว่ามีประโยชน์มากที่สุดคือเมื่อเผยแพร่ไฟล์ KML บนเว็บไซต์ของฉัน คุณสามารถดูคำขอและการตอบสนองจากแอปพลิเคชันเดสก์ท็อป Windows เช่น Google Earth ไม่ใช่เฉพาะเว็บเบราว์เซอร์ ฉันเคยใช้ Wireshark สองสามครั้ง แต่ยอมรับว่ามันไม่ได้มีประโยชน์สำหรับผู้ดูแลเว็บแบบวันต่อวัน

— JasonBirch

1

นอกจากนี้คุณยังสามารถลองใช้ Speed Tracer โอเพนซอร์ซของ Google - http://code.google.com/webtoolkit/speedtracer/

Speed Tracer เป็นเครื่องมือที่ช่วยคุณระบุและแก้ไขปัญหาด้านประสิทธิภาพในเว็บแอปพลิเคชันของคุณ มันแสดงให้เห็นภาพตัวชี้วัดที่นำมาจากจุดเครื่องมือวัดระดับต่ำภายในเบราว์เซอร์และวิเคราะห์พวกเขาขณะที่แอปพลิเคชันของคุณทำงาน Speed Tracer มีให้ใช้งานในฐานะส่วนขยายของ Chrome และทำงานได้บนทุกแพลตฟอร์มที่รองรับส่วนขยายในปัจจุบัน (Windows และ Linux)

การใช้ Speed Tracer ช่วยให้คุณได้ภาพที่ดีขึ้นว่ามีการใช้เวลาในแอปพลิเคชันของคุณอย่างไร ซึ่งรวมถึงปัญหาที่เกิดจากการแยกวิเคราะห์และการเรียกใช้ JavaScript โครงร่างการคำนวณสไตล์ CSS และการจับคู่ตัวเลือกการจัดการเหตุการณ์ DOM การโหลดทรัพยากรเครือข่ายการจับเวลาของตัวจับเวลา

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