Sử dụng Firefox Developer Edition để xây dựng Web

2016-04-30 07:34:49

Firefox Developer Edition được phát hành vào năm ngoái bởi Mozilla cho dịp lễ kỉ niệm 10 năm thành lập Firefox. Và Gần đây, Phiên bản 64-bit của  Firefox Developer Edition đã được tích hợp sẵn trên Windows, Linux và Mac OS X. Firefox Developer Edition cung cấp việc truy cập dễ dàng một mảng rộng các công cụ phát triển nó còn giúp cho việc debug dễ dàng, nhanh chóng và thật sự chuyên nghiệp cho nhà phát triển. Bạn có thể download phiên bản mới nhất của Firefox Developer Edition tại đây

Bài viết này tôi cũng sẽ điểm qua một số tính năng tuyệt vời của Firefix Developer Edition.

 

Firefox Developer Editior 1

WebIDE

Với WebIDE, bạn có thể tạo, chỉnh sửa, kiểm tra hoặc debug ứng dụng web trên giả lập Firefox OS. Nếu bạn tạo ra một ứng dụng web mới, nó cũng có thể tạo ra mẫu ứng dụng nền tảng hoặc nhiều mảng cho bạn cùng với cấu trúc thư mục trực tiếp. WebIDE còn cho phép bạn kết nối với Firefox Devtools đến nhiều trình duyệt khác như Safari (iOS), Firefox (Android) và Chrome (Android).

Firefox Developer Editior 2

Responsive Design View

Thiết kế Responsive với Firefox bạn có thể sử dụng tổ hợp phím Ctr+Shift+M. Bạn có thể kiểm tra responsiveness của website với nhiều tiện ích này. Nó cung cấp một số lựa chọn cài đặt kích thước của thiết bị mà bạn muốn mô phỏng, xoay màn hình ( thay đổi từ chế độ portrait sang landscape ), mô hinh hóa sự kiện click chuột và lấy ảnh chụp màn hình của webpage ở chế độ này.

Firefox Developer Editior 3

Eyedropper Tool

Công cụ Eyedropper là một công cụ rất đáng kinh ngạc. Nó giúp bạn biết được giá trị hexadecimal của một số màu ở một website ( tương tự eyedropper tool trong Photoshop ). Việc này giúp tìm kiếm bất kì màu sắc nào của hình ảnh , hoặc duyệt màu thông qua phần tử Element Inspector. Nhấp chuột vào màu bạn muốn copy và sẽ thấy được giá trị cần tìm.

Firefox Developer Editior 4

Browser Inspector

Chúng ta đã làm việc với Element Inspector, và bây giờ Browser Inspector là cái gì ?. OK! , Browser Inspector là một chương trình debug ngày trên trình duyệt Firefox của chính nó. Nếu bạn muốn thay đổi màu của thanh URL  hoặc đường cong, hay viền của các tabs với các kết quả thay đổi, khi đó bạn có thể sử dụng Browser Inspector để hỗ trợ việc này dễ dàng. Mặc dù kết quả thông qua Scratchpad, Browser Inspector thì là tuyệt vời nếu bạn không phải là một nhà phát triển Firefox hoặc bạn chỉ muốn kiểm tra sự thay đổi

Firefox Developer Editior 5

3D View

Bây giờ, 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ể thấy được hình ảnh 3D của bất kì trang web nào, Nơi mà mỗi phép chiếu block là một yếu tố, theo thứ tự lồng nhau của website code. Nó giúp cho bạn biết thuộc tính nào cần được sắp xếp ở thuộc tính nào. Bạn có thể truy cập xem 3D bằng cách ấn tổ hợp phím Ctrl + shift + C và lựa chọn icon hình hộp bên phải bảng điều khiển mới được mở ra.

firefox-developer-edition 6

Scratchpad

Bạn có thể mở Scratchpad bằng tổ hợp Shift+F4. Scratchpad có thể sử dụng để chạy các cụm mã javascript và chỉnh sửa nó. được thiệt kế để giải mã 1 đoạn mã ở một thời điểm. Với  Scratchpad bạn có thể làm việc một số lượng lớn cụm mã javascript bằng nhiều cách khác nhau tùy thuộc yêu cầu sử dụng.

firefox-developer-edition 7

Kết luận

Trình duyệt Firefox Developer Edition chuẩn bị rất nhiều công cụ để tạo lập, debugg, giám sát hiệu suất, sửa lỗi các trình duyệt và mở rộng Devtool của mình. Tuy nhiên ban cũng có thể có cái nhìn toàn bộ các công cụ hỗ trợ ở đây.

Tôi hy vọng qua bài viết này sẽ giúp ích đôi điều cho công việc phát triển web của bạn.. !! đừng quên click quản cáo ủng hộ page nhé. Thanks


Nội dung Goctuvan được xuất bản bởi
tags

Bình luận

Nếu đã có tài khoản hãy đăng nhập

Viết đánh giá đầu tiên cho bài viết

Bài viết cùng chuyên mục