Thực đơn
trang chủLỗi

Plugin Firebug cho firefox. Làm cách nào để sử dụng tiện ích bổ sung Firebug cho Firefox? Cách dùng Firebug chỉnh sửa CSS

Chúc một ngày tốt lành, độc giả thân mến của trang web!

- một trong những thứ nhất Công cụ hữu ích cho quản trị trang web. Với sự trợ giúp của nó, bạn có thể giải quyết nhiều vấn đề, chẳng hạn như bạn có thể xem cấu trúc của một trang web (rất khó để xem mã nguồn, nhưng với chương trình này, bạn có thể thấy cấu trúc yếu tố nguồn-phần tử nào hiển thị những gì có thể nhìn thấy ngay lập tức) hoặc chỉnh sửa các trang web trực tiếp trong thời gian thực. Bọ lửa cho Firefox cho phép chúng tôi thay đổi (html, CSS, v.v.) trực tiếp trong trình duyệt và xem ngay kết quả hành động của mình, mặc dù trên thực tế, bản thân mã trên máy chủ không thay đổi. Đơn giản hơn nữa: ví dụ, bạn cần thay đổi cỡ chữ trong tiêu đề bài viết. Sử dụng Firebug, chúng ta chỉ cần dùng chuột chọn văn bản mình cần, phần tử tương ứng được đánh dấu và chúng ta có thể ngay lập tức thay đổi kích thước phông chữ và xem ngay kết quả. Chúng tôi đã xem trang web trông như thế nào và sau đó chúng tôi thực hiện các thay đổi đối với mã tương ứng. Thoải mái? Không phải từ đó!

Plugin này có sẵn dưới dạng tiện ích bổ sung trong tùy chọn khác nhau. Vì vậy, bạn có thể cài đặt nó trong trình duyệt Chrome (cách cài đặt Chrome đã được viết trong bài viết, thiết lập và hoạt động. Đọc cách cài đặt plugin này cho chrome) hoặc chúng ta có thể xem xét tùy chọn này.

Cách cài đặt plugin firebug cho firefox

Khai mạc Mozilla Firefox(tất nhiên nó đã được cài đặt trên máy tính của chúng tôi), bạn có thể tải xuống firebug cho firefox bằng cách sử dụng

Nhấp chuột Nút màu xanh lá cây +Thêm vào Firefox.

Xin lưu ý rằng nút Cài đặt bị tắt. Để kích hoạt nó, hãy nhấp vào mục nhập (được biểu thị bằng mũi tên) và sau đó nhấp vào Cài đặt.

Tất cả. ứng dụng đã được cài đặt. Phía bên phải góc trên cùng chúng tôi thấy một lỗi màu xám.

Và màu xám vì nó không hoạt động, tức là. đã tắt. Nếu tiện ích mở rộng đã được cài đặt thì chúng ta không thể đọc phần tiếp theo - hãy xem cách sử dụng nó.

________________________________________________________________________

Lựa chọn, Nếu như Trình duyệt Firefox CHƯA CÀI ĐẶT trên máy tính. Đầu tiên, tải xuống tiện ích mở rộng Firebug từ trình duyệt Chrome, sau đó cài đặt Firefox.

Đầu tiên, hãy truy cập trang web tiện ích bổ sung. Trang tải xuống sẽ mở ra.

Nhấn nút Tải ngay. Một cửa sổ mở ra.

Bạn muốn tìm hiểu thêm về Firefox? bấm vào nút thích hợp. Nhưng chúng ta sẽ nhấp vào liên kết vẫn tải lên . Tiện ích bổ sung đang tải.

Ở góc dưới bên trái của trình duyệt Firefox, chúng ta thấy tệp đã tải xuống. Tệp này (các số trong tên có thể khác nhau, vì tệp này Phiên bản hiện tại tại thời điểm viết bài). Cài đặt trình duyệt Firefox và sau đó thêm tiện ích mở rộng Firebug đã tải xuống vào đó.

——————————————————————————

Cách sử dụng Firebug

Đầu tiên bạn cần kích hoạt nó. Việc này được thực hiện như thế này:

— nhấp chuột trái vào biểu tượng lỗi ở góc trên bên phải của trình duyệt:

- sử dụng phím nóng cuộc gọi F12.

Vùng làm việc mở ra (khoanh đỏ).

Hãy bắt đầu phân tích trang web (trang web ví dụ). Đầu tiên hãy nhấn vào biểu tượng ở khu vực làm việc(nằm bên phải lỗi).

