Những công cụ phát triển. Mozilla Firefox. Vấn đề về bố cục thích ứng (một lỗi gần như gây ra tranh cãi giữa công ty)

Từ tác giả: không còn nghi ngờ gì nữa trong năm năm qua Google Chromeđã trở thành thế lực thống trị trong cuộc chiến trình duyệt dành cho máy tính để bàn và (rõ ràng) người dùng di động. Mặt khác, các nhà phát triển lại hiểu biết hơn về mặt kỹ thuật và ý thức bảo mật hơn, đó là lý do tại sao họ thích Firefox hơn. Tất cả các bản phân phối hệ điều hành tập trung vào bảo mật đều chứa Firefox, không phải trình duyệt dựa trên Chrome, mặc dù sau này cũng có nguồn mở nguồn và hoàn toàn miễn phí.

Thật may mắn cho chúng tôi, việc tuân thủ các tiêu chuẩn web có nghĩa là phần lớn các trình duyệt mà nhà phát triển sử dụng đều tương thích với các trình duyệt mà hầu hết mọi người sử dụng. người dùng thông thường. Và điều này rất quan trọng, vì mọi thứ được phát triển cho Firefox sẽ hoạt động trong Chrome trong 99% trường hợp. IE không còn là ưu tiên hàng đầu của hầu hết các nhà phát triển. Nó đã lỗi thời và được sử dụng để tải các trình duyệt khác. Hiện tại cũng không có ai coi trọng Edge.

Firefox không chỉ được yêu thích vì tính bảo mật và quyền riêng tư. Firefox phần lớn luôn là một dự án hướng đến cộng đồng (mặc dù với Wikipedia, "cộng đồng" đã trở nên hơi quá kiêu ngạo). Trọng tâm của mô hình phát triển cộng đồng là nâng cao chất lượng Kinh nghiệm người dùng. Nói cách khác, các dự án hướng đến cộng đồng thường đặt nhu cầu của người dùng lên hàng đầu. Các dự án của công ty ưu tiên nhu cầu của công ty. Đối với các nhà phát triển, điều này có nghĩa là có rất nhiều công cụ miễn phí trực tuyến giúp công việc của họ trở nên dễ dàng hơn. Phần lớn các công cụ này nhẹ hơn nhiều so với hầu hết các công cụ khác tùy chọn trả phí.

THIMLE

Thimble được thiết kế chủ yếu để học HTML. Nó có HTML đầy đủ và Trình chỉnh sửa CSS, khiến nó trở thành một công cụ cực kỳ hữu ích để tìm kiếm giải pháp nhanh chóng và sao chép HTML cuối cùng để tải tệp lên máy chủ. Nó hoạt động biên tập viên tốt hơn mã trong CPanel, vì nó không làm gì thêm và không nhận ra mọi dấu nháy đơn trong văn bản dưới dạng dấu phân cách dòng.

JavaScript. Bắt đầu nhanh

Giao diện được chia thành hai bảng. Theo mặc định, bảng có mã nằm ở bên trái, bảng xem trước- bên phải. Có ba chế độ xem:

lượt xem trên thiết bị di động;

xem toàn màn hình.

Ở chế độ xem thứ ba, bảng mã tạm thời bị ẩn cho đến khi bạn quay lại chế độ căn bản xem, việc này được thực hiện dễ dàng chỉ bằng một nút bấm. Tự động xem xétđược bật theo mặc định và hiển thị kết quả nhập mã. Nếu nó gây mất tập trung, bạn có thể tắt nó đi. Chế độ xem tự động thậm chí có thể hiển thị Kiểu CSS trong thời gian thực. Nếu bạn tạo một khối có nội dung rồi thêm kiểu vào đó, bạn có thể dễ dàng thử nghiệm với các loại khác nhau.

Không giống những người khác biên tập viên trực tuyến kết nối ở đây dễ dàng hơn tập tin bên ngoài. Bạn thậm chí có thể tạo toàn bộ cây thư mục để lưu trữ. Tất cả những điều này khiến Thimble trở thành công cụ yêu thích của tôi dành cho tạo nhanh các trang hoặc cập nhật trên trang web khi đi du lịch.

