ดีบักเกอร์ที่เหมือน Firebug สำหรับ Google Chrome

มีอะไรอย่างเช่น Firebug ที่คุณสามารถใช้ใน Google Chrome ได้บ้าง?

คุณสมบัติที่สำคัญที่ฉันต้องการ:

• ตรวจสอบแหล่งที่มา HTML (องค์ประกอบที่เลือกลบพวกเขา ฯลฯ )
• ตรวจสอบค่า CSS (วิธีแก้ปัญหาในตัวแปลก, อย่างใด)

มีเครื่องมือที่เหมือน Firebug อยู่แล้วใน Chrome เพียงคลิกขวาที่ใดก็ได้บนหน้าแล้วเลือก "ตรวจสอบองค์ประกอบ" จากเมนู Chrome มีเครื่องมือกราฟิกสำหรับการดีบัก (เช่นใน Firebug) ดังนั้นคุณสามารถดีบัก JavaScript ได้ นอกจากนี้ยังทำการตรวจสอบ CSS ได้เป็นอย่างดีและสามารถเปลี่ยนการเรนเดอร์ CSS ได้ทันที

สำหรับข้อมูลเพิ่มเติมโปรดดูที่https://developers.google.com/chrome-developer-tools/

Firebug Lite รองรับการตรวจสอบองค์ประกอบ HTML สไตล์ CSS ที่คำนวณและอื่น ๆ อีกมากมาย เนื่องจากเป็น JavaScript ที่บริสุทธิ์จึงสามารถใช้งานได้ในเบราว์เซอร์ที่แตกต่างกัน เพียงรวมสคริปต์ในแหล่งที่มาของคุณหรือเพิ่ม bookmarklet ในแถบที่คั่นหน้าของคุณเพื่อรวมไว้ในหน้าใดก็ได้ด้วยคลิกเดียว

http://getfirebug.com/lite.html

เพียงเพิ่มจุดพูดคุยบางส่วนในฐานะคนที่ใช้ Firebug / Chrome Inspectorทุกวัน:

1. ในขณะที่เขียนมีผู้ตรวจสอบ Google DOM เท่านั้นและไม่มีคุณลักษณะทั้งหมดของ Firebug

2. สารวัตรเป็นรุ่น 'lite' ของ Firebug: อินเทอร์เฟซไม่ดีเท่า IMO การตรวจสอบองค์ประกอบในรุ่นล่าสุดทั้งสองตอนนี้เป็น clunky แต่ Firebug ยังดีกว่า ฉันพบว่าตัวเองกำลังพยายามค้นหาความรักสำหรับ Chrome (เนื่องจากเป็นประสบการณ์ที่ดีกว่าและเร็วกว่าเบราว์เซอร์) แต่สำหรับงานพัฒนามันยังคงแย่สำหรับฉัน

3. การแสดงตัวอย่าง / การดัดแปลง Live ของ DOM / CSS ยังดีกว่าใน Firebug; การคำนวณ CSS และมุมมองรูปแบบกล่องจะดีกว่าใน Firebug;

4. อย่างใดมันง่ายกว่าที่จะอ่าน / ใช้ Firebug อาจเป็นเพราะความสะดวกในการนำทาง, จัดการ / ปรับเปลี่ยนเอกสารในพื้นที่สำคัญหลายแห่ง? ใครจะรู้. ฉันคุ้นเคยกับอินเทอร์เฟซและฉันคิดว่า Chrome Inspector ไม่ดีเท่านี้แม้ว่าจะเป็นเรื่องส่วนตัวที่ฉันยอมรับ

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

6. จุดสุดท้าย: วันที่ Google Chrome ได้รับ Firebug ที่มีคุณสมบัติครบถ้วนนั้นเป็นวันที่ Firefox โดยทั่วไปจะเสียชีวิตสำหรับนักพัฒนาเพราะ Firefox มีเวลา 3 ปีในการทำให้Geckoของเค้าโครงเครื่องยนต์ของ Firefox นั้นเร็วเท่าWebKitและพวกเขาไม่ได้ทำ ขออภัยที่จะกล่าวอย่างเปิดเผย แต่เป็นความจริง

คุณเห็นแล้วตอนนี้ทุกคนต้องการที่จะย้ายออกจาก Flash แทน jQuery ซึ่งได้รับแรงบันดาลใจจากการเข้าถึงและการติดต่อสื่อสารบนมือถือ (iPhone, iPad, Android) และ JavaScript คือ 'ทันใดนั้นเป็นเรื่องใหญ่ และนั่นทำให้ฉันเศร้าในฐานะแฟน Mozilla ของ Mozilla Chrome เป็นเบราว์เซอร์ที่ดีกว่าจนกว่า Firefox จะอัพเกรดเอนจิ้น JavaScript

F12

ฉันรักคีย์ลัด

ลองสิ่งนี้เรียกว่าFirebug Liteและใช้งานได้กับ Chrome รุ่นเบต้า

นอกจากนี้คุณยังสามารถค้นหาได้ที่: https://chrome.google.com/extensions/

คุณสามารถตั้งค่า bookmarklet นี้ใน "แถบบุ๊กมาร์ก" เพื่อให้มี Firebug lite อยู่ในเบราว์เซอร์ Chrome / Chromium เสมอ (ใส่เป็น URL):

javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

หรือลองใช้สคริปต์ผู้ใช้: http://dev.chromium.org/developers/design-documents/user-scripts

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

ส่วนขยายนี้ใช้เพื่อฝัง jQuery ในหน้าใด ๆ ที่คุณต้องการ อนุญาตให้ใช้ jQuery ในคอนโซลเชลล์ (คุณสามารถเรียกใช้คอนโซล Chrome ได้โดยCtrl+ Shift+ j")

หากต้องการฝัง jQuery ลงในแท็บที่เลือกให้คลิกที่ปุ่มส่วนขยาย

ส่วนเสริม Firebug Chrome อย่างเป็นทางการหรือคุณสามารถดาวน์โหลดและจัดทำส่วนขยายด้วยตัวคุณเอง

https://getfirebug.com/releases/lite/chrome/

เป็นไปได้ไหมที่จะเปิดใช้งานสคริปต์ Greasemonkeyสำหรับ Google Chrome ดังนั้นอาจมีวิธีการติดตั้ง Firebug โดยใช้วิธีนี้หรือไม่ Firebug Liteก็ใช้งานได้ แต่มันก็ไม่ได้เป็นความรู้สึกเดียวกับที่ใช้ฟีเจอร์เต็มรูปแบบ :(

willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/

สิ่งนี้ไม่ได้ตอบคำถามของคุณ แต่ในกรณีที่คุณไม่ได้รับ Chris Developer จากWeb Pederickอยู่ในขณะนี้สำหรับ Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm

ลืมทุกสิ่งที่คุณต้องการโดยผู้ตรวจสอบอิสระของเบราว์เซอร์และอัพเดท

https://goggles.webmaker.org/en-US

เพียงคั่นหน้าและไปที่หน้าเว็บใด ๆ แล้วคลิกที่คั่นหน้านั้น ..

นี่คือ Mozilla โครงการ Goggles จริง ๆ แล้วมันวิเศษมาก ...

F12 (เฉพาะบน Linux และ Windows)

หรือ

Ctrl ⇧ I

( ⌥ ⌘ Iถ้าคุณใช้ Mac)

โปรดลองFirebug Lite สำหรับ Google Chrome

หากคุณใช้ Chromium บน Ubuntu โดยใช้ ppa ทุกคืนคุณควรจะได้ chromium-browser-inspector