Hướng dẫn về Công cụ web của Google

Feb 2, 2026

Cách

Trang 1/5:

Xem và thay đổi HTML, CSS & AMP; Js.

Xem và thay đổi HTML, CSS & AMP; Js.
Sử dụng trình gỡ lỗi
Làm việc với chế độ thiết bị
Bắt đầu với thiết kế vật liệu
Gặp gỡ với các ứng dụng web tiến bộ

Big G, hay còn gọi là Google, cung cấp cho các nhà phát triển một lượng công cụ nhằm mục đích thiết kế web dễ dàng. Trong bài viết này, chúng tôi trải qua một số công cụ tốt nhất của Google ngoài kia và chỉ cho bạn cách sử dụng chúng trong quy trình thiết kế web và quy trình phát triển web của bạn.

Chúng tôi đang bao gồm một loạt các khác nhau Công cụ thiết kế web Ở đây, vì vậy chúng tôi đã chia nội dung thành các trang để dễ dàng điều hướng hơn. Sử dụng menu thả xuống ở trên để chuyển đến phần bạn quan tâm. Bạn muốn thiết kế một trang web bằng cách sử dụng một nhà cung cấp khác? Hướng dẫn của chúng tôi đến web hosting và hàng đầu người tạo ra trang web Bạn đã bảo hiểm.

Miễn là các trang web không bị nén, nội dung của họ có thể được xem bởi bất kỳ ai. Devtools của Chrome làm cho đơn giản này - trên trang này, chúng tôi chỉ cho bạn cách xem và thay đổi HTML, CSS và JavaScript. Trên trang 2 , Chúng tôi xem xét kỹ hơn cách sử dụng trình gỡ lỗi của Google để sửa lỗi mã hóa nhanh chóng và dễ dàng. Trang 3. Đặt điểm nổi bật trên chế độ thiết bị của Google, bạn có thể sử dụng để kiểm tra các phiên bản di động của các trang của mình thông qua máy tính để bàn của bạn. Trên Trang 4. Chúng tôi giới thiệu những điều cơ bản bạn cần lưu ý để bắt đầu thực hiện các nguyên tắc thiết kế vật liệu trong thiết kế của bạn. Cuối cùng, trang 5 Nhìn vào các ứng dụng web tiến bộ, điều lớn mới nhất trong ngành công nghiệp thiết kế web.

Xem và thay đổi HTML, CSS & AMP; Js.

Miễn là mã của một trang web đã không được thu gom, nó có thể được xem bởi bất kỳ ai sử dụng các công cụ dành cho nhà phát triển của Chrome. Trước hết, hãy kiểm tra phiên bản Chrome - các bước sau hoạt động trên phiên bản 70.0.3538.67 chạy trên máy trạm Ubuntu 64 bit. Tiếp theo, mở menu Hamburger và nhấp vào Thêm công cụ & GT; Những công cụ phát triển.

Launch Google's Developer Tools — Khởi chạy các công cụ dành cho nhà phát triển và bạn sẽ thấy một màn hình tương tự như [Nhấp vào biểu tượng ở trên cùng bên phải để phóng to]

Trình duyệt phản ứng bằng cách mở một ngăn ở phía bên trái màn hình của bạn. Nó nên được thay đổi kích thước trong bước đầu tiên - theo mặc định, trình duyệt không chỉ định đủ bất động sản màn hình. Khi hoàn tất, màn hình trông tương tự như trong hình dạng trong hình trên.

Theo mặc định, các công cụ dành cho nhà phát triển khởi động với tab Console được tải. Nó chứa đầu ra phát ra bởi các yêu cầu của hàm ghi nhật ký bảng điều khiển. Các lỗi kết xuất cũng hiển thị ở đó - nếu bạn tìm thấy các đường màu đỏ, một cái gì đó là amiss trong đánh dấu hoặc mã của trang của bạn. Nhấp chuột vào 'URL' nhỏ ở phía bên phải sẽ đưa bạn đến dòng, khiến thông báo xuất hiện.

Kiểm tra đánh dấu

