Firebug có những tính năng nào mà Công cụ nhà phát triển của Chrome không có? [đóng cửa]

Tôi là một nhà phát triển web mới vào nghề và tôi đã được khuyến nghị dùng Firebug để gỡ lỗi nhiều lần. Tuy nhiên, cho đến nay, tôi chỉ đang sử dụng Công cụ dành cho nhà phát triển được tích hợp sẵn của Chrome. Nó dường như làm mọi thứ mà Firebug làm, và nó sạch sẽ hơn và có tổ chức hơn như một phần thưởng.

Khi tôi nâng cao hơn trong việc gỡ lỗi của mình, có những tính năng nào mà Firebug có mà tôi sẽ bỏ lỡ với Công cụ DevTools của Chrome không? Nếu vậy, chúng là gì?

Liên quan: Trình gỡ lỗi giống Firebug cho Google Chrome

Tôi đã sử dụng Firebug ngay từ đầu và nó là một ơn trời giống như sự phát minh ra lửa. Nhưng sau đó Chrome ra mắt trình gỡ lỗi và tôi đã thử nó. Tôi tiếp tục sử dụng Firebug, nhưng theo dõi các công cụ dành cho nhà phát triển của Chome và cuối cùng không thể nghĩ ra lý do để không chuyển đổi sau khi các công cụ JSON được thêm vào v12.

Công cụ DevTools của Chrome rất thích vì nó có:

• Tích hợp trong Timeline, Profiler và Heap phân tích
• Tích hợp công cụ kiểm tra
• Có thể truy cập và chỉnh sửa Local / SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache, v.v.
• Đánh giá mạng WebSockets
• Trình gỡ lỗi JS có thêm một số tính năng (ví dụ: điểm ngắt WebWorker)
• Trình gỡ lỗi JS cho phép bạn chỉnh sửa JS nhanh chóng và chạy nó (JSFiddle w / o the fiddle)
• Mỗi cửa sổ có một cửa sổ devtools nếu bạn thích; Firebug là một sinh vật đơn
• Firebug xáo trộn trang bằng cách làm chậm quá trình tải của nó và bằng cách tiêm CSS cho tính năng kiểm tra của nó

CẬP NHẬT: 2 năm sau, tôi phải chúc mừng nhóm Firefox vì đã có những bước tiến lớn. Điều đó nói lên rằng, nhóm Chrome và trình gỡ lỗi tạo ra những bước tiến vượt bậc hàng tháng, dẫn đầu ngành. Tôi muốn cập nhật danh sách trên, nhưng thành thật mà nói, nó sẽ lấp đầy toàn bộ trang.

Tôi chưa gặp phải tính năng Firebug mà tôi đã bỏ lỡ sau khi chuyển sang Chrome.

Công cụ nhà phát triển Chrome đã tiếp nhận các tính năng của Firebug, vì vậy tất cả các tính năng chính và sự quen thuộc đều có ở đó (chẳng hạn như $0và consoleđối tượng).

Có một số khác biệt nhỏ, chẳng hạn như DevTools không có bảng điều khiển CSS (mặc dù bảng định kiểu CSS có thể được thao tác trong bảng điều khiển Thành phần ).

Các công cụ Chrome cũng có các bảng Dòng thời gian , Hồ sơ và Bộ nhớ . Bảng Dòng thời gian ghi nhật ký tải, hiển thị CSS và phân tích cú pháp JavaScript. Bảng Hồ sơ lập hồ sơ sử dụng tài nguyên và bảng Bộ nhớ hiển thị và cho phép các thay đổi trong cơ sở dữ liệu của trang web, bộ nhớ cục bộ, bộ nhớ phiên và cookie.

Cuối cùng, cả hai công cụ đều có những khác biệt nhỏ của riêng chúng, giúp các hành động khác nhau dễ dàng hơn hoặc khó hơn một chút. Lời khuyên của tôi là sử dụng Firebug cho Firefox và DevTools cho trình duyệt Webkit, vì chỉ có Firebug Lite hoạt động trên Chrome và nó thiếu nhiều tính năng mà Firebug bình thường có (và DevTools được tích hợp sẵn trong Chrome).