Bây giờ, nếu bạn di chuyển chuột xung quanh trang web, các khu vực sẽ được đánh dấu và bên dưới sẽ là mã hiển thị khu vực này trên trang web.

Ví dụ về việc sử dụng plugin Firebug

Hãy xem một ví dụ cụ thể - xem mã tiêu đề bài viết và thay đổi màu của nó theo thời gian thực. Chúng ta mở trang web và thấy một bài viết tên là Reader tập tin PDF- Người theo dõi. Khởi chạy chương trình (nhấn F12) và di chuyển chuột đến tiêu đề này

Trong vùng làm việc bên dưới, chúng ta thấy mã chịu trách nhiệm về đầu ra của phần tử này:

Trình đọc PDF - Stduviewer

Và trong cùng khu vực làm việc ở bên phải, chúng ta thấy CSS:

A, a:link, a:visited, #sidebar a, #sidebar ul, .post-title, .page-title, .post-title a:link, .post-title a:visited, #slideshow .post-title Một (

}

Bạn có thể thấy tiêu đề bài viết được hiển thị với màu #265076. Hãy thử xem tiêu đề sẽ trông như thế nào với màu #00FFFF này? Để thực hiện việc này, chọn #265076 trong vùng làm việc và viết #00FFFF thay vì màu này và xem kết quả.

Màu tiêu đề đã thay đổi. Nhưng thực tế là bản thân mã này không hề thay đổi trên máy chủ và bạn cần phải chỉnh sửa mã CSS theo cách thủ công.

Bằng cách này, bạn có thể chỉnh sửa bất kỳ thành phần mã nào và xem kết quả chỉnh sửa. Điều đáng nói là khả năng của trình gỡ lỗi web vượt xa khả năng được mô tả trong bài viết - có số lượng lớn khả năng của phần mở rộng này.

Chào mọi người!

Hôm nay tôi sẽ kể cho bạn nghe về một điều rất tiện ích mở rộng hữu ích dành cho trình duyệt Firebug! Plugin Firebug hoặc được dịch từ bằng tiếng Anh“Bọ lửa” là một bước đột phá tiến hóa thực sự trong thế giới Internet và đáng được quan tâm đặc biệt!

Có lẽ đối với người dùng bình thường mạng toàn cầu plugin sẽ không mang lại bất kỳ lợi ích nào. Tuy nhiên, nếu bạn là quản trị viên web và có tài nguyên của riêng mình, bạn sẽ thích firebug! Và nếu bạn cũng là người mới bắt đầu thiết kế bố cục thì mọi việc sẽ dễ dàng hơn với bạn. trợ lý không thể thiếu. Vậy con bọ lửa này có gì tuyệt vời đến thế?

Plugin Firebug cho phép bạn dễ dàng tìm và chỉnh sửa bất kỳ phần nào của mã HTML hoặc CSS, ngay cả khi bạn gặp khó khăn khi điều hướng hai ngôn ngữ này. Ví dụ: bạn cần tìm mã chịu trách nhiệm xuất và hiển thị ngày giờ của bài đăng hoặc xem phần mã hiển thị menu chính của tài nguyên của bạn.

Hoặc có thể bạn không hài lòng với vị trí của các khối trong thanh bên và bạn muốn đặt chúng theo cách khác, thay đổi kích thước và màu sắc của chúng. Có lẽ trong tương lai bạn sẽ thay đổi bảng màu thiết kế tài nguyên của bạn và bạn sẽ muốn thay đổi màu của các liên kết để phù hợp với nó.

Và có những khoảnh khắc thậm chí còn thú vị hơn. Trên một trong những tài nguyên trên mạng, bạn thích một trong những yếu tố mà tác giả đã triển khai trên trang web của mình và bạn thực sự muốn làm điều gì đó tương tự trên blog của mình. Nhưng làm thế nào bạn có thể biết anh ấy sử dụng mã nào để triển khai phần tử này? Câu trả lời rất đơn giản - plugin Firebug sẽ giúp bạn! Vâng, vâng, bạn đã nghe đúng, bằng cách sử dụng tiện ích mở rộng Firebug, bạn có thể xem mã HTML không chỉ của các trang trong tài nguyên của mình mà còn của bất kỳ trang nào khác.

Plugin Firebug sẽ giúp bạn giải quyết tất cả những điều này và hơn thế nữa. Và tôi chỉ liệt kê những vấn đề hoạt động chính mà các quản trị viên web thường phải giải quyết. Trên thực tế, plugin còn có rất nhiều tính năng khác nhưng tôi sẽ không nói về chúng trong bài viết này. Có lẽ một thời gian sau, nhưng không phải hôm nay.

