Trình gỡ lỗi giống như con bọ lửa cho Google Chrome


278

Có bất cứ điều gì như Fireorms mà bạn có thể sử dụng trong Google Chrome không?

Các tính năng cần thiết tôi muốn:

  • Kiểm tra nguồn HTML (chọn thành phần, xóa chúng, v.v.)
  • kiểm tra các giá trị CSS (bằng cách nào đó, giải pháp tích hợp là lạ)

9
Xem như Chrome hiện hỗ trợ các tiện ích mở rộng, chúng tôi có thể xem lại điều này không vì nhiều câu trả lời hiện có về mặt kỹ thuật không chính xác. Chúng ta nên cập nhật câu trả lời này thay vì bắt đầu một câu trả lời mới.
Nathan Koop

3
@Nathan Koop: Tôi có thể sai, nhưng tôi không nghĩ hệ thống tiện ích mở rộng của Chrome đủ mạnh để cho phép một cái gì đó như Fireorms.
Sasha Chedygov

1
kiểm tra liên kết này để có được con bọ lửa
Techie

Câu trả lời:


243

Có một công cụ giống như Firebird đã được tích hợp sẵn trong Chrome. Chỉ cần nhấp chuột phải vào bất cứ nơi nào trên một trang và chọn "Kiểm tra phần tử" từ menu. Chrome có một công cụ đồ họa để gỡ lỗi (như trong Fireorms), vì vậy bạn có thể gỡ lỗi JavaScript. Nó cũng kiểm tra CSS tốt và thậm chí có thể thay đổi kết xuất CSS một cách nhanh chóng.

Để biết thêm thông tin, hãy xem https://developers.google.com/chrome-developer-tools/


19
++ Điều này đủ tốt để khắc phục các sự cố cụ thể của Chrome. Nếu tôi muốn hướng nội sâu hơn, tôi có thể làm điều đó với Fireorms. Giờ đây với chế độ nhà phát triển mới của IE8, tất cả các trình duyệt chính đều có chế độ phát triển dựng sẵn. Thời gian tốt.
súng

1
À, tôi đã tìm cho tôi một chút để tìm nó, nhưng chức năng chỉnh sửa html của fireorms cũng ở đó, ở cùng một nơi mà bạn có thể chỉnh sửa css, thanh công cụ của nhà phát triển, nhấp đúp vào một yếu tố, nhập và nhấn enter, và ở đó bạn đi, html chỉnh sửa.
Kzqai

4
Công cụ dành cho nhà phát triển Chrome (ctrl + shift + j) không hỗ trợ gỡ lỗi Javascript như Fireorms. Nhấp vào tab ScScript sau đó vào biểu tượng thứ hai ở dưới cùng (> =) có chú giải công cụ "Hiển thị bảng điều khiển". Từ đó, bạn có thể thực thi các lệnh Javascript như bảng điều khiển Fireorms.
Pierre-Antoine LaFọ

1
Hãy nhớ trên một số hệ thống dựa trên linux, nó không được cài đặt tự động, vì vậy bạn cần cài đặt thủ công: sudo apt-get install chromium-browser-Inspector
Manuel

1
Bản dựng dev hiện tại 4.0.xxxx có một bộ công cụ dành cho nhà phát triển. Tôi đã biết về các yếu tố kiểm tra trước đây nhưng không có bảng "Net" thì nó không đủ tốt. Nhưng hiện tại có một bảng điều khiển "tài nguyên" dường như đang hoạt động khá tốt và có tất cả các bộ lọc tương tự như fireorms (script, xhr, hình ảnh, v.v.). Tôi đã sử dụng bản dựng Dev trong một tuần và nó có vẻ khá ổn định. Cuối cùng tôi cũng đã đặt trình duyệt mặc định của mình thành chrome - bây giờ cũng là trình duyệt dev của tôi! :)
Đánh dấu J Miller

37

Firebug Lite hỗ trợ kiểm tra các phần tử HTML, kiểu CSS được tính toán và nhiều hơn nữa. Vì nó là JavaScript thuần túy, nó hoạt động trong nhiều trình duyệt khác nhau. Chỉ cần bao gồm tập lệnh trong nguồn của bạn hoặc thêm bookmarklet vào thanh dấu trang của bạn để đưa tập lệnh đó vào bất kỳ trang nào chỉ bằng một cú nhấp chuột.

http://getfireorms.com/lite.html


Liên kết tuyệt vời! Không biết về phiên bản IE
Patrick Desjardins

15

