Firebug là tiện ích mở rộng mang lại cho lập trình sẵn viên phần lớn công cụ cung cấp cho việc phát triển website. Dưới đó là hướng dẫn sử dụng Firebug dành cho những ai thứ 1 tiếp xúc với ứng dụng này. Thuộc TMS mày mò nhé!

Firebug là gì?

Tương từ bỏ như Chrome, trình coi xét Firefox cũng đều có kho ứng dụng mở rộng hỗ trợ các lý lẽ hữu ích cho những người dùng. Firebug cũng là một trong số đó.

Bạn đang xem: Hướng dẫn sử dụng firebug

Firebug là phầm mềm mở rộng chúng ta cũng có thể cài bỏ lên trên Firefox, nó hỗ trợ các anh tài hữu ích dành riêng cho chuyên viên lập trình và phát triển website. Phầm mềm này có thể chấp nhận được bạn can thiệp sửa đổi HTML/CSS và thậm chí còn fix Javasript Error tức thì trên trình duyệt,…

*
Hướng dẫn thực hiện Firebug cho người mới làm cho quen

Có sự hỗ trợ của Firebug, việc xây dựng và phát triển website rất có thể được thực hiện nga bên trên Firefox, về tối ưu hóa thời gian và các tác vụ nhưng mà lập trình viên phải thực hiện. Mặc dù vì có tương đối nhiều tính năng liên quan đến các ngôn ngữ lập trình, Firebug khá nặng nề thành thạo so với những ai sẽ tiếp xúc. Nếu như khách hàng là người lần đầu tiếp xúc, hãy nhìn qua hướng dẫn áp dụng Firebug bên dưới đây.

Hướng dẫn áp dụng Firebug

Hướng dẫn áp dụng Firebug kể đến những làm quen thuộc với giao diện ứng dụng này cũng như cách áp dụng chúng để chỉnh sửa HTML, CSS trên trình coi sóc Firefox.

Để tuân theo hướng dẫn sử dụng Firebug, trước hết các bạn phải bao gồm trình duyệt Firefox và cài đặt Firebug bên trên trình để ý này. Đối với máy vi tính hệ điều hành Window, Firefox hoàn toàn có thể tìm thấy bên trên Microsoft Store hoặc cài đặt xuống trực tiếp từ website chủ yếu thức.

Cài đặt Firebug

Vào website getfirebug.com với tải ứng dụng về theo chỉ dẫn của website. Sau thời điểm đã thiết lập Firebug, ứng dụng sẽ tự động hóa được thêm vào ở bên đề xuất thanh nguyên lý của trình duyệt. Chúng ta cũng có thể tùy chỉnh để sàng lọc ghim Firebug bên trên thanh công cụ bằng cách sau:

Nhấn Ctrl + Shift + ASau khi tab bắt đầu hiện lên, chọn mục “Tiện ích mở rộng” sống cột mặt tráiỞ phần “Quản lý nhân thể ích”, kéo xuống tìm kiếm Firebug với nhấp vào nút switch nhằm thêm/ bỏ ứng dụng Firebug bên trên thanh công cụ.

Khởi động Firebug

Sau khi download đặt, khởi đụng Firebug để ban đầu làm theo hướng dẫn sử dụng Firebug. Gồm 3 bí quyết khởi đụng Firebug:

Sử dụng phím tắt F12 khi chúng ta đang ở trình để ý FirefoxMở Firebug bằng cách nhấn vào icon luôn thể ích ở góc phải thanh công cụNhấp con chuột phải, chọn Inspect Element with Firebug
*
Hướng dẫn thực hiện Firebug cho người mới làm cho quen

Kiểm tra ba cục website với Firebug

Sau lúc khởi hễ Firebug, bạn có thể dùng app này để soát sổ liệu trang web của mình có trường thọ lỗi về bố cục hay lỗi những thẻ khắc ghi hay không. Có tác dụng theo phía dẫn áp dụng Firebug sau:

Trong bối cảnh Firebug, chúng ta mặc định dựng chân lại tại tab HTML, tab này giúp kiểm soát các thành phần HTML của trang web, trong những số ấy có Node View Panel cùng HTML Side Panels.

1. Node View Panel