Tôi cảm thấy thoải mái hơn rất nhiều khi sử dụng Firebug. Tôi không thể nghĩ ra chi tiết cụ thể vào lúc này, nhưng đôi khi tôi sẽ thử gỡ lỗi một cái gì đó trong Safari hoặc Chrome và có vẻ như một PITA như vậy mà tôi khởi chạy Firefox và hoàn thành mọi việc nhanh chóng.

Tab DOM là một điểm cộng, cho một. Nó dễ tiếp cận hơn và được bố trí tốt hơn so với Chrome tương đương. Tôi cũng thích cách DOM và các đối tượng JS khác được ghi vào bảng điều khiển trong Firebug.

Các plug-in Firebug như Pixel Perfect cũng rất hữu ích. Tôi không biết liệu có công cụ nào như vậy cho Chrome hay không.

Nhìn chung, nó không thành vấn đề vì dù sao thì bạn cũng phải thử nghiệm trên cả hai trình duyệt. Và IE, cũng có thể so sánh nó với các công cụ Dev của IE (đã được cải thiện, nhưng vẫn chưa tốt so với FF hoặc Webkit).

Tôi không nghĩ rằng có bất kỳ điều gì nâng cao cụ thể hiện có trong Firebug nhưng không có trong Chrome mà bạn sẽ thiếu.

CHỈNH SỬA : Điều này từng đúng, nhưng Chrome Dev Tools đã triển khai nó.

Firebug có thể tìm kiếm trong tất cả các tập lệnh được tải trên một trang. Công cụ nhà phát triển của Chrome chỉ có thể tìm kiếm trong tập lệnh hiện được chọn, AFAIK.

Theo như tôi có thể nói, Firebug là ứng dụng duy nhất có thể chỉnh sửa mã HTML và văn bản trực tiếp khi bạn nhập. Rất hữu ích, nếu ví dụ như bạn đang cố gắng xem văn bản sẽ phù hợp như thế nào trong một vùng chứa và thêm một ký tự vào mỗi lần.

Trong Chrome khi bạn chỉnh sửa HTML, bạn phải nhấn TAB hoặc ENTER để thoát khỏi "chế độ chỉnh sửa" và xem các thay đổi trên trang của bạn.

Trong Firebug, bạn cũng có thể nhập mã HTML ngay lập tức. Trong Chrome, bạn phải nhấp chuột phải và chọn "Chỉnh sửa HTML". Nếu không, nó sẽ hiển thị giống như <b> in đậm </b>.

Tôi thực sự muốn đổi sang Chrome, vì nó có vẻ chạy nhanh hơn, nhưng việc chỉnh sửa trực tiếp quá quan trọng đối với tôi.

Nút cứu hỏa chọn chuột rất tuyệt, nhưng dường như tôi không thể tìm thấy nó trong Công cụ nhà phát triển Chrome.

Nó làm phiền tôi vì tôi không thể tìm thấy phím nóng cho nó trong firebug, trong khi chrome hoàn toàn thiếu nó.

Tôi là một nhà phát triển noob, vì vậy con chuột vẫn được sử dụng hầu hết khi phát triển.

Vào thời điểm câu hỏi này được đặt ra, Firebug là một con quái vật, nhưng giờ đây Công cụ dành cho nhà phát triển Chrome (DevTools) rất hữu ích cho các nhà phát triển web. Mặc dù tôi không ca ngợi về Firebug vì tôi đã học cách phát triển web bằng Firefox với Firebug.

Nó là một công cụ tuyệt vời để phát triển web và nó giới thiệu tất cả các tính năng chính của DevTools và DevTools của Firefox có. Tuy nhiên, tôi đã chuyển sang Công cụ dành cho nhà phát triển của Chrome mặc dù chúng không bao gồm tất cả các tính năng của Firebug, vì chúng có dung lượng nhẹ và nhanh hơn nhiều so với Firebug, việc truy cập localStorage dễ dàng được xác định và các nguồn được sắp xếp ở đó theo ý kiến ​​của tôi.

Sau đây, tôi sẽ liệt kê cách các tính năng độc đáo trong Firebug,