Tất nhiên, bạn có thể làm mọi thứ tôi liệt kê mà không cần plugin. Ví dụ: nếu bạn cần tìm phần mã chịu trách nhiệm hiển thị ngày và giờ, bạn có thể nhấp vào trang trình duyệt tương ứng nút bên phải chuột và chọn “ Nguồn trang" hoặc sử dụng phím nóng Ctrl+U.

Nhưng trong trường hợp này, bạn sẽ thấy HTML - mã cho tất cả nội dung mở trang, và bạn chỉ cần phần chịu trách nhiệm hiển thị ngày giờ. Vậy lúc đó bạn nên làm gì? Bạn sẽ phải xem xét cẩn thận tất cả các mã để tìm thấy những gì bạn cần. Và nếu bạn hoàn toàn không hiểu HTML thì việc tìm kiếm sẽ vô ích. Con bọ lửa cung cấp cho chúng ta những gì trong trường hợp này?

Mọi thứ đều rất đơn giản, nó sẽ ngay lập tức cung cấp cho bạn một đoạn mã làm sẵn mà bạn đang tìm kiếm. Để thực hiện việc này, chỉ cần di chuột qua phần tử bạn thích, nhấp chuột phải và chọn “Kiểm tra phần tử bằng Firebug” từ cùng danh sách thả xuống (trong các trình duyệt khác nhau tên hơi khác một chút):

Firebug cũng sẽ hiển thị phần mã bạn quan tâm, đánh dấu nó bằng màu xanh lam:

Nhưng đó không phải là tất cả. Bạn có thể vào ngay sự thay đổi cần thiết vào mã mà không sợ bị nhầm lẫn! Thực tế là plugin này cho phép bạn chỉnh sửa HTML và Mã CSS, quan sát trong thời gian thực tất cả những thay đổi xảy ra. Và điểm cộng lớn nhất là chỉ có bạn mới nhìn thấy chúng.

Và sau đó, nếu bạn hài lòng những thay đổi đã làm, bạn sẽ có thể biến chúng thành hiện thực, nhưng nếu không, sau khi làm mới trang, mọi thay đổi sẽ biến mất ngay lập tức! Chuyện là thế đấy các bạn ạ. Bây giờ tôi đang ở trên ví dụ cụ thể Tôi sẽ cho bạn thấy mọi thứ diễn ra như thế nào. Nhưng trước khi bắt đầu, hãy tải xuống và cài đặt plugin Firebug trên máy tính của bạn. Chúng ta cũng cần đề cập thêm một số điểm liên quan đến các trình duyệt khác nhau.

Mọi người dùng Internet đều thích một trong những trình duyệt yêu thích của họ. Trình duyệt là phần mềmđể yêu cầu và xem các trang web. Ngày nay, những cái phổ biến nhất là Mozilla Firefox và Google Chrome.

Cá nhân tôi là một người hâm mộ lâu năm. trình duyệt Mozilla Firefox, mặc dù đối với tôi, Google Chrome có vẻ khá nhanh hơn và nhiều chức năng hơn. Có lẽ đó là vấn đề của thói quen.

Vì vậy, ban đầu tiện ích mở rộng Firebug được phát triển riêng cho trình duyệt Mozilla Firefox, nhưng thời gian không đứng yên và các nhà phát triển đã mở rộng “firebug” sang các trình duyệt khác. Nhưng bản gốc vẫn là bản gốc.

Và nếu trên Mozilla Trình cắm Firefoxđược cài đặt rất đơn giản, sau đó tìm trang có tiện ích mở rộng cài đặt Nó hơi phức tạp đối với Google Chrome. Vì vậy, tôi quyết định hiển thị cả hai tùy chọn để cài đặt plugin tuyệt vời này. Vì vậy, chúng ta hãy vượt qua.

Hầu hết các quản trị viên web mới vào nghề không phân biệt giữa các trình duyệt. Và thực sự, có sự khác biệt cơ bản nào không? Câu trả lời tự gợi ý. Sẽ không có sự khác biệt nào vì trang web của bạn sẽ trông giống nhau trong mọi trình duyệt.

Tuy nhiên, có một sự khác biệt. Và trước hết, nó liên quan đến quản trị trang web. Bởi vì khi tạo và gỡ lỗi, sẽ thuận tiện hơn khi sử dụng trình duyệt sẽ giúp bạn việc này.

Hay đúng hơn, không phải bản thân trình duyệt mà là một phần bổ sung cho nó.

Vì vậy, hãy gặp tôi, hôm nay tôi sẽ kể cho bạn nghe về điều này một plugin không thể thiếu cho Mozilla Firefox, như Firebug.

Và câu hỏi đầu tiên: Firebug là gì?

Firebug là một tiện ích mở rộng cho trình duyệt Mozilla Firefox, là bảng điều khiển để gỡ lỗi và xác định các lỗi xảy ra trong quá trình phát triển trang web.

Nó cung cấp cho quản trị viên web nhiều công cụ để đánh giá hiệu suất của mã trang, hiển thị các kiểu CSS được liên kết với từng thành phần và cho phép bạn thay đổi các đoạn mã và kiểu mã trong thời gian thực. Và ngay lập tức, không cần rời khỏi trình duyệt, hãy xem kết quả của những thay đổi này.

Làm cách nào để cài đặt Firebug?

Việc cài đặt Firebug khá đơn giản. Đầu tiên, hãy khởi chạy Mozilla Firefox (Firebug chỉ được cài đặt trên trình duyệt này) và theo liên kết: . Chúng tôi tìm thấy nút “Cài đặt Firebug” ở đó. Nhấp vào nó và bạn sẽ được đưa đến trang cài đặt các tiện ích bổ sung cho Firefox.

Nhấp vào nút Thêm vào Firefox. Tải plugin và một cửa sổ xuất hiện:

Nhấp vào “Cài đặt ngay”. Tất cả. Cài đặt hoàn tất.

Để plugin hoạt động, bạn cần khởi động lại trình duyệt Firefox. Sau khi khởi động lại, một nút để bật tiện ích mở rộng Firebug sẽ xuất hiện trong bảng trình duyệt.

Làm thế nào để sử dụng Firebug?

Có khá nhiều cách để sử dụng Firebug vì nó chứa nhiều công cụ. Tôi sẽ không mô tả tất cả. Tôi sẽ chỉ nói với bạn về một số cái chính.

Đầu tiên, Firebug cho phép bạn nhanh chóng tìm những mảnh cần thiết mã và xác định mã chính xác cho chúng để gán kiểu CSS cho chúng. Nó cũng hiển thị trong tệp nào và dòng nào các kiểu cho đoạn mã hoặc bộ chọn đã chọn được viết.

Thứ hai, Firebug làm được điều đó chọn tham số thuộc tính trong thời gian thực mà không cần tải lại trang và không cần chỉnh sửa bất kỳ tệp nào.

Thứ ba, Firebug cho phép bạn theo dõi thứ bậc của mô hình vùng chứa bằng cách đánh dấu các tham số của khối đã chọn bằng các màu khác nhau trong cửa sổ trình duyệt (lề, phần đệm, đường viền). Firebug cũng có một công cụ tiện dụng để phân tích bố cục khối và thay đổi các thuộc tính một cách nhanh chóng.

Thứ tư, Firebug chứa công cụ tiện lợiđể phân tích tốc độ tải trang và nhiều điều thú vị hơn nữa.

Nếu bạn muốn tìm hiểu thêm về các nguyên tắc sử dụng tiện ích bổ sung Firebug, bạn có thể đọc về chúng trên trang web chính thức.

Và tôi đã chuẩn bị cho bạn đoạn video ngắn. Một số ví dụ về việc sử dụng Firebug. Nhìn thấy:

Tôi đã sử dụng Firebug được một năm và tôi thấy tiện ích mở rộng này rất tiện lợi. Nhiều người vẫn chưa biết cách sử dụng.

Họ muốn có sẵn một số loại hướng dẫn với các ví dụ về cách làm việc với Firebug. Thế là tôi quyết định viết hướng dẫn này. Tôi đã cố gắng hết sức để nói về tất cả những điều phức tạp khi làm việc với Firebug và hiển thị chúng, đưa ra các ví dụ về mã nguồn và ảnh chụp màn hình của tác phẩm.

Tại sao lại là Firebug?

Firebug là một trong những phổ biến nhất Tiện ích mở rộng của Mozilla Firefox. Nó cũng là một công cụ giúp công việc của nhà phát triển web trở nên dễ dàng hơn. Nó bao gồm nhiều công cụ tuyệt vời để trợ giúp gỡ lỗi, kiểm tra HTML, lập hồ sơ, v.v. sẽ hữu ích cho các lập trình viên.

Công cụ

  • Gỡ lỗi Javascript
  • Dòng lệnh Javascript
  • Kiểm tra hiệu suất Javascript và XmlHttpRequest
  • Đăng nhập thông qua đăng nhập
  • Truy tìm
  • Xác thực HTML và chỉnh sửa HTML
  • Chỉnh sửa CSS