Nhược điểm là rõ ràng - công cụ này yêu cầu kết nối mạng (tất nhiên trừ khi bạn có thể sao chép nền tảng Thimble trên Máy chủ cục bộ). Hạn chế thứ hai là bạn không thể xuất bản các dự án thương mại của mình trên đó vì nền tảng này không được thiết kế cho các chuyên gia.

Thay vào đó, bạn có thể sao chép mã HTML và dán vào trình soạn thảo mã trong CPanel hoặc tập tin văn bản, rồi lưu nó trên máy chủ của bạn. Cây tập tin sẽ được bảo tồn hoàn toàn.

Như với hầu hết dự án Mozilla, Tài liệu của Thimble khá thưa thớt, đặc biệt là về những gì bạn có thể và không thể làm. Các nhà phát triển mong đợi bạn đọc các điều khoản sử dụng, đây là một giả định khá đáng ngờ, ngay cả khi mọi người quản lý web sử dụng giải pháp trực tuyếnđể phát triển phải làm điều này

Các quy tắc sử dụng có rất một phần quan trọng nó nói bạn đưa ở đâu Mozilla miễn phí cấp phép cho mọi thứ bạn xuất bản trên nền tảng của họ và cũng đồng ý với tái sử dụng và chỉnh sửa sản phẩm của bạn bởi người khác. Rõ ràng, sau này bạn sẽ không muốn xuất bản các dự án chuyên nghiệp của mình trên nền tảng này.

KÍNH X-quang

Trẻ em luôn muốn có kính chụp X-quang, nhưng thật không may, những công nghệ như vậy (ít nhất là những công nghệ thực sự hoạt động) lại quá đắt đối với trẻ em bình thường. Kính X-Ray Goggles của Mozilla sẽ không cho bạn thấy y tá của trường mặc gì bên dưới áo khoác ngoài hay thứ mà một người làm vườn Scotland mặc dưới váy, nhưng với công cụ này, bạn có thể xem cách một trang web hoạt động và có thể chỉnh sửa mã để nó hoạt động. -đến người khác. Điều này thú vị hơn nhiều so với bất kỳ kiểu biến thái nào, phải không?

Mục đích chính của công cụ này theo quan điểm chuyên nghiệp là mô hình hóa cát để kiểm tra những thay đổi trong thiết kế hiện có mà không cần phải thực hiện những thay đổi ngay lập tức. Mọi thứ đều rất đơn giản, để cài đặt, bạn chỉ cần kéo nút X-Ray Goggles vào thanh dấu trang. Để kích hoạt, nhấn nút, để thoát, nhấn ESC.

nhà tạo web

Không phải là công cụ hữu ích nhất cho hầu hết các nhà phát triển vì nó chỉ được thiết kế cho Android. Webmaker hầu như không cung cấp gì mà không thể tìm thấy trong trong mạng xã hội. Mozilla đã từ bỏ một trình chỉnh sửa video trực tuyến khá hữu ích (Popcorn) và thay thế bằng công cụ này. Webmaker phù hợp cho người mới bắt đầu vì nó sử dụng phương pháp thiết kế ưu tiên thiết bị di động đã trở thành điều bắt buộc đối với các trang web hiện đại.

Tuy nhiên, các chuyên gia sẽ bối rối trước những hạn chế liên quan đến việc chỉ phát triển cơ sở hạ tầng di động. Công cụ này chủ yếu nhằm mục đích thu hút thanh thiếu niên đến với thương hiệu Mozilla, đồng thời cũng nhằm mục đích giúp giáo viên trông thật ngầu (dạy họ nói ngôn ngữ phát triển web di động).

Một vấn đề khác có thể gây nhầm lẫn là đây lại là một ứng dụng khác chiếm dung lượng và tài nguyên trên thiết bị. Android có thói quen làm đầy bộ nhớ nhanh chóng và hầu hết người dùng không đóng ứng dụng sau khi thoát vì Google không buồn tạo ra giao diện đóng bất cứ thứ gì trực quan hoặc đơn giản. Kết quả là hầu hết điện thoại thông minh Android bắt đầu chạy chậm sau một vài tháng và mọi người chỉ cần thay đổi chúng hoặc liên tục phàn nàn về việc thiếu dung lượng trống.