Khi bạn dừng chân ở HTML, những tab bên trái sẽ là các thành phần của HTML, trong những số ấy có Node View. Node view được cho phép chỉnh sửa các phần tử HTML tạo ra trang web mà các bạn sử dụng. Khi chỉnh sửa, hiệu quả hiện thẳng trên trang web và bạn dùng rất có thể thấy được ngay.

Di loài chuột hoặc nhấp vào phần mà bạn có nhu cầu chỉnh và gỡ lỗi hoặc fix các vấn đề margin, float,… chúng ta có thể nhận biết phần mình đang chỉnh sửa bởi trình chăm chút sẽ làm nổi bật chúng bằng việc hiển thị các khung xanh bao quanh.

Xem thêm: Bà Ơi Bà, Con Yêu Bà Lắm Tóc Bà Không Trắng Như Là Mây, Bà Oi Bà Con Yêu Bà Lắm Tóc Bà Ko Trắng

Bên cạnh đó, thanh qui định ngay bên dưới thanh tab HTML hiển thị kết cấu phân cung cấp của phần tử mà nhiều người đang chọn chỉnh sửa. Bạn có thể tìm phần tử HTML bằng phương pháp gõ thẳng vào ô search kiếm bên góc trên phía bên trái của đồ họa Firebug.

*
Hướng dẫn sử dụng Firebug cho những người mới có tác dụng quen2. HTML Side Panels

Phần HTML Side Panels nằm tại khung bên nên giao diện Firebug. Phần này hiển thị thông tin cụ thể hơn về những thành phần HTML mà các bạn đang bấm vào vào. Các thông tin này chia thành 4 tab nhỏ hơn, gồm:

Style: thương hiệu tệp tin, số cái CSSComputed: cho thấy cách trình chăm chút hiển thị các thành phần HTML qua font-size, color, text-align,…Layout: Hiển thị box model, tất cả padding, border, margin,…DOM: Hiển thị thông tin cấu trúc DOM của phần tử

Chỉnh sửa HTML trực tiếp

Ở phần hướng dẫn sử dụng Firebug này, họ tham khảo cách chỉnh sửa HTML trực tiếp bên trên trình coi ngó Firefox.

Firebug là một trong những công cụ hoàn hảo nhất giúp chúng ta có thể kiểm tra cấp tốc HTML bên trên trình chăm bẵm hoặc trên cả phần đa website nhưng mình không sở hữu. HTML hoàn toàn có thể được sửa đổi trong tab Node View, bạn chỉ cần nhấn vào vào phần mà mình thích chỉnh, thêm hoặc xóa văn bản theo ý thích. Phần hiển thị sẽ thay đổi tương yêu thích với đa số gì bạn chỉnh sửa bằng Firebug.

Tuy nhiên điều này không có nghĩa là bạn cũng có thể can thiệp cùng thực sự đổi khác HTML của bất cứ trang web nào. Firebug không lưu lại đoạn code mà các bạn chỉnh, khi reload lại trang, những đoạn code đã trở về như nguyên trạng ban đầu.

Dù vậy đây là cách tuyệt đối để lưu ý việc sửa đổi code tác động ảnh hưởng thế nào đến tác dụng hiển thị. Chúng khá giống như trình thể nghiệm code, bạn cũng có thể lưu đoạn code của bản thân vào trình biên soạn thảo văn phiên bản để giữ giàng chúng.

Hướng dẫn thực hiện Firebug chỉnh sửa CSS trực tiếp

CSS sẽ được hiển thị ở HTML Side Panels, được liệt kê theo trang bị tự Alphabet cùng nhóm lại trong tab Style. Luật lệ CSS gần nhất sẽ hiện nay ở trên cùng. Đồng thời, bạn cũng có thể chỉnh sửa CSS trong Style Panel này.

Nhấp con chuột vào ở trong tính mà bạn có nhu cầu sửa và sửa đổi nó, trình để ý sẽ hiển thị lập tức hiệu quả chỉnh sửa. Kề bên đó chúng ta có thể ẩn trực thuộc tính CSS để đánh giá xem nó ảnh hưởng như chũm nào đến kết quả hiển thị của trang web.

Trên đây là cách thiết lập và hướng dẫn sử dụng Firebug – nhân tiện ích cung ứng đắc lực cho các Web Developer. Ao ước là bài viết đã cung cấp cho bạn thông tin hữu ích, theo dõi và quan sát TMS để xem thêm về chủ thể này nhé!