Nếu quan tâm của bạn tập trung vào đánh dấu, hãy sử dụng tab Các phần tử được hiển thị trong hình. Nó cho thấy đánh dấu trình duyệt hiện đang kết xuất. Bạn có thể mở rộng và thu gọn nó theo kiểu tương tự như chế độ xem cây - ẩn các yếu tố không cần thiết để ngăn chặn quá tải cảm giác.

Các Raison d'ete. của tab là hiển thị cấu trúc CSS. Các widget 'thu thập' css từ nhiều nguồn khác nhau, được hiển thị gọn gàng và bên cạnh nhau. Trong trường hợp ví dụ được hiển thị trong hình, chúng ta thấy rằng các kiểu được cung cấp từ cả thẻ 'div' và đánh dấu 'chính' của trang.

Chrome cho phép bạn chỉnh sửa hầu hết các thuộc tính trên bay. Bấm đúp vào bất kỳ văn bản màu đen nào để chuyển đổi nhãn thành trình soạn thảo, sau đó nhập giá trị mới mong muốn và nhấn phím RETURN. Trình kết xuất chọn những thay đổi này và áp dụng chúng vào DOM đang bay. Điều này đặc biệt hữu ích khi cố gắng tối ưu hóa các vấn đề màu sắc hoặc vị trí; Phải tải lại một trang để xem trước những thay đổi trở nên mệt mỏi.

Google's web tools — Nền màu vàng cho biết nội dung của cửa sổ có thể lọc [Nhấp vào biểu tượng ở trên cùng bên phải để phóng to]

Cuối cùng, hãy nhìn vào hộp văn bản trên đỉnh của khung. Nó cho phép bạn lọc các mục đánh dấu được hiển thị: Ví dụ: nhập 'MDC' để giới hạn chế độ xem cho tất cả các kiểu được kế thừa từ thư viện thiết kế vật liệu được sử dụng sau này trong bài viết này. Khi một bộ lọc đang hoạt động, một nền màu vàng hiển thị trong một thời trang tương tự như hình trên.

Thực hiện một phân tích chi tiết

Trong các trình duyệt web hiện đại, DOM không giới hạn trong các vấn đề trình bày 'thống kê'. Nó cũng chi phối dòng chảy sự kiện và vị trí. Chuyển sang tab được tính toán để hiển thị danh sách các thuộc tính 'chiều'. Điều này cực kỳ hữu ích khi sắp xếp các widget trên màn hình theo một cách chính xác.

Chuyển sang tab Người nghe sự kiện cung cấp tổng quan về các luồng sự kiện. Sử dụng tính năng này để nhanh chóng loại bỏ các sự cố liên quan đến tương tác của người dùng: Nếu một sự kiện không kích hoạt, hãy bắt đầu bằng cách kiểm tra các kết nối xử lý sự kiện.

Cuối cùng, cửa sổ thuộc tính cho phép bạn xem các thuộc tính được lưu trữ bên trong các nút DOM riêng lẻ. Nếu bạn đã từng dành nhiều thời gian để săn lùng mã thao tác DOM, giá trị là rõ ràng.

Trang tiếp theo: Cách sử dụng trình gỡ lỗi của Google

Trang hiện tại: Xem và thay đổi HTML, CSS & AMP; Js.

Trang tiếp theo Sử dụng trình gỡ lỗi

Hướng dẫn về Công cụ web của Google

Xem và thay đổi HTML, CSS & AMP; Js.

Kiểm tra đánh dấu

Thực hiện một phân tích chi tiết

Cách - Các bài báo phổ biến nhất

Sử dụng Brain.js để xây dựng mạng lưới thần kinh

Cách xây dựng một ứng dụng web tiến bộ

Tạo một thành phần băng chuyền linh hoạt

mô hình một sinh vật cướp biển ngoài hành tinh trong Zbrush

Tạo một nhân vật với tư thế mạnh trong Photoshop

Tăng sức mạnh cho thực đơn của bạn bằng cách sử dụng hoạt hình với CSS

Cách thiết kế bìa sách hoàn hảo

Cách hoàn hảo tóc trong chân dung của bạn

Thể loại