• Tìm kiếm :

  Tùy chọn tìm kiếm được xác định rõ ràng trong Firebug, vì nó dễ dàng truy cập và chúng tôi có thể tìm kiếm từ khóa có phân biệt chữ hoa chữ thường và biểu thức chính quy .

• DOM:

  Có thể dễ dàng truy cập cấu trúc DOM trong Firebug với nhiều tùy chọn lọc khác nhau như Hiển thị Thuộc tính do Người dùng xác định , Hiển thị Hàm do Người dùng xác định , v.v.

• Bánh quy:

  Firebug cho phép chúng tôi tạo cookie của riêng mình và cung cấp quyền xuất cookie .

• Mạng / Mạng:

  Firebug có một bảng điều khiển Net khi DevTools gọi nó là Mạng . Cả hai đều hữu ích để phân tích tất cả các yêu cầu được thực hiện để tải các tài nguyên và trạng thái của chúng. Trong Firebug, chúng ta có thể dễ dàng nắm được IP từ xa của tài nguyên .

• Nguồn:

  Mặc dù Chỉnh sửa nguồn có sẵn trong DevTools, tôi cảm thấy Firebug tốt hơn khi sử dụng Chỉnh sửa nguồn , bởi vì nếu bạn muốn chỉnh sửa tệp CSS trong DevTools, bạn phải chuyển đến bảng Nguồn , sau đó nhấn Ctrl+ Ođể tìm tệp. Chỉ khi đó bạn mới có thể chỉnh sửa tệp. Trong Firebug, bạn có thể dễ dàng tìm thấy Chỉnh sửa nguồn trong mỗi tab menu.

• Hỗ trợ cho võ đường:

  Khi tôi là một nhà phát triển võ đường, Firebug đã dễ dàng mở rộng để hỗ trợ phát triển võ đường bằng cách sử dụng Phần mở rộng Dojo Firebug .

Khách quan thấy Firebug 2.0 có nhiều tính năng nhỏ, mà Chrome DevTools không có. Một số trong số chúng được liệt kê ở đây:

Bảng điều khiển

• Hiển thị XMLHttpRequests bao gồm toàn bộ thông tin yêu cầu
• Hiển thị các thay đổi cookie
• Một số chi tiết Command Line API chức năng
• Trình chỉnh sửa lệnh riêng biệt

Bảng điều khiển HTML

• Chỉnh sửa nội tuyến với tính năng tự động hoàn thành cho các kiểu không đúng và CSS
• Các tùy chọn để kiểm soát xem có đánh dấu các thay đổi hay không, mở rộng chúng và cuộn chúng vào chế độ xem
• Các tùy chọn để kiểm soát hiển thị thực thể
• Hộp thông tin nhanh

Bảng điều khiển CSS

• Hiển thị các biểu định kiểu của trang theo cách được định dạng
• Bảng điều khiển bên bộ chọn

Bảng điều khiển DOM

• Hiển thị tất cả các thuộc tính DOM ở một nơi
• Hiển thị đóng cửa
• Cho phép lọc hiển thị theo thuộc tính, chức năng, v.v.

Bảng điều khiển mạng

• Cho phép dừng trên XmlHTTPRequests
• Hiển thị thông tin bộ nhớ cache cho mỗi yêu cầu

Bảng điều khiển cookie

• Tạo và chỉnh sửa cookie
• Kiểm soát quyền đối với cookie
• Hiển thị kích thước thô và định dạng của cookie
• Cho phép dừng thực thi tập lệnh khi thay đổi cookie
• Xuất cookie ở định dạng chuẩn

Chung

• Mở HTML, CSS và JavaScript trong trình chỉnh sửa bên ngoài
• Cho phép tùy chỉnh các phím tắt

Một "tính năng" vượt xa khả năng sử dụng là Firebug là mã nguồn mở . Vì vậy, tất cả mọi người có thể tham gia vào nó.

Phải nói rằng, Chrome DevTools (cũng như Firefox DevTools) có nhiều tính năng hơn và các lợi thế nhỏ hơn và lớn hơn khác so với Firebug vì nhóm đằng sau Firebug là rất nhỏ so với các nhóm đằng sau DevTools khác.