Tôi có thể lấy Firebug ở đâu?

  1. Truy cập trang web chính thức getfirebug.com
  2. Ở đó, ở phía bên phải của trang web, bạn sẽ thấy một nút. Bấm vào nó để bắt đầu cài đặt.
  3. Sau khi nhấp vào hình ảnh, hộp thoại sau sẽ xuất hiện. Nhấp vào nút “Cài đặt ngay”.


Menu Firebug và Bảng điều khiển Lỗi sẽ mở trong Firefox trong menu Công cụ. Nếu bạn nhấp vào bảng điều khiển lỗi của chúng tôi, một cửa sổ sẽ mở ra với danh sách các lỗi hệ thống, cảnh báo và thông báo. Trên thực tế, bảng điều khiển lỗi này cũng giống như phần Firebug.

Thực đơn bọ lửa

Sau khi nhấp vào “Firebug” trong menu “Tools”, menu con sau sẽ mở ra.

Kiểm tra nội dung trang

Đây là menu duy nhất có tên “Kiểm tra phần tử” - chỉ cần nhấp chuột phải vào bất kỳ đâu trên trang. Đây là một thực đơn rất hữu ích.

Bảng điều khiển Firebug

Hình ảnh bên dưới hiển thị bảng điều khiển Firebug.


Nó bao gồm sáu tab: Console, HTML, CSS, Script, DOM và tab Net.

  • Tab Console: Để tạo thông tin đăng nhập, thiết lập hồ sơ, theo dõi và thực thi các lệnh dòng lệnh.
  • Tab HTML: Để kiểm tra các phần tử HTML, thêm HTML và những thay đổi về phong cách khi ra mắt. Ngoài ra, các phần phụ của bảng điều khiển CSS, Bố cục và DOM cũng được đặt ở đây.
  • Tab CSS: Tại đây bạn có thể dễ dàng kiểm tra xem có bao nhiêu tệp css được đưa vào một trang của trang web. Bạn có thể chọn bất kỳ tệp css nào và thực hiện các thay đổi đối với nó. (Tôi không sử dụng phần này nhiều vì phần HTML cũng có nội dung tương tự).
  • Tab script: Dùng để gỡ lỗi Mã Javascript. Chức năng xem và dừng thực thi tập lệnh cũng được bao gồm ở đây.
  • Tab DOM: Dùng để xem DOM. (Tôi không thực sự sử dụng chức năng này. Tuy nhiên, tôi sử dụng nó từ bảng điều khiển HTML và Script).
  • Tab mạng: Dùng để giám sát hoạt động mạng. Nó sẽ cho bạn biết lý do tại sao trang của bạn (hoặc toàn bộ trang web của bạn) mất quá nhiều thời gian để tải trong trình duyệt.

Phím nóng và nút chuột

F12. Được sử dụng để mở/đóng bảng điều khiển Firebug.
Bạn có thể đọc về tất cả các phím nóng.

Dưới đây là hai video hướng dẫn sử dụng FireBag

Đang có những vấn đề?

Đọc trang Câu hỏi thường gặp. Nếu vấn đề vẫn chưa được giải quyết, vui lòng viết bình luận tại đây. Tôi sẽ cố gắng trả lời nó nhanh nhất có thể. Bạn cũng có thể liên hệ với nhóm phát triển Firebug.

Điểm mấu chốt

Đó là tất cả! Tôi nghĩ bây giờ bạn đã biết firebug là gì, nó trông như thế nào và cách cài đặt nó. Nếu bạn đã quen thuộc với firebug, phần này cũng sẽ hữu ích để bạn củng cố kiến ​​thức của mình. Tôi sẽ đi vào chi tiết hơn về từng tính năng trong các phần sau. Hãy để lại nhận xét về bài viết và bày tỏ ý tưởng của bạn về vấn đề này. Ý kiến ​​​​của bạn sẽ chỉ làm cho bài viết này tốt hơn. Và tôi sẽ rất biết ơn họ.

Sửa lỗi là điều kiện cần thiết cho bất kỳ công việc nào, dù là viết bài cho báo hay xây dựng website. Trong kỷ nguyên máy tính, công việc xử lý lỗi từ lâu đã được tự động hóa. Ví dụ, để sửa lỗi ngữ pháp, có một trình kiểm tra chính tả trong trình soạn thảo bài kiểm tra văn phòng, giúp hội anh em viết tiểu thuyết, truyện, bài báo, thậm chí có thể nói là không biết toàn bộ bảng chữ cái. Có những công cụ tương tự dành cho người viết siêu văn bản - nhà phát triển web. Một ví dụ về công cụ phổ biến nhất hiện nay là tiện ích mở rộng Firebug cho Firefox.


