Bạn đã bao giờ muốn chỉnh sửa tạm thời một trang web để xem nó trông như thế nào với màu sắc, phông chữ, kiểu dáng cụ thể, vv Có thể với một công cụ đã có trong trình duyệt của bạn có tên Inspect Element. Đây là một giấc mơ trở thành sự thật cho tất cả người dùng DIY khi họ tìm hiểu về nó. Trong bài này, chúng tôi sẽ giới thiệu cho bạn các nguyên tắc cơ bản của kiểm tra phần tử và cách sử dụng nó với trang WordPress của bạn.
Inspect Element hoặc Công cụ Nhà phát triển là gì?
Các trình duyệt web hiện đại như Google Chrome và Mozilla Firefox đã tích hợp sẵn các công cụ cho phép các nhà phát triển web gỡ lỗi. Các công cụ này hiển thị mã HTML, CSS và JavaScript cho trang và cách trình duyệt thực hiện mã.
Sử dụng công cụ Kiểm tra phần tử, bạn có thể chỉnh sửa mã HTML, CSS hoặc JavaSCript cho bất kỳ trang web nào và xem các thay đổi của bạn trực tiếp (chỉ trên máy tính của bạn).
Đối với chủ sở hữu trang web DIY, những công cụ này có thể giúp bạn xem trước cách thiết kế trang web sẽ trông mà không thực sự thực hiện thay đổi cho mọi người.
Đối với các nhà văn, những công cụ này là tuyệt vời bởi vì bạn có thể dễ dàng thay đổi thông tin nhận dạng cá nhân khi chụp màn hình của bạn loại bỏ sự cần thiết để blur ra các mục hoàn toàn.
Đối với các đại lý hỗ trợ, đó là một cách tuyệt vời để xác định lỗi có thể khiến các phòng trưng bày của bạn không tải hoặc thanh trượt của bạn không hoạt động đúng.
Chúng tôi chỉ scratching bề mặt của trường hợp sử dụng. Thanh tra yếu tố thực sự mạnh mẽ.
Trong bài này, chúng tôi sẽ tập trung vào Inspect Element trong Google Chrome vì đó là trình duyệt của chúng tôi lựa chọn. Firefox có các công cụ phát triển riêng của nó cũng có thể được gọi bằng cách chọn kiểm tra phần tử từ trình đơn của trình duyệt.
Sẳn sàng? Băt đâu nao.
Ra mắt Thành phần Kiểm tra và Xác định Mã
Bạn có thể khởi chạy công cụ kiểm tra phần tử bằng cách nhấn phím CTRL + Shift + I trên bàn phím. Ngoài ra, bạn có thể nhấp vào bất cứ nơi nào trên trang web và chọn kiểm tra phần tử từ trình đơn của trình duyệt.
Cửa sổ trình duyệt của bạn sẽ chia thành hai, và cửa sổ bên dưới sẽ hiển thị mã nguồn của trang web.
Cửa sổ công cụ dành cho nhà phát triển được chia thành hai cửa sổ. Ở bên trái, bạn sẽ thấy mã HTML của trang. Trên khung bên phải, bạn sẽ thấy các quy tắc CSS.
Khi bạn di chuyển chuột qua mã nguồn HTML, bạn sẽ thấy khu vực bị ảnh hưởng được đánh dấu trên trang web. Bạn cũng sẽ nhận thấy các quy tắc CSS thay đổi để hiển thị CSS cho phần tử bạn đang xem.
Bạn cũng có thể đưa con trỏ chuột đến một phần tử trên trang web, nhấp chuột phải và chọn kiểm tra phần tử. Phần tử bạn chỉ ra sẽ được đánh dấu trong mã nguồn.
Chỉnh sửa và gỡ lỗi mã trong Kiểm tra phần tử
Cả HTML và CSS trong cửa sổ phần tử kiểm tra đều có thể chỉnh sửa được. Bạn có thể nhấp đúp vào bất cứ nơi nào trong mã nguồn HTML và chỉnh sửa mã theo ý muốn.
Bạn cũng có thể nhấp đúp chuột và chỉnh sửa bất kỳ thuộc tính và phong cách nào trong ngăn CSS. Để thêm một quy tắc kiểu tùy chỉnh, hãy nhấp vào biểu tượng + ở đầu ô CSS.
Khi bạn thay đổi CSS hoặc HTML những thay đổi đó sẽ được phản ánh ngay trong trình duyệt.
Lưu ý, bất kỳ thay đổi nào bạn thực hiện ở đây không được lưu ở bất cứ đâu. Kiểm tra phần tử là một công cụ gỡ lỗi, và nó không ghi lại các thay đổi của bạn trở lại các tập tin trên máy chủ của bạn. Điều này có nghĩa là nếu bạn làm mới trang, tất cả thay đổi của bạn sẽ biến mất.
Để thực sự thực hiện các thay đổi, bạn sẽ phải chỉnh sửa biểu mẫu kiểu chủ đề WordPress hoặc mẫu liên quan để thêm các thay đổi bạn muốn lưu.
Trước khi bạn bắt đầu chỉnh sửa chủ đề WordPress hiện tại bằng công cụ Kiểm tra phần tử, đảm bảo rằng bạn lưu tất cả thay đổi của mình bằng cách tạo một chủ đề con.
Dễ dàng tìm lỗi trên trang web của bạn
Kiểm tra phần tử có một khu vực được gọi là Bảng điều khiển hiển thị tất cả các lỗi tồn tại trên trang web của bạn. Khi cố gắng gỡ lỗi một lỗi hoặc yêu cầu hỗ trợ từ các tác giả plugin, bạn nên xem xét ở đây để xem lỗi là gì.
Ví dụ: nếu bạn là khách hàng của OptinMonster đang tự hỏi lý do tại sao Optin của bạn không tải, thì bạn có thể dễ dàng tìm ra vấn đề “trang slug của bạn không khớp”.
Nếu thanh công cụ của bạn không hoạt động đúng, thì bạn có thể thấy lỗi JavaScript.
Các công cụ như Bảng điều khiển Thành phần Kiểm tra và Hỗ trợ Hỗ trợ giúp bạn nhận được hỗ trợ khách hàng tốt hơn vì nhóm hỗ trợ kỹ thuật yêu khách hàng chủ động trong việc cung cấp phản hồi chi tiết về vấn đề này.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cơ bản về kiểm tra phần tử và cách sử dụng nó với trang WordPres của bạn. Bạn cũng có thể muốn đi xem một mặc định WordPress tạo CSS cheat sheet để tăng tốc độ kỹ năng phát triển chủ đề của bạn.