Ngoài ra, Firebug 3+ tích hợp vào Firefox DevTools tích hợp sẵn , có nghĩa là những phiên bản đó kế thừa tất cả các tính năng của Firefox DevTools và có thể thêm các tính năng bổ sung.

Firebug có khả năng có các plugin khác đính kèm với nó, chẳng hạn như Firecookie . Đối với phần còn lại, chúng khá giống nhau, theo ý kiến ​​của tôi, đó là tất cả về hương vị.

cũng nói thêm rằng nó có thể xopy XPATH thêm bộ chọn CSS cho một phần tử HTML.

ĐÓ đôi khi thực sự tiện dụng! :))) hahaha

Tôi nghĩ các công cụ phát triển tương tự nhau nhưng tôi đã gặp sự cố khi buộc Chrome không lưu vào bộ nhớ cache bất kỳ thứ gì. Ngay cả cài đặt "Tắt bộ nhớ cache" của Chrome cũng không hoạt động 100%; Tôi cung không chăc tại sao.

Tôi không gặp sự cố này với Firefox / Firebug, vì vậy tôi vẫn đang sử dụng nó.

Thêm vài xu của tôi ...

1. Trình kiểm tra Chrome không thể sắp xếp các thuộc tính CSS theo thứ tự bảng chữ cái vì Firebug có thể làm điều này giống như một chiếc bùa. Nó sẽ giúp ích khi bạn kiểm tra một số phần tử css và cần lấy nó.

   Theo thực tiễn viết mã CSS tốt, luôn tốt hơn nếu các thuộc tính CSS của bạn được sắp xếp theo thứ tự bảng chữ cái trong mã của bạn.

2. Khi bạn đang làm việc trên một dự án liên quan đến nhiều script, trong firebug dưới thẻ script, bạn có tùy chọn tìm kiếm tệp js trong hộp gợi ý được cung cấp. Trong trường hợp như với chrome, bạn sẽ có một chế độ xem dạng cây khập khiễng để định vị tệp JS của mình, điều này thật tẻ nhạt khi xem không gian tên của tệp js của bạn và đi qua cây.

   Tùy chọn này có thể không ảnh hưởng đến bất kỳ ai liên quan đến các tệp JS nhỏ trong dự án của họ. Tính năng này rất hiệu quả với firebug mà tôi sử dụng khi các tập lệnh của tôi có hơn 1000 tệp JS.

Gần như đã thực hiện chuyển đổi hôm nay nhưng tôi nhận thấy rằng tôi không thể nhấp chuột phải vào CSS đã sửa đổi trong Chrome và sao chép các khai báo Quy tắc hoặc Kiểu như tôi có thể làm trong firebug. GOD Tôi ước firefox không đột nhiên bắt đầu hút hoặc tôi sẽ không gặp vấn đề này.

Với trình gỡ lỗi chrome, tôi có thể gỡ lỗi jsni của dự án GWT của mình trong đó FireBug chỉ hiển thị một chức năng ẩn danh và tôi thực sự không nhận ra chức năng actuale nào cả.

Tôi yêu công cụ dành cho nhà phát triển Chrome nhưng đôi khi tôi đã bỏ lỡ những tính năng mạnh mẽ này từ firebug.

• Điểm ngắt có điều kiện : chỉ tạm dừng trong điều kiện cụ thể.
• Ghi nhật ký các lệnh gọi hàm : đánh dấu hàm và xem mọi thứ bạn muốn biết trong bảng điều khiển.
• Break On Property Change : Đánh dấu đối tượng và trình gỡ lỗi sẽ tạm dừng nếu thuộc tính bị thay đổi.

Tính năng yêu cầu "Chỉnh sửa và gửi lại"

Với tính năng "Chỉnh sửa và gửi lại" trong công cụ Nhà phát triển Firefox (Phát lại XHR hoặc thứ gì đó trong Firebug), bạn có thể phát lại yêu cầu XHR với các thay đổi trong yêu cầu bao gồm tiêu đề yêu cầu, nội dung yêu cầu, phương thức http và thậm chí cả url. Replay XHR của Google Chrome chỉ phát lại yêu cầu và không cho phép bất kỳ sửa đổi nào đối với yêu cầu.

Tôi sử dụng Firefox Devtools khi tôi cần tính năng này.