Điều đầu tiên là Firebug

Firebug đã trở thành một trong những ứng dụng được các nhà thiết kế và lập trình web yêu thích nhất. Ngược lại, sự phổ biến của tiện ích mở rộng này đã buộc những người tạo ra các trình duyệt cạnh tranh cũng phải đưa chức năng tương tự vào trình duyệt web của họ. Nhưng vì Firebug, như họ nói, hiện là “người thiết lập xu hướng”, nên trong bài viết này, trước tiên chúng ta sẽ làm quen với nó và sau đó, dựa trên nền tảng của nó, chúng ta sẽ xem xét các điểm tương tự trong các trình duyệt khác.

Firebug được tạo bởi lập trình viên Joe Hewitt và, như chúng tôi đã nói, được thiết kế để kiểm tra lỗi trên các trang web - đánh dấu HTML, kiểu CSS, tập lệnh JavaScript. Ngoài ra, bằng cách sử dụng tiện ích mở rộng này, bạn có thể đánh giá các khu vực có vấn đề khi tải một trang vào trình duyệt.

Firebug (getfirebug.com) cài đặt dưới dạng tiện ích mở rộng cho Firefox. Sau khi cài đặt, biểu tượng lỗi sẽ xuất hiện ở góc dưới bên phải của trình duyệt; nhấp vào biểu tượng đó sẽ mở ra một cửa sổ đặc biệt ở cuối trình duyệt. Tùy thuộc vào chế độ vận hành, cửa sổ bổ sung thứ hai có thể xuất hiện ở phía bên phải. Firebug cũng có thể được khởi chạy dưới dạng một ứng dụng độc lập, thuận tiện cho những người có hai màn hình.

Có sáu chế độ gỡ lỗi chính - HTML, CSS, JavaScript, console, DOM và mạng. Mỗi chế độ có tab riêng trong menu chính của trình gỡ lỗi web. Nhân tiện, Firebug được Nga hóa.

Chúng ta hãy xem xét kỹ hơn cách làm việc ở từng chế độ.

Gỡ lỗi HTML. Kiểm tra một trang HTML bằng Fireburg là một điều thú vị. Nhấp vào biểu tượng mũi tên trong menu chính, di con trỏ qua một thành phần của trang web và mã được đánh dấu cho thành phần này sẽ ngay lập tức xuất hiện trong cửa sổ HTML. Và bạn không còn cần phải mất nhiều thời gian tìm kiếm một phần tử có vấn đề ẩn sâu trong mã nữa. Ngoài ra, thông tin bổ sung về kiểu, vị trí của phần tử và thuộc tính DOM của nó sẽ xuất hiện trong cửa sổ phụ bên phải.

Nội dung của phần tử được đánh dấu có thể được chỉnh sửa ngay lập tức chỉ bằng một cử động nhẹ của tay và có thể nhìn thấy ngay những thay đổi được thực hiện.

Hỗ trợ gấp mã. Firebug còn cho phép bạn chủ động sử dụng nút Tab và nút lên xuống. Tab được sử dụng để di chuyển qua các thuộc tính của một phần tử trong khi chỉnh sửa. Và bằng cách sử dụng phím “lên” và “xuống”, bạn có thể chuyển đổi giá trị của các thuộc tính. Nghĩa là, Firebug sẽ tăng hoặc giảm giá trị của thuộc tính số thêm 1 nếu bạn nhấn lần lượt “lên” hoặc “xuống”.

Điều quan trọng là tab đặc biệt trong cửa sổ phụ bổ sung có tên là "Bố cục". Mỗi phần tử của một trang web được chứa trong các thùng chứa lề, đường viền và phần đệm được lồng nhau một cách tuần tự. Tab "Bố cục" phản ánh chính các vùng chứa này dưới dạng hình chữ nhật nhiều màu tượng trưng. Bạn có thể thay đổi giá trị của chúng giống như các giá trị khác phần tử html và ngay lập tức xem diện mạo của trang thay đổi như thế nào.