BIÊN TẬP

Editor là ông tổ của Bảng điều khiển dành cho nhà phát triển của Mozilla và ban đầu được gọi là Composer. Có lẽ tên đã được thay đổi để không bị nhầm lẫn với KompoZer, hậu duệ của Composer. Trước KompoZer đã có Nvu và bạn sẽ không muốn sử dụng cả hai vì cả hai đều không hỗ trợ HTML5. Bạn có thể thử BlueGriffon, anh em cùng cha khác mẹ của KompoZer. Nó hỗ trợ HTML5. Tuy nhiên, bạn sẽ chỉ nhận được trình chỉnh sửa CSS nếu trả tiền cho plugin. Tất cả những công cụ này vẫn có thể sử dụng được, ngoại trừ Nvu. Trình soạn thảo/Trình soạn thảo vẫn có sẵn trong trình duyệt Mozilla SeaMonkey.

SCRATCHPAD

Một công cụ để viết và kiểm tra mã JS. Bảng điều khiển chỉ cho phép bạn thực thi một dòng tập lệnh mỗi lần, điều này hạn chế đáng kể các tùy chọn của bạn. Đồng thời, bạn có thể nhập bao nhiêu dòng tùy thích vào Scratchpad. Kích hoạt bất cứ lúc nào tab Firefox bằng cách nhấn Shift + F4.

Một cửa sổ soạn thảo văn bản sẽ mở ra với giao diện đơn giản. Bạn có thể mở các tập lệnh hiện có, chỉnh sửa và lưu chúng. Bạn cũng có thể tạo tập lệnh mới. Trình chỉnh sửa có tính năng tự động hoàn thành các lệnh đã nhập được tích hợp sẵn. Ngoài ra còn có tài liệu về cú pháp lệnh. Bạn có thể chạy toàn bộ tập lệnh hoặc các phần của tập lệnh bằng cách sử dụng lựa chọn.

JavaScript. Bắt đầu nhanh

Khám phá Khái niệm cơ bản về JavaScript TRÊN ví dụ thực tế về việc tạo một ứng dụng web

CHẾ ĐỘ THIẾT KẾ ĐÁP ỨNG

Tính năng này được tích hợp ngay trong Firefox (nó cũng có sẵn trong Chrome và Google Chrome). Với sự trợ giúp của nó, bạn có thể kiểm tra bố cục trang ở các độ phân giải khác nhau trên cùng một màn hình. Công cụ này không hoàn hảo (đối với tất cả các trình duyệt), nhưng nó sẽ hoạt động trong hầu hết các trường hợp để kiểm tra giao diện giống nhau của trang web. Chế độ phản hồi của Firefox được kích hoạt bằng cách nhấn Ctrl + Shift + M. Quay lại chế độ bình thường có thể nhấn lại.

Bạn có thể thay đổi bố cục bằng cách sử dụng một loạt nút nằm phía trên bố cục. Nút đầu tiên bên trái tương tự như “đóng cửa sổ”, bạn có thể sử dụng nút này để thoát khỏi chế độ thích ứng. Tiếp theo là danh sách thả xuống nơi bạn có thể chọn mẫu quyền, đặt mẫu mới hoặc (không khuyến nghị) xóa mẫu quyền hiện có khỏi danh sách. Ở bên phải danh sách thả xuống có một nút để chuyển giữa dọc và chế độ phong cảnh. Tiếp theo là nút mô phỏng các sự kiện chạm vào màn hình. Nút cuối cùng chụp ảnh màn hình.

Một số phiên bản Firefox cho phép bạn đặt tỷ lệ pixel, nhưng tính năng này hoạt động tốt như thế nào tùy thuộc vào tỷ lệ pixel trên thiết bị của bạn. Ngoài các phương pháp tích hợp để xem bố cục thích ứng còn có những người khác nữa. Bây giờ chúng tôi sẽ cho bạn thấy.

MỞ RỘNG CÔNG CỤ PHÁT TRIỂN WEB

Công cụ này không có sẵn theo mặc định trong Mozilla, nó là một tiện ích mở rộng cho Firefox của Chris Pederick. Tiện ích mở rộng chứa rất nhiều công cụ phù hợp với mọi nhu cầu của bạn. Với nó bạn có thể:

bật và tắt một cái gì đó;

kiểm soát cookie;

thay đổi trang CSS;

thay đổi các trường biểu mẫu trên trang;

xóa mặt nạ khỏi các trường như mật khẩu;

kéo ra thông tin chi tiết về hình ảnh;

kiểm tra các phần tử DOM;

nhấn mạnh các yếu tố;

thay đổi kích thước màn hình;

xem bố cục ở chế độ đáp ứng tốt hơn so với các phương pháp tích hợp sẵn;

và nhiều hơn nữa.

Cách đơn giản nhất mô tả phần mở rộng này - Con dao Thụy Sĩ giữa các công cụ phát triển. Nó hoạt động tốt ở hầu hết mọi thứ bạn cần, nhưng tất cả các công cụ đều bị ẩn đi cho đến khi bạn cần chúng. Bạn có thể truy cập chúng bằng nút chuột phải trong danh mục, ngoài ra còn có một thanh công cụ. Thanh công cụ tốt hơn nhiều.

CÔNG CỤ PHÁT TRIỂN FIREFOX

Phần lớn chức năng của Firebug hiện có sẵn trực tiếp từ bảng điều khiển dành cho nhà phát triển tích hợp, bao gồm cả bảng điều khiển. Bảng điều khiển tương tự và hoạt động giống như bảng điều khiển trong Chrome và Google Chrome. Giao diện không trực quan và khi bạn thành thạo và hiểu tất cả các chức năng, bạn sẽ mắc rất nhiều lỗi.

Người dùng thiếu kinh nghiệm có thể không nhận thấy một trong các chức năng - dòng lệnh JS ở cuối bảng điều khiển, nó không được đánh dấu dưới bất kỳ hình thức nào. Cô ta làm việc phiên bản tốt hơn trong Chrome/Chrome, nhưng việc triển khai chúng, bổ sung con trỏ nhấp nháy trực tiếp vào bảng điều khiển, rõ ràng hơn nhiều.

ĐO LƯỜNG MỞ RỘNG

Việc cài đặt Screen Ruler tuyệt vời của Ian McIntosh sẽ dễ dàng hơn, nhưng tiện ích mở rộng Measureit của Kevin Freitas có một lợi thế. Nó có thể đo chiều rộng và chiều cao cùng một lúc và chính xác hơn. Công cụ hữu íchđể đo thứ gì đó trong cửa sổ trình duyệt. Trong một số phiên bản Công cụ Firefox không hoạt động, có thể do xung đột với các tiện ích mở rộng khác. Hãy thử tắt tiện ích mở rộng trước khi cài đặt.

KÉO MẮT VÀ MẮT COLORZILLA

Mọi nhà thiết kế nên có cả hai hoặc một trong các công cụ này, vì với sự trợ giúp của họ, bạn có thể nhanh chóng tìm thấy màu của bất kỳ pixel nào trong trình duyệt. Bạn cũng có thể sử dụng GColor - một công cụ Gnome thực hiện công việc tương tự nhưng nó có khả năng lấy mẫu màu từ bất kỳ cửa sổ nào chứ không chỉ từ trình duyệt. Ưu điểm của ColorZilla và Eyedropper so với GColor là chúng hiển thị chế độ xem phóng to của pixel mà màu được tạo ra.

Công cụ này được kích hoạt bằng cách nhấp vào biểu tượng ống nhỏ mắt, sau đó con trỏ chuyển sang dạng hình chữ thập (ColorZilla) hoặc kính lúp lớn (Eyedropper). Di con trỏ qua cửa sổ và tìm pixel có màu bạn muốn lấy. Nhấp chuột trái để sao chép màu vào bảng tạm (ở định dạng hex), sau đó tiện ích mở rộng sẽ tự động đóng.

Đây chỉ là những người trợ lý, họ sẽ không làm mọi việc cho bạn.

