Trang chủ > Lập trình > Sử dụng Web Developer Tools của Firefox

Sử dụng Web Developer Tools của Firefox


Web Developer Tools của Firefox là một công cụ mạnh mẽ cho phép các lập trình viên kiểm tra trang web, thực hiện mã JavaScript, xem thông tin HTTP request và các thông điệp khác. Từ Firefox 10, công cụ này được bổ sung thêm Inspector và cập nhật Scratchpad.

Với những tính năng mới mẻ, kết hợp với add-on Firebug, Firefox sẽ trở thành môi trường lý tưởng để các nhà phát triển web thử nghiệm, kiểm tra sản phẩm của mình. Tất cả đều ở trong menu Tool > Web Developer.

Bây giờ chúng ta sẽ cùng lướt qua những tính năng của bộ công cụ này.

Page Inspector (Kiểm tra thành phần trang)

Để thực hiện kiểm tra thành phần trên trang web, click chuột phải và chọn Inspect Element (hoặc ấn Q). Cũng có thể sử dụng từ menu Web Developer > Inspect, hoặc tổ hợp phím tắt Ctrl + Shift + I.

Page Inspector

Sẽ có một thanh công cụ ở dưới màn hình, bạn có thể dùng nó để điều khiển các phần được kiểm tra. Khi một yếu tố được lựa chọn, các thành phần khác sẽ mờ đi.

Nếu muốn kiểm tra một thành phần mới, click vào nút Inspect trên thanh công cụ, và di chuyển chuột đến phần muốn kiểm tra. Firefox sẽ làm sáng vùng đó và mờ các phần khác đi.

HTML Inspector (Kiểm tra mã HTML)

Click vào nút HTML trên thanh công cụ để xem mã HTML của vùng đang được chọn.

Các thẻ HTML sẽ được thu gọn hoặc mở rộng để dễ theo dõi. Nếu bạn muốn xem mã này trên một cửa sổ khác rộng hơn thì lựa chọn chức năng View Page Source từ menu Web Developer.

CSS Inspector (Kiểm tra mã CSS)

Click vào nút Style trên thanh công cụ để xem mã CSS áp dụng cho các thành phần hiện tại.

Ngoài ra còn có bảng Properties (các thuộc tính), để chuyển đổi qua lại bạn ấn vào từng nút tương ứng ở panel bên phải. Panel cũng cung cấp một hộp tìm kiếm để bạn dễ dàng tìm được thành phần mong muốn.

Ngay ở panel này, bạn có thể tự thay đổi mã CSS theo ý của mình và xem sự thay đổi ở khung bên trái.

JavaScript Scratchpad

JavaScript Scratchpad được cập nhật trong Firefox 10, nó cho phép làm nổi bật cú pháp. Bạn có thể chạy mã JS ngay trên trang hiện tại.

Sau khi gõ xong, lựa chọn menu Excute > Run, đoạn mã sẽ được thực thi trong tab  hiện tại.

Web Console 

Web Console được thay thế cho Error Console trước đó.

Web Console hiển thị 4 loại thông điệp khác nhau, bạn có thể chuyển đổi qua lại giữa chúng – Network message, CSS Message, JavaScript Message hoặc Web Developer Message.

Thông điệp của Web Developer được gán vào đối tượng Window.console. Các nhà phát triển web có thể tích hợp các thông báo này vào mã JS để hỗ trợ gỡ lỗi.

Làm mới (refresh) trang web, bạn sẽ thấy các thông điệp network và các tin nhắn khác.

Sử dụng hộp tìm kiếm để lọc các tin nhắn; bấm vào một request để tìm hiểu chi tiết hơn.

Ở Firefox 10, Web Console có thể làm việc song song Page Inspector. Các biến $0 đại diện cho các đối tượng hiện tại được lựa chọn trong Page Inspector. Nếu bạn muốn ẩn chúng đi, ở cửa sổ Console có thể gõ vào $0.style.display=”none”.

Console là một công cụ mạnh, nếu bạn muốn am hiểu hơn về nó hãy ghé thăm trang Web Console trên website Mozilla’s Developer Network (mạng phát triển của Mozilla).

Sử dụng chức năng Get More Tools bạn sẽ đi đến bộ sưu tập add-on hỗ trợ việc phát triển web cho Firefox.

Hoàng Hải

(theo HowToGeek)

  1. Chưa có phản hồi.
  1. No trackbacks yet.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: