Trình duyệt dành cho nhà phát triển web. Bạn nên chọn trình duyệt nào? Những bổ sung hữu ích dành cho nhà phát triển web

Firefox, với tư cách là một trình duyệt để phát triển web, có nhiều công cụ tuyệt vời giúp công việc của bạn trên trang web trở nên dễ dàng hơn. Chúng ta sẽ xem xét 10 tính năng được sử dụng phổ biến nhất mà các nhà phát triển web sử dụng trong bài viết này và xem xét các công cụ dành cho Nhà phát triển Firefox. Tin tôi đi, trình duyệt này ngay cả khi không cài đặt các tiện ích bổ sung vẫn có rất nhiều khả năng.

Nếu bạn sử dụng trình duyệt Google Chrome thì hãy nhớ xem qua lựa chọn plugin sau:

Tính năng dành cho nhà phát triển Firefox

Nếu đột nhiên bạn không có trình duyệt này, thì bạn có thể tải xuống phiên bản Firefox Developer mới nhất tại đây - Tải xuống Firefox từ trang web chính thức.

Nào, hãy cùng xem 10 công cụ trình duyệt Firefox này là gì mà bạn có thể sử dụng ngay khi cài đặt nhé.

1 Hiển thị thước dọc và thước ngang

Firefox cho phép bạn hiển thị thước ngang và thước dọc trực tiếp trên trang. Tính năng này rất hữu ích trong quá trình bố trí, tức là khi chúng ta đặt các thành phần trên trang.

Để hiển thị dòng này bạn cần làm như sau:

Trên bàn phím nhấn tổ hợp phím SHIFT+F2.
Trong bảng điều khiển xuất hiện ở cuối trang, nhập từ "thước kẻ".
Và sau đó nhấn ENTER.
Để tắt thước các bạn nhập lại từ “rulers”.

2 Chụp ảnh màn hình bằng bộ chọn CSS

Firefox Developer thực sự cho phép bạn chụp ảnh màn hình của toàn bộ trang hoặc chỉ phần hiển thị. Nhưng điều thú vị hơn là chụp ảnh màn hình bằng bộ chọn CSS.

Để chụp ảnh màn hình bằng bộ chọn CSS, hãy làm như sau:

Một lần nữa, nhấn tổ hợp phím SHIFT+F2 trên bàn phím, tức là bật bảng điều khiển.
Trong bảng điều khiển xuất hiện, nhập cụm từ " ảnh chụp màn hình -- bộ chọn YOUR_CSS_SELECTOR".
Và sau đó nhấn ENTER. Sau đó, bạn sẽ thấy một cửa sổ nơi bạn cần chọn thư mục để lưu hình ảnh.

3 Xác định màu sắc trên trang

Ngoài ra trong Firefox Developer còn có khả năng xác định màu sắc trên trang.

4 lớp trên mỗi trang ở chế độ 3D

Công cụ này cho phép bạn xem các lỗi khi hình thành cấu trúc của trang, vì ở đây tất cả các lớp đều được hiển thị rõ ràng và rõ ràng.

5 kiểu trình duyệt

Kiểu trình duyệt được hình thành từ các kiểu mà trình duyệt đặt theo mặc định và kiểu của một khách truy cập cụ thể, tức là các kiểu có tiền tố. Nhờ khả năng xem kiểu trình duyệt, bạn có thể dễ dàng chẩn đoán sự cố trong kiểu của mình nếu chúng bị ghi đè vì bất kỳ lý do gì.

6 Tắt Javascript cho phiên hiện tại

Cách tốt nhất là kiểm tra trang web của bạn khi tắt Javascript. Nghĩa là, với hành động này, chúng tôi mô phỏng Javascript bị vô hiệu hóa cho khách truy cập của bạn và xem trang web như thể nó được xem bởi một người không bật Javascript.

Nghĩa là, chúng tôi tắt Javascript trong phiên hiện tại và thoải mái kiểm tra nó.

7 Tự động vô hiệu hóa CSS

Đồng thời kiểm tra khả năng đọc trang web của bạn khi CSS bị tắt. Để xem trang của bạn trông như thế nào khi tắt CSS, bạn có thể tắt nó trong Firefox Developer.

Để tắt bất kỳ tệp kiểu nào, bạn cần mở Firefox Developer, đi tới khối “Styles” và ở cột bên phải đối diện với tệp kiểu được yêu cầu, nhấp vào biểu tượng bằng mắt để nó bị gạch chéo.

8 Xác định phông chữ trên một trang

Đôi khi bạn cần xác định phông chữ trên một trang, nhưng bạn không muốn mất nhiều thời gian tìm kiếm qua mã nguồn. Firefox Developer mang lại cơ hội tuyệt vời để xem rõ phông chữ nào được sử dụng trên một trang và thậm chí tìm ra chúng được kết nối từ đâu.

9 Kiểm tra khả năng thích ứng

Một cơ hội thực sự phù hợp vào lúc này. Bởi vì tất cả các trang web đều cố gắng thích ứng và việc kiểm tra bằng dịch vụ của bên thứ ba không phải lúc nào cũng thuận tiện và mất nhiều thời gian. Bây giờ bạn có thể sử dụng trình kiểm tra phản hồi tích hợp của Firefox.

Để kích hoạt chức năng này, bạn cần nhấn tổ hợp phím trên bàn phím: CTRL+SHIFT+M.

10 Thực thi Javascript trên một trang

Việc chạy nhanh mã Javascript trên một trang có thể được thực hiện dễ dàng bằng Firefox Developer. Có một chức năng như "Trình chỉnh sửa Javascript đơn giản". Tại đây bạn có thể viết bất kỳ mã Javascript nào và nó sẽ được thực thi như một tập lệnh thông thường bên trong trang, nghĩa là nó sẽ tương tác với tất cả các thành phần trên đó.

Video V

Cho dù bạn đã nghe nói gì về Google Chrome thì khi nói đến thiết kế và phát triển web, Firefox vẫn là trình duyệt thân thiện với IDE nhất mà bạn có thể tìm thấy.

Rất tiếc, Firefox thậm chí còn có một phiên bản trình duyệt đặc biệt dành riêng cho các nhà phát triển web. Đó là mức độ quan tâm của Mozilla đối với các nhà thiết kế và phát triển web.

Firefox cũng có một bộ sưu tập khổng lồ các tiện ích mở rộng giúp trình duyệt mạnh mẽ hơn để đạt hiệu quả tối đa. Dưới đây là một số tiện ích mở rộng Firefox tốt nhất mà bạn có thể sử dụng để giúp quá trình phát triển web của bạn trở nên dễ dàng hơn.

Cài đặt, kiểm tra và sử dụng hầu hết các tiện ích mở rộng này. Rốt cuộc, tất cả chúng đều miễn phí sử dụng!

Công dụng: Kiểm tra các trang web

Firebug là một tiện ích mở rộng mà các nhà thiết kế và phát triển web không thể sống thiếu. Tiện ích mở rộng này giống như một phiên bản nâng cao của bảng điều khiển dành cho nhà phát triển tích hợp đi kèm với Firefox. Firebug giúp bạn kiểm tra các thành phần trên trang web dễ dàng hơn nhiều và chỉ cho bạn cách mọi thứ hoạt động trên các trang web khác nhau.

Thích hợp cho: nhà phát triển web
Chức năng của nó: client cho Firefox

FireFTP là ứng dụng khách FTP/SFTP dành cho Firefox, cho phép bạn tải lên và truyền tệp một cách an toàn giữa máy tính và máy chủ trực tiếp từ trình duyệt của bạn. Với tiện ích bổ sung này, bạn sẽ không bao giờ phải chuyển đổi giữa trình duyệt và ứng dụng khách FTP nữa.

Thích hợp cho: nhà phát triển và thiết kế web
Công dụng: phân tích và kiểm tra các trang web

Đây là tiện ích mở rộng tất cả trong một, bổ sung một số công cụ hữu ích cho Firefox của bạn. Một số công cụ có trong addon này đang hiển thị và chỉnh sửa các biểu định kiểu CSS, tắt kiểu, công cụ gỡ lỗi, v.v.

Chức năng: Công cụ phân tích màu sắc

ColorZilla là một công cụ tuyệt vời mà các nhà thiết kế web front-end sẽ thấy khá hữu ích. Tiện ích bổ sung này có một công cụ nhỏ mắt để nhanh chóng chọn màu trên trang web, trình tạo độ dốc CSS, bộ phân tích màu, bảng màu và nhiều hơn thế nữa.

Thích hợp cho: nhà phát triển web
Chức năng: Sửa đổi trang web bằng mã tùy chỉnh

Được hơn một triệu người dùng Firefox yêu thích, Greasemonkey là một tiện ích mở rộng sẽ mang đến cho bạn niềm vui bất tận. Tiện ích bổ sung này cho phép bạn tùy chỉnh các trang web phổ biến bằng cách chỉnh sửa chúng bằng mã JavaScript của riêng bạn. Bạn cũng có thể thưởng thức các tập lệnh đã được tạo bởi các nhà phát triển khác.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: Điều chỉnh độ lệch của các phần tử web

Một plugin đơn giản nhưng hữu ích cho phép bạn kiểm tra các thành phần web và xem trực quan có bao nhiêu pixel bị tắt trong các thành phần đó, tạo bố cục với các lớp trong suốt. Bằng cách sử dụng bố cục này, bạn có thể thiết lập trang web thực tế của mình để khớp với lớp phủ để có kết quả tốt nhất mà không cần phỏng đoán.

Ví dụ: nếu một trong các hình ảnh trên trang web của bạn chồng lên một đối tượng khác, bạn có thể sử dụng Pixel Perfect để xác định số lượng pixel bạn cần điều chỉnh để đưa hình ảnh đó vào đúng vị trí.

Phù hợp với: nhà thiết kế web
Công dụng: Tải mọi thứ từ một trang web

Plugin này đúng như tên gọi của nó bằng cách cho phép bạn tải xuống mọi thứ từ một trang web. Chỉ với một cú nhấp chuột, bạn có thể tải xuống tất cả hình ảnh, liên kết và dữ liệu khác có trong trang web bằng tiện ích mở rộng này. Addon này cũng có trình tăng tốc tải xuống tích hợp giúp tối ưu hóa tốc độ tải xuống gấp bốn lần.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: Kiểm tra các trang web trong Internet Explorer

Dù bạn có tin hay không thì vẫn có những người vẫn sử dụng các phiên bản Internet Explorer cũ hơn để truy cập Internet. Tạo các trang web hoạt động tốt trên các trình duyệt cũ này là một trong những vấn đề mà các nhà thiết kế web vẫn đang gặp khó khăn. Plugin này giúp bạn dễ dàng tùy chỉnh thiết kế web của mình cho các trình duyệt Internet Explorer cũ hơn bằng cách tạo trang tab mới trong IE.

Thích hợp cho: nhà thiết kế và phát triển web
Công dụng: Cho bạn biết về công nghệ được sử dụng trên trang web

Bạn đang thắc mắc những công nghệ nào đã được sử dụng để tạo ra các trang web yêu thích của bạn? Sau đó, tiện ích bổ sung này sẽ hữu ích cho bạn. BuildWith là tiện ích mở rộng cho phép bạn quét các trang web để tìm công nghệ nào được sử dụng trên trang. Một công cụ tuyệt vời dành cho tất cả các nhà thiết kế web có tham vọng học hỏi từ các trang web được tạo sẵn.

Thích hợp cho: nhà phát triển web
Công dụng: Bật hoặc tắt Java

Tiện ích bổ sung này cho phép bạn dễ dàng bật hoặc tắt Java trong trình duyệt của mình. Nó cũng có thể vô hiệu hóa Javascript, Cookies, hình ảnh động, Flash và hơn thế nữa trên trang web. Đây là một plugin hữu ích không chỉ cho các nhà phát triển mà còn cho cả người dùng thông thường nhằm cải thiện tính bảo mật của trình duyệt và giảm băng thông.

Tốt nhất cho: Nhà thiết kế giao diện
Chức năng: Đo các phần tử bằng pixel

Chức năng của tiện ích bổ sung này rất đơn giản, nó cho phép bạn vẽ thước ảo lên đầu trang web hoặc một phần tử trên trang để đo chiều rộng, chiều cao hoặc căn chỉnh pixel của phần tử trên trang web. MeasureIt rất hữu ích cho hầu hết các nhà phát triển front-end trong việc tạo wireframe.

Phù hợp với: nhà thiết kế web
Công dụng: chuyển đổi ngôn ngữ trong trình duyệt

Đây là một công cụ hữu ích giúp dịch ngay lập tức Firefox của bạn sang ngôn ngữ khác. Mọi thứ trong trình duyệt của bạn, bao gồm giao diện người dùng, từ điển kiểm tra chính tả và nội dung trang web, sẽ được dịch sang ngôn ngữ bạn chọn. Một tính năng tuyệt vời mà bạn có thể sử dụng khi phát triển trang web đa ngôn ngữ.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng của nó: tạo văn bản giả

Tạo văn bản giả cho các mô hình và nguyên mẫu trang web mới của bạn là một công việc nhàm chán và khó có thể làm hài lòng ngay cả một nhà thiết kế. Tiện ích mở rộng này làm cho quá trình bớt nhàm chán hơn bằng cách cho phép bạn tạo văn bản giả Lorem Ipsum trực tiếp từ Firefox.

Thích hợp cho: nhà phát triển web
Chức năng: chỉnh sửa và tạo cookie

Tiện ích bổ sung này không chỉ quản lý cookie của trang web mà còn cho phép bạn dễ dàng chỉnh sửa và tạo tệp mới. Một số tính năng của plugin bao gồm duyệt cookie tích hợp, khả năng thay đổi tên miền, khả năng chỉnh sửa nhiều cookie cùng một lúc, v.v.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: Chọn màu trên trang web

Một công cụ dễ sử dụng cho phép bạn chọn màu của bất kỳ pixel nào trên trang web và dễ dàng sao chép mã màu RGB hoặc Hex để sử dụng trong các dự án của riêng bạn. Vẻ đẹp và giao diện trực quan của công cụ này giúp người mới bắt đầu tìm hiểu về màu sắc trên các trang web dễ dàng hơn nhiều.

Thích hợp cho: nhà thiết kế và phát triển web
Chức năng: Cung cấp thông tin về phần mềm được trang web sử dụng

Tương tự như tiện ích bổ sung BuiltWith, Wappalyzer là một tiện ích mở rộng hữu ích khác cho phép bạn biết phần mềm nào đang được sử dụng trên trang web. Ví dụ: bạn có thể tìm hiểu loại CMS mà trang web sử dụng, hệ điều hành mà máy chủ trang web hỗ trợ, v.v.

Thích hợp cho: nhà phát triển web
Công dụng: Thay đổi tác nhân người dùng trình duyệt

Bạn muốn biết trang web của bạn sẽ trông như thế nào trên các nền tảng và hệ điều hành khác nhau? Thì đây chắc chắn là công cụ hữu ích dành cho bạn. User-Agent Switcher cho phép bạn chuyển đổi giữa các nền tảng khác nhau như Android, Mac, Windows và chọn hệ điều hành để thay đổi tác nhân người dùng của trình duyệt.

Thích hợp cho: nhà thiết kế và phát triển web
Chức năng: Hiển thị ví dụ về cách sử dụng tab bộ nhớ của trình duyệt

Đây là một tiện ích bổ sung tiện dụng sẽ giúp bạn xác định lượng tài nguyên máy tính của bạn đang được sử dụng bởi mỗi tab đang mở trong Firefox. Bạn có thể sử dụng công cụ này để tìm hiểu xem trang web của bạn đang sử dụng bao nhiêu tài nguyên và tối ưu hóa trang web của bạn để có hiệu suất tối đa.

Thích hợp cho: nhà thiết kế web và đồ họa
Công dụng: Mở hình ảnh trong Photoshop

Tiện ích bổ sung này thực hiện đúng như tên gọi của nó, chỉ cần mở bằng một cú nhấp chuột vào những hình ảnh bạn tìm thấy trên trang web bằng Photoshop. Không cần tải hình ảnh lên hoặc khởi chạy Photoshop, tiện ích mở rộng sẽ làm mọi thứ bạn cần.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: Cải thiện bảng HTML

Đồ thị, số liệu thống kê, so sánh, bảng biểu - tiện ích bổ sung này có thể làm tất cả. Bạn có thể sử dụng công cụ này để tạo các bảng và sơ đồ HTML đẹp mắt và thân thiện với người dùng.

Thích hợp cho: nhà phát triển web
Chức năng của nó: Máy khách SSH cho Firefox

Thông thường, bạn cần cài đặt một ứng dụng để chạy thiết bị đầu cuối SSH. Các ứng dụng này khác nhau từ hệ điều hành này sang hệ điều hành khác. Tuy nhiên, FireSSH hoạt động trên tất cả các nền tảng miễn là bạn có Firefox. Tiện ích mở rộng cho phép bạn khởi chạy thiết bị đầu cuối SSH trực tiếp từ trình duyệt.

Tốt nhất cho: Nhà thiết kế giao diện
Chức năng: Tự động làm mới trang web

Một trong những điều khó chịu mà các nhà thiết kế web gặp phải khi phát triển trang web là phải cập nhật trang web theo cách thủ công sau mỗi thay đổi nhỏ về mã. Tự động làm mới là một tiện ích mở rộng khắc phục sự cố này bằng cách cho phép bạn tự động làm mới một hoặc nhiều tab trong Firefox theo khoảng thời gian bạn xác định.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: Thay đổi kích thước cửa sổ Firefox để có độ phân giải màn hình cụ thể

Tiện ích bổ sung này cho phép bạn thay đổi kích thước cửa sổ Firefox ở các độ phân giải cụ thể để xem trang web của bạn trông như thế nào trên các màn hình khác nhau. Bạn sẽ cần cài đặt Thanh bổ trợ Firefox để tiện ích mở rộng này hoạt động bình thường.

Thích hợp cho: nhà thiết kế và phát triển web
Công dụng: tìm thông tin về phông chữ của trang và các thành phần của trang

Trình tìm phông chữ là một công cụ tiện dụng cho phép bạn khám phá các thành phần trang web để tìm hiểu thông tin quan trọng về phông chữ được sử dụng trên trang, chẳng hạn như tên họ phông chữ, màu phông chữ, khoảng cách dòng, kiểu trang trí, v.v.

Tốt nhất cho: Nhà thiết kế giao diện
Công dụng: kiểm tra các trang web trên các trình duyệt khác nhau

Chức năng của tiện ích bổ sung này rất đơn giản. Nó cho phép bạn mở ngay lập tức bất kỳ trang web nào bạn đang xem trong Firefox bằng trình duyệt khác chỉ bằng một cú nhấp chuột. Không cần sao chép URL, mở từng trình duyệt một và dán URL để mở trang web.

Thích hợp cho: nhà thiết kế và phát triển web
Công dụng: xóa bộ nhớ đệm của trình duyệt

Tiện ích bổ sung này sẽ xóa ngay bộ nhớ đệm của trình duyệt Firefox (RAM và DISK) để giảm mức sử dụng tài nguyên trên máy tính của bạn. Tiện ích mở rộng cho phép bạn xóa bộ nhớ đệm bằng cách chỉ cần nhấp vào nút hoặc nhấn phím F9 trên bàn phím. Nếu bạn muốn xem nhanh các thay đổi được thực hiện trên một trang web, tiện ích bổ sung này sẽ rất hữu ích.

Mozilla gần đây đã có một số sự kiện quan trọng. Trước hết, đây là ngày kỷ niệm của Firefox. Mười năm trước, một nhóm hacker tự xưng là Mozillian đã phát hành phiên bản đầu tiên của Firelis, một trình duyệt phá vỡ thế độc quyền của Internet Explorer với 95% thị phần. Thứ hai, trong cuộc cạnh tranh lâu dài về hiệu suất với Chrome, công cụ SpiderMonkey đã vượt trội hơn V8 trong các thử nghiệm của chính Google. Và thứ ba, tất nhiên, đây là việc phát hành Firefox Developer Edition.

Phiên bản Firefox dành cho nhà phát triển sẽ thay thế kênh phát triển Firefox Aurora hiện có và sẽ bao gồm các tính năng mới từ Firefox Nightly. Chu kỳ phát triển trình duyệt kéo dài sáu tuần cũng sẽ được giữ nguyên: Hàng đêm - Phiên bản dành cho nhà phát triển - Beta - Phát hành. Do đó, nhà phát triển sẽ có 12 tuần trước khi phát hành sản phẩm đổi mới. Trình duyệt mới sử dụng hồ sơ người dùng riêng biệt, cho phép nó khởi chạy đồng thời với Firefox thông thường.

Thiết kế mới mẻ

Giao diện được cập nhật giúp truy cập vào các công cụ dành cho nhà phát triển nhanh hơn và sử dụng chủ đề tối mới theo mặc định. Nhưng bạn cũng có thể chuyển sang cổ điển hoặc cài đặt bất kỳ chủ đề và tiện ích mở rộng nào của bên thứ ba. Những thay đổi cũng ảnh hưởng đến giao diện của cửa sổ cài đặt.

Nút quên

Các vấn đề bảo mật vẫn chưa được chú ý: nút “Quên” xuất hiện trên bảng điều khiển của trình duyệt, khi được nhấp vào, thông tin về cookie, lịch sử, các tab và cửa sổ đang mở trong năm phút, hai giờ hoặc một ngày qua sẽ bị xóa.

Firefox Xin chào

Nhiều người có thể đã nghe nói về WebRTC và thậm chí có thể đã thử nghiệm nó. Vì vậy, với sự hỗ trợ của Telefonica, các cuộc gọi và cuộc gọi video sử dụng công nghệ này đã được thêm vào Firefox mới. Và “trình duyệt Skype” này có tên là Firefox Hello.

Về điều quan trọng nhất

Chà, chúng ta đã đạt được điều quan trọng nhất một cách suôn sẻ - công cụ dành cho nhà phát triển web, điểm nhấn và nguyên nhân sâu xa dẫn đến sự xuất hiện của trình duyệt này. Nhìn chung, cộng đồng phản hồi khá tích cực, nhiều người cho biết đã có lúc họ chuyển từ Firefox sang Chrome chỉ vì DevTools, giờ đã đến lúc phải quay lại. Nhưng cũng có những tuyên bố rằng không có gì mới xuất hiện mà họ chỉ đơn giản lấy mọi thứ ở đó và thiết kế nó theo cách khác. Tôi muốn nói rằng đây là một lời nói dối tuyệt đối. Nhóm Firefox đã cải tiến đáng kể những công cụ hiện có và cung cấp các công cụ hoàn toàn mới cho các nhà phát triển.

Gỡ lỗi JavaScript nâng cao hơn.
Trình kiểm tra web đã được cải tiến, giờ đây nó có một cửa sổ với các phông chữ được sử dụng và cuối cùng nó đã bắt đầu hiển thị trước và sau các phần tử giả trong DOM.
Các công cụ để làm việc với thiết kế đáp ứng đã được chuyển đổi.
Trình chỉnh sửa kiểu có tính năng tự động hoàn thành cao cấp cho phép bạn chỉnh sửa tệp CSS ngay trong trình duyệt.
Bảng điều khiển nhiều thông tin hơn và giám sát mạng.
Scratchpad để thực thi JavaScript nhanh chóng.
Chuyển đổi giữa chế độ trực tuyến và ngoại tuyến.
Bộ chọn màu rất tiện lợi.

WebIDE - môi trường phát triển tích hợp

WebIDE được giới thiệu là tính năng beta (không có sẵn theo mặc định) trong Firefox 33 và hiện được đưa chính thức vào Phiên bản dành cho nhà phát triển. Với WebIDE, công cụ thay thế trình quản lý ứng dụng, bạn có thể phát triển, triển khai và gỡ lỗi các ứng dụng Firefox OS trực tiếp trong trình duyệt hoặc trên thiết bị Firefox OS. Tính năng tự động điền, tính năng màn hình trợ giúp, kiểm tra kỹ lưỡng là một số tính năng mới. Bạn cũng có thể tạm dừng ứng dụng và kiểm tra các thành phần bằng trình gỡ lỗi tích hợp sẵn.

Valence - phát triển và gỡ lỗi trên nhiều trình duyệt

Tiện ích mở rộng này ban đầu được gọi là Bộ điều hợp công cụ Firefox. Valence được thiết kế để thử nghiệm các dự án từ các thiết bị khác nhau (ví dụ: Chrome trên Android, Safari trên iOS) và sửa đổi nội dung web, mô phỏng giao diện Firefox.

Trình chỉnh sửa âm thanh trên web

Cho phép bạn tương tác với API âm thanh trên web trong thời gian thực.