Chỉ cần thêm một số điểm nói chuyện với tư cách là người sử dụng Fireorms / Chrome Inspector mỗi ngày:

  1. Tại thời điểm viết bài, chỉ có thanh tra Google DOM và không có thanh tra nào có tất cả các tính năng của Fireorms

  2. Inspector là một phiên bản 'lite' của Fireorms: Giao diện không tốt như IMO, việc kiểm tra phần tử trong cả hai phiên bản gần đây hiện rất khó hiểu, nhưng Fireorms vẫn tốt hơn; Tôi thấy mình đang cố gắng tìm kiếm tình yêu dành cho Chrome (vì đó là trải nghiệm trình duyệt tốt hơn, nhanh hơn), nhưng đối với công việc phát triển, nó vẫn chỉ hấp dẫn tôi.

  3. Xem trước / sửa đổi trực tiếp DOM / CSS vẫn tốt hơn trong Fireorms; CSS được tính toán và chế độ xem mô hình hộp tốt hơn trong Fireorms;

  4. Bằng cách nào đó, việc đọc / sử dụng Fireorms có thể dễ dàng hơn vì có thể dễ dàng điều hướng, thao tác / sửa đổi tài liệu trong một số lĩnh vực chính? Ai biết. Tôi đã quen với giao diện và tôi nghĩ Chrome Inspector không tốt bằng mặc dù đây là điều chủ quan tôi thừa nhận.

  5. Tab Cookies / Net cực kỳ hữu ích với tôi trong Fireorms. Có lẽ Chrome Inspector có cái này bây giờ? Lần trước tôi đã kiểm tra không, vì Chrome tự cập nhật trong nền mà không có sự can thiệp của bạn (được sự đồng ý của bạn theo mặc định như tất cả các lớp phủ tốt).

  6. Điểm cuối cùng: Ngày mà Google Chrome có được một Fireorms đầy đủ tính năng là ngày Firefox về cơ bản chết cho các nhà phát triển vì Firefox đã có 3 năm để tạo ra công cụ bố trí của Gecko của Firefox nhanh như WebKit và họ đã không làm vậy. Xin lỗi để đặt nó một cách thẳng thắn nhưng đó là sự thật.

Bạn thấy đấy, bây giờ mọi người đều muốn rời khỏi Flash thay vì jQuery được thúc đẩy bởi khả năng truy cập và tương tác trên thiết bị di động (iPhone, iPad, Android) và JavaScript 'đột nhiên' là một vấn đề lớn (đó là sự mỉa mai), do đó, con tàu đã ra khơi, Firefox. Và điều đó làm tôi buồn, với tư cách là một người hâm mộ Mozilla. Chrome đơn giản là một trình duyệt tốt hơn cho đến khi Firefox nâng cấp công cụ JavaScript của họ.


Firefox đang xuống dốc. Tính đến thời điểm hiện tại (2013), các devtools chrome mạnh hơn nhiều so với fireorms ... và firefox tập trung mọi nỗ lực của họ vào Firefox OS, thậm chí không gần với android frodo .. họ thậm chí không nỗ lực nhiều để tạo js và kết xuất nhanh hơn
Phyo Arkar Lwin



9

Bạn có thể đặt bookmarklet này trong "Thanh dấu trang" của mình để luôn có sẵn Firebird lite trong trình duyệt Chrome / Chromium (đặt cái này làm 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);


4

jQuerify là phần mở rộng hoàn hảo để nhúng jQuery vào Chrome Console và đơn giản như bạn có thể tưởng tượng. Phần mở rộng này cũng cho biết nếu jQuery đã được nhúng vào một trang.

Tiện ích mở rộng này được sử dụng để nhúng jQuery vào bất kỳ trang nào bạn muốn. Nó cho phép sử dụng jQuery trong trình điều khiển vỏ (Bạn có thể gọi bảng điều khiển Chrome bằng Ctrl+ Shift+ j".).

Để nhúng jQuery vào tab đã chọn, nhấp vào nút mở rộng.


4

Tiện ích mở rộng Firebird Chrome chính thức hoặc bạn có thể tự tải xuống và đóng gói tiện ích mở rộng.

https://getfireorms.com/release/lite/chrom/


2
Nói rõ hơn: đây là một liên kết đến một phần mở rộng lite firebird chứ không phải là một phần mở rộng firebird.
NeuroScr

Liên kết được cung cấp trước đó đã bị hỏng. Vui lòng cập nhật câu trả lời này với một liên kết mới.
Rob Hruska

3

Chà, có thể kích hoạt tập lệnh Greasemonkey cho Google Chrome để có thể có cách sắp xếp cài đặt Fireorms bằng phương pháp này? Firebug Lite cũng sẽ hoạt động, nhưng nó không giống như sử dụng đầy đủ tính năng :(

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



3

Quên tất cả mọi thứ bạn cần tất cả trình kiểm tra độc lập trình duyệt này, trình cập nhật dom

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

chỉ cần đánh dấu và đi đến bất kỳ trang web nào và nhấp vào dấu trang đó ..

Đây thực sự là dự án Mozilla Goggles, tuyệt vời đáng kinh ngạc tuyệt vời ...


Họ đang tắt nó đi.
steve moretz

3

F12 (chỉ có trên Linux và Windows)

HOẶC LÀ

Ctrl I

( Inếu bạn đang dùng Mac)



1

Nếu bạn đang sử dụng Chromium trên Ubuntu bằng ppa hàng đêm, thì bạn nên có chromium-browser-inspector

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.