ฉันเป็นนักพัฒนาเว็บมือใหม่และฉันได้รับคำแนะนำให้ใช้ Firebug สำหรับการดีบักหลายครั้ง อย่างไรก็ตามจนถึงตอนนี้ฉันเพิ่งใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในตัวของ Chrome ดูเหมือนว่าจะทำทุกอย่างที่ Firebug ทำและสะอาดและเป็นระเบียบมากขึ้นเพื่อเป็นโบนัส
เมื่อฉันได้รับขั้นสูงมากขึ้นในการดีบั๊กมีฟีเจอร์ใดบ้างที่ Firebug มีที่ฉันจะพลาดใน DevTools ของ Chrome ถ้าเป็นเช่นนั้นพวกเขาคืออะไร?
ที่เกี่ยวข้อง: โปรแกรมแก้ไขจุดบกพร่องคล้าย Firebug สำหรับ Google Chrome
คำตอบ:
ฉันใช้ Firebug ตั้งแต่เริ่มต้นและมันเป็นสิ่งที่มาจากสวรรค์เช่นการประดิษฐ์ของไฟ แต่แล้ว Chrome ก็ออกมาพร้อมกับดีบักเกอร์และฉันก็ลองดู ฉันยังคงใช้ Firebug แต่คอยจับตาดูเครื่องมือ dev ของ Chome และในที่สุดก็ไม่สามารถหาเหตุผลที่จะไม่เปลี่ยนหลังจากเพิ่มเครื่องมือ JSON ใน v12 ได้อีกต่อไป
DevTools ของ Chrome เตะก้นเพราะมี:
อัปเดต: 2 ปีต่อมาฉันต้องแสดงความยินดีกับทีม Firefox ที่มีการรุกคืบครั้งใหญ่ กล่าวได้ว่าทีม Chrome และดีบักเกอร์ก้าวกระโดดไปข้างหน้าเป็นประจำทุกเดือนซึ่งเป็นผู้นำในอุตสาหกรรม ฉันจะอัปเดตรายการด้านบน แต่ตรงไปตรงมามันจะเต็มทั้งหน้า
ฉันไม่ได้พบกับคุณสมบัติ Firebug ที่ฉันพลาดไปหลังจากเปลี่ยนมาใช้ Chrome
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เข้ามาแทนที่คุณลักษณะของ Firebug ดังนั้นคุณลักษณะหลักและความคุ้นเคยทั้งหมดจึงอยู่ที่นั่น (เช่น$0และconsoleวัตถุ)
มีความแตกต่างเล็กน้อยเช่น DevTools ไม่มีแผงCSS (แม้ว่าสไตล์ชีต CSS สามารถจัดการได้ในแผงองค์ประกอบ )
เครื่องมือ Chrome นอกจากนี้ยังมีเส้น , โปรไฟล์และการจัดเก็บข้อมูลการติดตั้ง เส้นล็อกแผงโหลดการแสดงผล CSS และ JavaScript แยก โปรไฟล์โปรไฟล์แผงการใช้ทรัพยากรและการจัดเก็บข้อมูลที่แสดงให้เห็นแผงและช่วยให้การเปลี่ยนแปลงในฐานข้อมูลของเว็บไซต์ที่จัดเก็บในท้องถิ่นจัดเก็บเซสชั่นและคุกกี้
ในที่สุดเครื่องมือทั้งสองมีความแปรปรวนเล็กน้อยของตัวเองซึ่งทำให้การกระทำต่างๆง่ายขึ้นหรือยากขึ้นเล็กน้อย คำแนะนำของฉันคือใช้ Firebug สำหรับ Firefox และ DevTools สำหรับเบราว์เซอร์ Webkit เนื่องจากมีเพียง Firebug Lite เท่านั้นที่ใช้งานได้บน Chrome และไม่มีคุณสมบัติหลายอย่างที่ Firebug ปกติมี (และ DevTools มีอยู่ใน Chrome)
ฉันรู้สึกสบายใจขึ้นมากเมื่อใช้ Firebug ฉันไม่สามารถคิดเฉพาะเจาะจงได้ในขณะนี้ แต่บางครั้งฉันจะลองแก้จุดบกพร่องบางอย่างใน Safari หรือ Chrome และดูเหมือนว่า PITA จะเปิด Firefox และทำอะไรก็ได้อย่างรวดเร็ว
แท็บ DOM เป็นข้อดีสำหรับหนึ่ง เข้าถึงได้ง่ายกว่าและจัดวางได้ดีกว่า Chrome ที่เทียบเท่า ฉันชอบวิธีบันทึก DOM และออบเจ็กต์ JS อื่น ๆ ลงในคอนโซลใน Firebug ด้วย
ปลั๊กอิน Firebug อย่าง Pixel Perfect ก็มีประโยชน์มากเช่นกัน ฉันไม่รู้ว่ามีเครื่องมือดังกล่าวสำหรับ Chrome หรือไม่
โดยรวมแล้วไม่สำคัญเพราะคุณต้องทดสอบในเบราว์เซอร์ทั้งสองอย่างไรก็ตาม และ IE ก็อาจเปรียบเทียบกับเครื่องมือ Dev ของ IE ได้เช่นกัน (ซึ่งได้รับการปรับปรุง แต่ก็ยังไม่ดีเมื่อเทียบกับ FF หรือ Webkit)
ฉันไม่คิดว่าจะมีอะไรล้ำยุคโดยเฉพาะใน Firebug แต่ไม่ใช่ใน Chrome ที่คุณจะพลาด
แก้ไข : สิ่งนี้เคยเป็นจริง แต่ Chrome Dev Tools ใช้งานได้
Firebug สามารถค้นหาในสคริปต์ทั้งหมดที่โหลดบนเพจ เครื่องมือ Chrome Dev สามารถค้นหาในสคริปต์ที่เลือกในปัจจุบันคือ AFAIK เท่านั้น
เท่าที่ฉันสามารถบอกได้ Firebug เป็นเพียงคนเดียวที่สามารถแก้ไขโค้ด HTML และข้อความได้ขณะที่คุณพิมพ์ มีประโยชน์มากเช่นคุณกำลังพยายามดูว่าข้อความจะพอดีกับคอนเทนเนอร์อย่างไรและเพิ่มทีละอักขระ
ใน Chrome เมื่อคุณแก้ไข HTML คุณต้องกด TAB หรือ ENTER เพื่อออกจาก "โหมดแก้ไข" และดูการเปลี่ยนแปลงในหน้าของคุณ
ใน Firebug คุณสามารถป้อนโค้ด HTML ได้ทันที ใน Chrome คุณต้องคลิกขวาและเลือก "แก้ไข HTML" มิฉะนั้นจะแสดงเป็น <b> ตัวหนา </b>
ฉันต้องการเปลี่ยนเป็น Chrome จริงๆเนื่องจากดูเหมือนว่าจะทำงานได้เร็วขึ้น แต่การแก้ไขสดนั้นสำคัญเกินไปสำหรับฉัน
ไฟบักการเลือกเมาส์นั้นยอดเยี่ยมมาก แต่ฉันหาไม่พบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
มันรบกวนฉันเพราะฉันไม่พบฮอตคีย์สำหรับมันใน firebug ในขณะที่โครเมี่ยมขาดมันอย่างสมบูรณ์
ฉันเป็นนักพัฒนา noob ดังนั้นจึงยังคงใช้เมาส์เป็นส่วนใหญ่ในการพัฒนา
ในเวลานั้นคำถามนี้ถูกถามว่า Firebug เป็นสัตว์ร้าย แต่ตอนนี้ Chrome Developer Tools (DevTools) มีประโยชน์สำหรับนักพัฒนาเว็บ แม้ว่าฉันจะไม่คุยโวเกี่ยวกับ Firebug เพราะฉันได้เรียนรู้การพัฒนาเว็บโดยใช้ Firefox กับ Firebug
เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการพัฒนาเว็บและนำเสนอคุณสมบัติหลักทั้งหมดของ DevTools และ Firefox ของ DevTools อย่างไรก็ตามฉันเปลี่ยนไปใช้ Chrome DevTools แม้ว่าจะไม่ครอบคลุมคุณสมบัติทั้งหมดของ Firebug เนื่องจากมีน้ำหนักเบาและเร็วกว่า Firebug มากการเข้าถึง localStorage นั้นกำหนดได้ง่ายและแหล่งที่มาจะถูกจัดระเบียบไว้ในความคิดของฉัน
ฉันจะแสดงรายการคุณสมบัติที่แตกต่างกันใน Firebug
ค้นหา :
ตัวเลือกการค้นหาได้รับการกำหนดไว้อย่างดีใน Firebug เนื่องจากสามารถเข้าถึงได้ง่ายและเราสามารถค้นหาคำหลักด้วยนิพจน์ทั่วไปและตัวพิมพ์เล็กและใหญ่
DOM:
โครงสร้าง DOM ที่สามารถเข้าถึงได้อย่างง่ายดายใน Firebug ต่าง ๆตัวเลือกการกรองเช่นแสดงคุณสมบัติที่ผู้ใช้กำหนด , การแสดงที่ผู้ใช้กำหนดฟังก์ชั่นและอื่น ๆ
คุ้กกี้:
Firebug ช่วยให้เราสร้างของเราคุกกี้ของตัวเองและให้จัดหาคุกกี้การส่งออก
เครือข่าย / เน็ต:
Firebug มีสุทธิแผง wheras DevTools เรียกว่าเครือข่าย ทั้งสองอย่างมีประโยชน์ในการวิเคราะห์คำขอทั้งหมดที่สร้างขึ้นเพื่อโหลดทรัพยากรและสถานะ ใน Firebug เราสามารถเข้าใจทรัพยากรIP ระยะไกล
แหล่งที่มา:
แม้ว่าSource Editจะมีอยู่ใน DevTools แต่ฉันรู้สึกว่า Firebug ดีกว่าเมื่อใช้Source Editเพราะถ้าคุณต้องการแก้ไขไฟล์ CSS ภายใน DevTools คุณต้องไปที่แผงSourcesจากนั้นกดCtrl+ Oเพื่อค้นหาไฟล์ จากนั้นคุณสามารถแก้ไขไฟล์ได้ ใน Firebug คุณสามารถค้นหาSource Editใต้ทุกแท็บเมนู
รองรับ dojo:
เมื่อผมเป็นนักพัฒนาโดโจ Firebug ถูกขยายได้อย่างง่ายดายเพื่อสนับสนุน Developement โดโจโดยใช้Firebug ขยาย
เห็นได้ชัดว่า Firebug 2.0 มีคุณสมบัติเล็ก ๆ มากมายซึ่ง Chrome DevTools ไม่มี บางส่วนมีการระบุไว้ที่นี่:
ทั่วไป
A "คุณสมบัติ" ที่นอกเหนือไปจากการใช้งานที่เป็นที่ Firebug เป็นโอเพนซอร์ส ดังนั้นทุกคนสามารถมีส่วนร่วมได้
ต้องบอกว่า Chrome DevTools (เช่นเดียวกับ Firefox DevTools) มีคุณสมบัติอื่น ๆ อีกมากมายและข้อดีอื่น ๆ ที่เล็กกว่าและใหญ่กว่า Firebug เนื่องจากทีมที่อยู่เบื้องหลัง Firebug นั้นมีขนาดเล็กมากเมื่อเทียบกับทีมที่อยู่เบื้องหลัง DevTools อื่น ๆ
นอกจากนี้Firebug 3+ ยังรวมเข้ากับ Firefox DevToolsในตัวซึ่งหมายความว่าเวอร์ชันเหล่านั้นจะสืบทอดคุณสมบัติทั้งหมดของ Firefox DevTools และอาจเพิ่มคุณสมบัติเพิ่มเติม
นอกจากนี้ยังเพิ่มว่าสามารถ xopy XPATH เพิ่มตัวเลือก CSS สำหรับองค์ประกอบ HTML
บางครั้งก็มีประโยชน์จริงๆ! :))) ฮ่า ๆ ๆ ๆ
ฉันคิดว่าเครื่องมือพัฒนาคล้ายกัน แต่ฉันมีปัญหาในการบังคับให้ Chrome ไม่แคชอะไรเลย แม้แต่การตั้งค่าการตั้งค่า "ปิดการใช้งานแคช" ของ Chrome ก็ไม่ได้ผล 100% ฉันไม่แน่ใจว่าทำไม
ฉันไม่มีปัญหานี้กับ Firefox / Firebug ดังนั้นฉันจึงยังใช้มันอยู่
เพิ่มไม่กี่เซ็นต์ของฉัน ...
Chrome Inspector ไม่สามารถจัดเรียงคุณสมบัติ CSS ตามตัวอักษรได้เนื่องจาก Firebug สามารถทำสิ่งนี้ได้อย่างมีเสน่ห์ ช่วยเมื่อคุณตรวจสอบองค์ประกอบ css และจำเป็นต้องจับมัน firebug มาพร้อมกับสิ่งนี้
ตามแนวทางปฏิบัติในการเขียนโค้ด CSS ที่ดีควรจัดเรียงคุณสมบัติ CSS ของคุณตามตัวอักษรในโค้ดของคุณ
เมื่อคุณทำงานในโปรเจ็กต์ที่เกี่ยวข้องกับสคริปต์จำนวนมากใน firebug ภายใต้แท็กสคริปต์คุณมีตัวเลือกในการค้นหาไฟล์ js ในช่องคำแนะนำที่มีให้ เช่นเดียวกับโครเมี่ยมคุณจะมีมุมมองต้นไม้ที่อ่อนแอเพื่อค้นหาไฟล์ JS ของคุณซึ่งน่าเบื่อที่จะเห็นการกำหนดเนมสเปซของไฟล์ js ของคุณและสำรวจต้นไม้
ตัวเลือกนี้อาจไม่มีผลกับทุกคนที่เกี่ยวข้องกับไฟล์ JS เพียงเล็กน้อยในโปรเจ็กต์ ฟีเจอร์นี้ใช้ได้กับ firebug ที่ฉันใช้เมื่อสคริปต์ของฉันมีไฟล์ JS มากกว่า 1,000 ไฟล์
เกือบจะเปลี่ยนวันนี้ แต่ฉันสังเกตเห็นว่าฉันไม่สามารถคลิกขวาที่ CSS ที่แก้ไขใน Chrome และคัดลอกการประกาศกฎหรือรูปแบบได้อย่างที่ฉันทำได้ใน firebug พระเจ้าฉันหวังว่า Firefox จะไม่เริ่มดูดทันทีมิฉะนั้นฉันจะไม่มีปัญหานี้
ด้วยตัวดีบักเกอร์โครเมี่ยมฉันสามารถดีบัก jsni ของโปรเจ็กต์ GWT ของฉันโดยที่ FireBug แสดงฟังก์ชันที่ไม่ระบุตัวตนและฉันไม่รู้จักฟังก์ชันแอคชูเอลเลยจริงๆ
ฉันชอบ Chrome dev tool แต่บางครั้งฉันก็พลาดฟีเจอร์อันทรงพลังเหล่านี้จาก firebug
คุณลักษณะคำขอ "แก้ไขและส่งใหม่"
ด้วยคุณลักษณะ "แก้ไขและส่งใหม่" ในเครื่องมือสำหรับนักพัฒนา Firefox (เล่นซ้ำ XHR หรือบางอย่างใน Firebug) คุณสามารถเล่นคำขอ XHR ซ้ำพร้อมกับการเปลี่ยนแปลงในคำขอรวมถึงส่วนหัวของคำขอเนื้อหาคำขอวิธีการ http และแม้แต่ URL Replay XHR ของ Google Chrome เพียงแค่เล่นคำขอซ้ำและไม่อนุญาตให้แก้ไขคำขอใด ๆ
ฉันใช้ Firefox Devtools เมื่อฉันต้องการคุณสมบัตินี้