Advertisement
  1. Code
  2. Web Development
Code

Sử dụng Firefox Developer Edition cho việc phát triển Web

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Firefox Developer Edition được phát hành bởi Mozilla trong quá trình kỷ niệm mười năm của Firefox diễn ra vào năm ngoái. Gần đây, phiên bản 64-bit của Firefox Developer Edition cũng đã được phát hành cho Windows, Linux và Mac OS X. Firefox Developer Edition cung cấp khả năng truy xuất dễ dàng đối với một tập hợp các công cụ cho người phát triển giúp họ sửa lỗi dễ dàng, giúp tăng tốc cho các nhà phát triển chuyên nghiệp. Bạn có thể tải về phiên bản mới nhất của Firefox Developer Edition tại đây. Chúng ta hãy tìm hiểu về những tính năng tốt nhất của Firefox Developer Edition.

WebIDE

WebIDE Running Firefox OS 22

Với WebIDE, bạn có thể tạo, chỉnh sửa, kiểm nghiệm hoặc gỡ lỗi các ứng dụng web bằng cách chạy chúng trên chương trình mô phỏng Firefox OS. Nếu như bạn tạo một ứng dụng web mới, nó đồng thời tạo một sườn cơ bản của ứng dụng hoặc một cái sườn hoàn thiện cho bạn cùng với một cấu trúc thư mục phù hợp. WebIDE cũng cho phép bạn kết nối Firefox Devtools tới nhiều trình duyệt web khác chẳng hạn như Safari (iOS), Firefox (Android) và Chrome (Android).

Responsive Design View

Responsive Design View

Responsive Design View trong Firefox có thể được gọi bằng cách nhấn tổ hợp phím Ctrl + Shift + M. Bạn có thể kiểm tra khả năng đáp ứng của ứng dụng web với sự trợ giúp của công cụ này. Nó cung cấp một số tuỳ chọn chẳng hạn như thiết lập kích thước của thiết bị mà bạn muốn mô phỏng, xoay màn hình (chuyển từ chế độ đứng sang nằm ngang), mô phỏng sự kiện chạm màn hình và chụp ảnh màn hình của trang web ở trong chế độ đáp ứng.

Eyedropper Tool

Eyedropper Tool

Eyedropper Tool thật sự là một công cụ tuyệt vời, nó giúp bạn biết giá trị thập lục phân của bất kỳ màu sắc nào trong một trang web (cũng giống như công cụ eyedropper trong Photoshop). Công cụ này giúp việc tìm kiếm màu sắc của bất cứ thành phần nào hoặc hình ảnh nào, cái mà cần phải tìm kiếm trong mã nguồn của nó thông qua Element Inspector. Nhấp chuột trên màu sắc sao chép giá trị của nó vào bộ nhớ tạm!

Browser Inspector

Browser Inspector

Tất cả chúng ta đều phải làm việc với Element Inspector, vậy thì Element Inspector là cái quái gì? À, Element Inspector được dử dụng cho mục đích gỡ lỗi cho chính trình duyệt Firefox. Nếu bạn muốn thay đổi màu sắc của thanh URL hoặc ví dụ như thay thổi độ cong của các tab với những kết quả không cố định, thì bạn có thể làm điều đó thông qua Element Inspector. Cho dù chúng ta có thể đạt được điều này thông qua Scratchpad, nhưng Browser Inspector là tính năng tuyệt vời nếu như bạn không phải là một Người phát triển Firefox hoặc nếu bạn chỉ muốn kiểm tra sự thay đổi của bạn.

3D View

3D View

Bây giờ thì, tôi cảm thấy đây là tính năng tuyệt vời nhất của Firefox Developer Tools. Bạn có thể xem chế độ 3D của bất kỳ trang web nào, nơi mà mỗi khối nhô lên biểu diễn một thành phần HTML, theo thứ tự của các mã HTML lồng nhau trong trang web. Điều này giúp cho bạn biết thành phần nào được đặt trong thành phần nào. Bạn có thể truy xuất 3D View bằng cách nhất tổ hợp phím Ctrl + Shift + C và sau đó lựa chọn biểu tượng cái hộp ở phía trên tay phải của cái bảng được mở mới nhất.

Scratchpad

Scratchpad

Bạn có thể mở Scratchpad bằng cách nhất tổ hợp phím Shift + F4. Scratchpad có thể được sử dụng để chạy các đoạn mã javascript và chỉnh sửa, chạy và quan sát kết quả. Đặc điểm mà nó khác so với Browser Console là Browser Console được thiết kế cho việc biên dịch một dòng mã javascript tại một thời điểm, nhưng với Scratchpad bạ có thể làm việc với những đoạn mã lớn hơn, thực thi nó theo nhiều cách tuỳ thuộc vào việc bạn muốn xuất ra kết quả như thế nào.

Kết thúc

Firefox Developer Edition cung cấp một dãy các công cụ cho việc tạo, gỡ lỗi, giám sát khả năng thực thi, gỡ lỗi trình duyệt và mở rộng chính DevTools. Việc giả thích toàn bộ công cụ nằm ngoài phạm vi của bài viết này. Tuy nhiên, bạn có thể xem danh sách toàn bộ các công cụ tại đây. Chúng tôi hy vọng rằng việc giới thiệu các công cụ ở trên sẽ giúp cho bạn trong việc phát triển web hằng ngày của bạn.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.