Chỉnh sửa CSS. Sửa Kiểu CSSĐiều này có thể được thực hiện trong cửa sổ chế độ HTML phụ hoặc ở chế độ gốc riêng biệt. Việc chỉnh sửa CSS cũng rất thuận tiện: ở đây bạn có thể và nên sử dụng phím lên xuống. Điều này cho phép bạn thay đổi không chỉ các giá trị Bộ chọn CSS, mà còn cả các bộ chọn, vì Firebug chứa từ điển hoàn chỉnh xếp tầng các từ khóa của bảng định kiểu.

Bất kì Thuộc tính CSS Bạn có thể nhanh chóng vô hiệu hóa và bật lại bằng cách nhấp vào nút nhỏ màu xám xuất hiện ở bên trái khi bạn di chuột qua thuộc tính CSS.

Khi bạn di con trỏ qua thuộc tính màu hoặc hình ảnh, một cửa sổ xem trước nhỏ cho màu hoặc hình ảnh đó sẽ xuất hiện. Hơn nữa, trong trường hợp hình ảnh, kích thước của nó được hiển thị.

Chế độ mạng. Chế độ này cho phép bạn kiểm tra thời gian tải của tất cả các tệp tạo nên một trang web. Điều này bao gồm tải xuống các biểu ngữ, hình ảnh, tập lệnh js và tệp kiểu. Điều rất quan trọng là có thể xem phần tải xuống của từng tệp riêng lẻ.

"Ognezhuk" hiển thị biểu đồ tải xuống cho mỗi tệp. Các biểu đồ sẽ hiển thị thời gian yêu cầu HTTP, thời gian nhận dữ liệu và thời gian chờ dữ liệu với các màu khác nhau.

Đối với mỗi lần tải xuống, bạn có thể xem tiêu đề http bằng cách nhấp vào dấu thập bên cạnh mỗi yêu cầu.

Trình gỡ lỗi JavaScript. Firebug là một trình gỡ lỗi mạnh mẽ cho các tập lệnh JavaScript. Để gỡ lỗi này, có một chế độ riêng biệt đặc biệt "Tập lệnh". Tại đây bạn có thể đặt điểm dừng bằng một cú nhấp chuột vào số dòng mã. Hơn nữa, điểm dừng có thể có điều kiện, chẳng hạn như chỉ kích hoạt khi nhấn nút trên trang.

Khi gỡ lỗi trong thời gian dừng, một cửa sổ bổ sung sẽ hiển thị một loạt lệnh gọi hàm đang chờ quay lại. Và trong tab “Quan sát” của cửa sổ bổ sung, các giá trị của đối tượng DOM sẽ được hiển thị.

Bảng điều khiển.Điều rất tuyệt vời. Bảng điều khiển Fireburg gần giống như bash trên Linux. Đại diện cho dòng lệnh. Tại đây bạn có thể nhập và thực thi các lệnh JavaScript riêng lẻ hoặc dưới dạng toàn bộ tập lệnh.

Hơn nữa, bảng điều khiển Firebug có các lệnh đặc biệt của riêng nó. Ví dụ: có lệnh console.log, tương tự như printf trong C:

>>> console.log("Xin chào thế giới!") Xin chào thế giới!

Bảng điều khiển có một chức năng rất quan trọng - trình hồ sơ. Công cụ này giúp bạn đo lường hiệu suất của tập lệnh. Ở chế độ bảng điều khiển, bạn chỉ cần nhấp vào nút tương ứng và sau khi tải lại trang, hãy nhấp lại vào nút “Hồ sơ”. Kết quả là một báo cáo chi tiết sẽ được hiển thị về thời gian hoạt động của từng chức năng trong tập lệnh js của bạn.

Chế độ DOM ( Đối tượng tài liệu Người mẫu). Mô hình Đối tượng Tài liệu là thứ mà trình duyệt nội bộ biến trang web được tải thành. DOM là giao diện lập trình cho phép các tập lệnh JavaScript thực hiện các thay đổi đối với cửa sổ trình duyệt hiển thị. Cửa sổ chế độ Firebug này chứa một hệ thống phân cấp các đối tượng trang web và cho phép chúng được thao tác nhanh chóng trong thời gian thực mà không cần dùng đến cùng một bảng điều khiển.

Và một tính năng chính khác của Firebug là các tiện ích mở rộng, xứng đáng có một bài viết riêng. Giống như trình duyệt Firefox, Firebug có thể nâng cao khả năng của nó bằng các tiện ích mở rộng bổ sung, từ tô sáng cú pháp đến tham chiếu HTML tích hợp. Khả năng mở rộng này là điều hiện khiến Firebug trở thành trình duyệt dẫn đầu không thể tranh cãi so với các trình duyệt khác.


Thay thế