kết luận

Về nguyên tắc, tôi đã liệt kê tất cả những đổi mới chính. Không biết bạn thế nào chứ tôi chỉ có những cảm xúc tích cực khi làm việc với Firefox Developer Edition. Có lẽ tôi có thiện cảm với chính nhà sản xuất vì sự cởi mở, vị tha và mong muốn làm cho trang web trở nên tốt hơn...

Mozilla đã làm được điều gì hoàn toàn mới và sáng tạo chưa? Không, và không ai tranh cãi với điều đó. Ngay cả trên trang đích của họ cũng có dòng chữ "Đó là tất cả những gì bạn đã quen, chỉ tốt hơn". Nhưng tôi hoàn toàn đồng ý với tuyên bố này.

iMacros là một tiện ích mở rộng giúp kiểm tra các trang web. Thay vì phải tự thực hiện các hành động tương tự trên trang, nhà phát triển chỉ cần ghi lại chuỗi hành động cần thiết trong iMacros và khởi chạy tiện ích mở rộng khi cần thiết.

Tiện ích mở rộng có thể hoạt động với các trang web được triển khai bằng công nghệ Java, Flash, Flex, Ajax và Silverlight.

2. Sân chơi phông chữ

Tiện ích mở rộng dành cho những người thích "chơi với phông chữ" - nó cho phép bạn thử nghiệm toàn bộ phạm vi phông chữ từ thư viện Google Fonts mà không cần thay đổi mã trang. Bạn có thể thay đổi không chỉ phông chữ mà còn cả kích thước, kiểu viết, v.v.

3. Dự án Naptha

Theo Cretive Bloq, một tiện ích mở rộng dành cho Google Chrome, cho phép bạn chọn và sao chép văn bản ngay cả từ hình ảnh, sẽ hữu ích đối với bất kỳ ai đã từng phải xử lý văn bản nhúng ít nhất một lần trong công việc của họ.

4. Phông chữ gì

Tiện ích mở rộng cho phép bạn xác định ngay lập tức phông chữ nào được sử dụng trên một trang cụ thể mà không cần thực hiện hầu hết bất kỳ hành động bổ sung nào - bằng cách di con trỏ chuột lên dòng chữ.

5. YChậm

YSlow là một công cụ không chỉ kiểm tra tốc độ tải của một trang web cụ thể mà còn cho nhà phát triển biết điều gì đang làm chậm trang web đó. Để thực hiện việc này, tiện ích mở rộng sẽ kiểm tra xem trang web có tuân thủ 23 trong số 34 quy tắc hoạt động do nhóm Yahoo xây dựng hay không.

6. Nhà phát triển web

Toàn bộ các công cụ hữu ích để quản lý các thành phần trang web - ví dụ: để phân tích tài nguyên và bố cục web, kiểm tra mã và thay đổi ngay lập tức các thông số cũng như giao diện của trang.

7. Danh sách kiểm tra dành cho nhà phát triển web

Một tiện ích mở rộng để tự động kiểm tra xem một trang web có đáp ứng các nguyên tắc cơ bản của SEO hay không, liệu nó có đủ năng suất và thân thiện với người dùng hay không. Kết quả kiểm tra được trình bày dưới dạng một loại danh sách kiểm tra - bạn có thể xem thông tin chi tiết hơn và đề xuất cho từng mục chưa hoàn thành, cũng như sửa lỗi ngay lập tức.

8. Tự động lưu DevTools

Cho phép bạn tự động lưu mọi thay đổi được thực hiện đối với mã trang bằng Chrome DevTools. Với tư cách là tác giả của các ghi chú tài liệu, công cụ này giúp các nhà phát triển tiết kiệm rất nhiều thời gian.

9. Khung dây tức thì

Một tiện ích mở rộng mà bạn có thể “biến” bất kỳ trang nào thành sơ đồ cấu trúc của bố cục vật liệu - wireframe. Cho phép các nhà phát triển và nhà thiết kế web làm quen với bố cục của bất kỳ trang nào trên Internet mà không cần rời khỏi trình duyệt.

10. Trình giả lập Ripple

Trình mô phỏng Ripple là một tiện ích mở rộng trình mô phỏng dành cho Google Chrome, cho phép bạn kiểm tra các trang web trên nhiều nền tảng di động khác nhau với độ phân giải màn hình khác nhau. Có thể được sử dụng kết hợp với các tiện ích mở rộng khác để kiểm tra và gỡ lỗi tài nguyên.

11. Vệt

Streak là tiện ích mở rộng cho phép bạn biến hộp thư đến Gmail của mình thành hệ thống CRM. Bạn có thể theo dõi trạng thái giao dịch và đàm phán được thực hiện qua email với đối tác, sử dụng Streak để xử lý yêu cầu từ người dùng sản phẩm và theo dõi việc sửa lỗi đã gửi, v.v.

12. Tìm kiếm Stackoverflow

Tiện ích mở rộng để tìm kiếm nhanh tài nguyên dành cho nhà phát triển phổ biến Stack Overflow.

13. Hướng dẫn sử dụng PHP Ninja

Cho phép bạn truy cập ngay vào tài liệu PHP 5.5 từ trình duyệt của bạn.

14. PerfectPixel

PerfectPixel là một tiện ích mở rộng dành cho Google Chrome. Nó cho phép bạn “phủ” một lưới mờ trên trang web và kiểm tra các khoảng cách được chỉ định so với nó. Bạn có thể phủ các hình ảnh khác - chẳng hạn như bố cục ban đầu - để đảm bảo rằng trang kết quả khớp chính xác với nó:

15. Mã Cola

Một công cụ để xem mã nguồn của trang và chỉnh sửa mã CSS.

Bạn có thể thay đổi bóng, chu vi hộp, v.v. bằng cách kéo thanh trượt. Sau khi thực hiện thay đổi, bạn có thể sao chép mã kết quả và thay thế nó vào mã trang web.

16. Trình đánh hơi Chrome

Tiện ích mở rộng trình duyệt phát hiện thư viện, khung hoặc CMS JavaScript nào được sử dụng trên tài nguyên.

17. Bộ chuyển đổi tác nhân người dùng

User-Agent Switcher là một tiện ích mở rộng cho phép bạn “che giấu” trình duyệt Google Chrome dưới dạng Internet Explorer, Opera hoặc bất kỳ trình duyệt nào khác.

Tab 18.IE

Trình giả lập Internet Explorer tích hợp cho Chrome.

19. PicMonkey

Trình chỉnh sửa hình ảnh trực tuyến đơn giản và miễn phí. Cho phép bạn "chụp" hình ảnh hoặc chụp ảnh màn hình trình duyệt - và chỉnh sửa chúng ngay lập tức bằng tiện ích mở rộng của Chrome.

20. Chrome Daltonize

Một tiện ích mở rộng giúp điều chỉnh các dịch vụ web cho những người dùng bị mù màu - cho nhà phát triển thấy cách những người mắc bệnh này xem trang web. Cho phép các nhà thiết kế và phát triển web tạo ra các dịch vụ dễ tiếp cận hơn.

21. Thước kẻ trang

Một công cụ đơn giản giúp bạn xác định chiều cao, chiều rộng và vị trí của bất kỳ thành phần nào trên trang.

22. Kiểm tra các liên kết của tôi

Tiện ích mở rộng kiểm tra trang web để tìm các liên kết bị hỏng hoặc không chính xác.

23. Tab Flickr

Một tiện ích mở rộng không giúp ích nhiều cho quá trình phát triển nhưng giúp tìm kiếm nguồn cảm hứng và những bức ảnh đẹp. Hiển thị một hình ảnh từ Flickr trên mỗi tab mới trong Google Chrome. Khi bạn nhấp vào nó, người dùng sẽ chuyển đến trang của tác giả, nơi anh ta có thể làm quen với các tác phẩm khác của mình.

24. Dự án nghệ thuật của Google

Tiện ích mở rộng trình duyệt tương tự như plugin trước đó trong danh sách này - chỉ thay vì ảnh từ Flickr trong tab mới, người dùng mới nhìn thấy các tác phẩm nghệ thuật được công nhận - ví dụ: tranh của Van Gogh hoặc Manet.

25. Tiết kiệm dữ liệu

Tiện ích mở rộng chính thức của Google để nén lưu lượng truy cập, cho phép lưu lưu lượng truy cập trong trình duyệt Google Chrome.