Bạn vẫn là một nhà phát triển, bạn vẫn cần phải hoàn thành trách nhiệm của mình. Những công cụ này, nếu được sử dụng đúng cách, sẽ khiến mọi việc trở nên dễ dàng hơn. Họ có thể giúp đỡ những cách khác và đối với hầu hết mọi người, một số trong số chúng hoàn toàn vô dụng, bất chấp những ý định tốt nhất từ ​​phía Mozilla. Có những công cụ trực tuyến khác tốt hơn những công cụ được mô tả trong bài viết này, nhưng nhìn chung đây là những công cụ tốt nhất để sử dụng. Đôi khi biết ăn gì cũng tốt công cụ miễn phí từ Mozilla, có thể được sử dụng nếu có nhu cầu.

Firefox chứa nhiều công cụ giúp các nhà phát triển web thực hiện công việc của họ. Nhiều người vẫn sử dụng FireBug và không nhận ra rằng Firefox hiện nay đã có sẵn các công cụ riêng. Trong chương này, chúng ta sẽ xem xét các công cụ hữu ích nhất để phát triển ứng dụng cho Firefox OS.

Nếu bạn quan tâm đến việc nhận thông tin thêm về những công cụ này và những công cụ khác công cụ tốt sẽ xuất hiện trong Firefox, hãy xem trang MDN (mặc dù hãy xem liên kết, tôi sẽ đợi).

Giới thiệu về thiết kế đáp ứng

Quy trình phát triển web chung là chỉnh sửa tệp HTML và tải lại trang trong trình duyệt để xem các thay đổi. Trừ khi bạn đang sử dụng thứ gì đó như Grunt hoặc Volo, thì thường không cần bước biên dịch hoặc bước tương tự. Firefox OS Simulator cho phép bạn sử dụng quy trình tương tự, ngoại trừ việc trình giả lập hiện bị giới hạn ở một độ phân giải duy nhất (480x320). Điều này kém lý tưởng hơn nếu bạn cũng đang thiết kế ứng dụng của mình để chạy trên máy tính bảng, phablet, TV khổng lồ hoặc bất kỳ thiết bị nào ở giữa.

Để kiểm tra xem ứng dụng của bạn sẽ trông như thế nào ở bất kỳ độ phân giải màn hình nào, bạn có thể sử dụng công cụ Thiết kế đáp ứng để thay đổi màn hình (và chế độ xem). Nó có thể được kích hoạt thông qua menu Công cụ -> Phát triển web -> Thiết kế đáp ứng, như thể hiện trong hình dưới đây. Khi kích hoạt công cụ này, cửa sổ sẽ thay đổi để bạn có thể thay đổi kích thước khung nhìn bằng cách kéo các góc hoặc thông qua danh sách lựa chọn.

Sử dụng thiết kế đáp ứng đặc biệt hữu ích khi kiểm tra truy vấn phương tiện vì nó cho phép bạn thay đổi kích thước màn hình và xem trang web của bạn phản ứng như thế nào với những thay đổi bố cục trong thời gian thực. Một tính năng tuyệt vời khác của Thiết kế đáp ứng là bạn có thể lưu các kích thước đặt trước. Nếu bạn biết các kích thước bạn đang tập trung vào thì bạn có thể nhanh chóng kiểm tra kích cỡ khác nhau mà không cần phải thay đổi kích thước cửa sổ trình duyệt hiện tại.

Tại thời điểm viết bài, hầu hết điện thoại Firefox OS trên thị trường đều chạy ở độ phân giải 480x320 và mật độ khoảng 96 pixel mỗi inch. Tuy nhiên, bạn có thể mong đợi điều này sẽ thay đổi theo thời gian khi có phần cứng Firefox OS mới. Màn hình có thể sẽ có nhiều pixel hơn và hơn thế nữa mật độ cao(tương tự như màn hình retina của Apple).

Vì Hoạt động đáng tin cậy của ứng dụng của bạn trong tương lai, không đặt bất kỳ độ phân giải hoặc mật độ pixel nào trong CSS. Thay vào đó, bạn nên sử dụng truy vấn phương tiện và nguyên tắc thiết kế đáp ứng khi tạo ứng dụng thích ứng với mọi kích thước hiển thị. Để tìm hiểu thêm về thiết kế đáp ứng, tôi khuyên bạn nên đọc những cuốn sách sau: Thiết kế web đáp ứng và Đầu tiên trên thiết bị di động.