Tất nhiên, các đối thủ của Firefox cũng không ngồi yên, họ đang tích cực làm việc theo hướng này và cung cấp chức năng tương tự Firebug trong trình duyệt của mình. Chức năng này liên tục được cải tiến, do đó các mô tả bên dưới có thể đã lỗi thời ngay cả vào thời điểm số báo này được xuất bản. Vì vậy, tôi sẽ nói ngắn gọn và bỏ qua những so sánh holivar.

bệnh đa xơ cứng trình duyệt web IE 8. Tương tự như Firebug trong IE 8, về chức năng, nó lặp lại hầu hết các chế độ mở rộng của Firefox. Có một chế độ HTML với tính năng gấp và CSS, cho phép bạn chọn thành phần bạn cần chỉnh sửa trên trang chỉ bằng một cú nhấp chuột, đồng thời theo dõi các thay đổi trong thời gian thực. Có một bố cục bổ sung - tương tự như tab "Bố cục". Tuy nhiên, phím lên xuống tab Unix không được sử dụng.

Vì Gỡ lỗi JavaScript Có các chế độ tương ứng là “Kịch bản” và “Hồ sơ”. Bảng điều khiển cũng hiện diện một cách khiêm tốn trong một tab bổ sung. Tuy nhiên, lệnh console.log không được hỗ trợ. Có thể chưa được hỗ trợ. Và khá khó chịu là không có chế độ “Mạng” cho phép bạn đánh giá tốc độ tải của trang web. Cũng không có công cụ thuận tiện nào để kiểm tra DOM.

Tuy nhiên, công cụ phát triển IE 8 có tính năng chuyển đổi chế độ trình duyệt giữa IE 7 và IE 8. Đây là một tính năng quan trọng đối với nhiều nhà thiết kế web.

Táo Safari. Trình duyệt Safari cũng tự hào có một công cụ tương tự như Firebug và có thiết kế phong cách hơn so với IE 8 khó coi. chế độ xem HTML, CSS, "Bố cục phần tử". Nhưng việc điều hướng và tìm kiếm phần tử mong muốn chỉ có trong mã html. Việc chỉnh sửa các thuộc tính của một phần tử tìm thấy cũng rất thô sơ khi không có phím tab “lên và xuống”. Nhưng cũng có thể xem và thay đổi các thuộc tính của phần tử DOM.

Chế độ "Mạng" hiện có. Gỡ lỗi và lập hồ sơ JavaScript được bao gồm. Và có một bảng điều khiển nâng cao có tính năng tự động hoàn thành, cũng như lệnh console.log.

Google Chrome. Công cụ phát triển trong Chrome có bề ngoài gần giống với công cụ tương tự từ Apple Safari. Trong phiên bản thứ ba của Google Browser, chức năng này bị giảm đi rất nhiều. Chỉ có xem mã, chế độ Mạng và bảng điều khiển. Nhưng chúng ta có thể nói rằng các công cụ gỡ lỗi cho Google Chrome và Apple Safari sẽ hoàn toàn giống nhau cả bên ngoài lẫn bên trong vì chúng sử dụng cùng một công cụ WebKit.

Opera Chuồn Chuồn."Dragonfly" của trình duyệt Opera thực tế lặp lại giao diện của "Fire Bug" với cửa sổ chính và cửa sổ bổ sung. Việc xem mã html và kiểu được thực hiện trong một tab DOM duy nhất. Có mã gấp. Đồng thời, cửa sổ bổ sung còn chứa chức năng được cung cấp bởi tab và phím lên xuống, như trong Firebug. Tab Vùng chứa chỉ nhằm mục đích cung cấp thông tin.

Bảng điều khiển hiện diện và chứa một dòng lệnh cho phép bạn thực thi Tập lệnh JavaScript mang tính tương tác. Có một trình gỡ lỗi và ghi nhật ký thực thi tập lệnh. Tuy nhiên, tính năng console.log bị thiếu.

Ở chế độ "Mạng", biểu đồ tải xuống cho từng tệp trang web riêng lẻ chỉ chứa thời gian chờ và tải xuống thực tế - về nguyên tắc là đủ cho hầu hết các trường hợp.

Do đó, các lựa chọn thay thế kém hơn về chức năng và sự tiện lợi so với Firefbug, nhưng, như người ta nói trong những trường hợp như vậy, chúng khá phù hợp với khu vực nông thôn. Lần đầu tiên làm quen với các công cụ sửa lỗi được tích hợp trong trình duyệt chắc chắn nên bắt đầu với Firebug dành cho Firefox.

Mikhail ASTAPCHIK