Nhìn chung, thiết kế đáp ứng cho phép chúng tôi thử nghiệm các ứng dụng web của mình bằng nhiều loại Đa dạng về kích cỡ màn hình mà không cần phải thay đổi cửa sổ Trình duyệt Firefox. Theo ý kiến ​​khiêm tốn của tôi, đây là một trong những cách hữu ích nhất và công cụ có sẵn nhà phát triển web, nhưng anh ấy có một hạn chế lớn: V Hiện nay không có cách nào để kiểm tra các mật độ pixel khác nhau (nói cách khác, xem trang web của bạn trông như thế nào trên màn hình retina hoặc màn hình tốt hơn).

Những công cụ phát triển

Công cụ Nhà phát triển Firefox tương tự như FireBug và các công cụ có sẵn ở các công cụ khác trình duyệt hiện đại. Với những công cụ này, bạn có thể thực thi và gỡ lỗi JavaScript thông qua bảng điều khiển cũng như thao tác với DOM và CSS trên trang hiện tại.

Để gọi bàn điều khiển, bạn có thể mở Công cụ -> Phát triển web -> Bảng điều khiển web hoặc nhấp chuột phải vào trang, chọn Kiểm tra phần tử và nhấp vào tab Bảng điều khiển.

Ngoại trừ Bảng điều khiển JavaScript có nhiều công cụ khác có sẵn, chẳng hạn như trình chỉnh sửa biểu định kiểu, trình giám sát mạng, trình lược tả JavaScript, trình gỡ lỗi JavaScript, trình kiểm tra trang và nhiều công cụ khác.

Trong ứng dụng được tạo ở chương trước, chúng ta đã sử dụng bảng điều khiển để kiểm tra tiến trình của ứng dụng. nó thật đẹp phương pháp hiệu quả gỡ lỗi ứng dụng của chúng tôi, nhưng một số nhà phát triển vẫn sử dụng cảnh báo() cho mọi thứ Mã JavaScript như một "công cụ gỡ lỗi".

Sử dụng cảnh báo() thực sự không tốt vì nếu nhà phát triển quên xóa cảnh báo() thì người dùng sẽ phải trả tiền cho việc đó. Việc sử dụng bảng điều khiển sẽ tránh được vấn đề này vì tất cả các tin nhắn được hiển thị một cách vô hại (và một cách im lặng!) ở nơi mà người dùng thường không có quyền truy cập. Sử dụng bảng điều khiển cũng có nghĩa là bạn không phải xóa tin nhắn khỏi mã của mình trừ khi bạn thực sự muốn. Điều này có thể giúp duy trì và gỡ lỗi mã nếu có sự cố xảy ra (việc này thường được thực hiện với bất kỳ phần mềm nào!).

Học và sử dụng đúng các công cụ dành cho nhà phát triển có trong Firefox (hoặc bất kỳ trình duyệt nào bạn sử dụng) đều có bước quan trọng trong quá trình làm nhà phát triển giỏi. Đó là lý do tại sao tôi khuyến khích mọi người xem các liên kết ở trên và xem xét kỹ hơn các công cụ khác nhau có sẵn trong Firefox.

Một công cụ đặc biệt khác chưa được đề cập ở trên được gọi là trình gỡ lỗi từ xa. Công cụ này cho phép bạn kết nối với điện thoại của mình dưới Điều khiển Android hoặc Firefox OS và sử dụng các công cụ dành cho nhà phát triển để gỡ lỗi mã chạy trên thiết bị theo thời gian thực.

Bản tóm tắt

Chương này dành riêng cho tổng quan ngắn gọn công cụ dành cho nhà phát triển có trong Firefox. Việc sử dụng các công cụ này giúp quá trình phát triển dễ dàng hơn, đặc biệt khi bạn sử dụng chúng cùng với trình giả lập Firefox OS. Trong chương tiếp theo, chúng ta sẽ tìm hiểu thêm về Trình quản lý ứng dụng và cách sử dụng nó một cách tốt nhất.