Lỗi sửa code nhưng vẫn hiện trên web năm 2024
Công cụ Inspect Element (Kiểm tra phần tử) rất hữu ích khi gỡ lỗi các trang web của bạn trong thời gian thực. Bạn có thể sử dụng công cụ này để giúp xem trước và thay đổi thiết kế của một trang web. Nó cũng cho phép bạn làm như vậy mà không cần tải lại trang, hiển thị các thay đổi CSS của bạn ngay lập tức. Show
Bài viết này sẽ trình bày về cách xem các lớp CSS và các style áp dụng của chúng trong cửa sổ Inspect Element. Nó cũng sẽ trình bày cách bạn có thể sử dụng điều này để xem trước các thay đổi bạn thực hiện đối với CSS của mình trong thời gian thực. Mở Inspect Element trong Google ChromeBạn có thể truy cập bất kỳ trang web nào và mở cửa sổ Inspect Element để xem mã HTML hoặc CSS của nó trông như thế nào. Hướng dẫn này sẽ sử dụng một trang web mẫu để minh họa. Bạn có thể mở cửa sổ Inspect Element trong Google Chrome bằng cách nhấn phím F12. Bạn cũng có thể nhấp chuột phải vào bất kỳ đâu trên trang và nhấp vào Inspect (Kiểm tra). Cửa sổ Inspect Element sẽ mở ra mã HTML cho một phần của trang web nơi bạn nhấp chuột phải. Tab Style trong Cửa sổ Inspect ElementTrong chính cửa sổ Inspect Element, bên dưới tab Elements (Thành phần), có một nơi để xem cả mã HTML và CSS. Bạn có thể thấy mã HTML ở bên trái của cửa sổ Inspect Element. Bạn có thể tìm thấy mã CSS ở bên phải, trong tab Style. Giả sử bạn có một phần tử HTML với một lớp được gọi là “card-padding”, với padding phải và trái được áp dụng cho nó:
Nếu bạn xem trước trang web này trong trình duyệt, bạn sẽ có thể chọn phần tử div có lớp “card-padding”. Mọi style được áp dụng cho lớp “card-padding” sẽ hiển thị ở bên phải, trong tab Style. Khi bạn di chuột qua một phần tử trong chế độ xem mã HTML, phần đó của trang web sẽ đánh dấu trong trình duyệt web. Loại phần tử HTML, cùng với bất kỳ tên lớp nào cũng sẽ hiển thị trong hộp thoại bên cạnh phần tử. Trong trường hợp này, bạn sẽ thấy vùng chứa div với các tên lớp “row”, “card-padding” và “pb-5” được đánh dấu trên trang. Cách thực hiện thay đổi đối với CSS trong thời gian thựcBạn có thể thay đổi CSS trực tiếp từ tab Style:
Cách sửa đổi CSS từ thư viện hoặc khung của bên thứ baBạn cũng có thể thực hiện các thay đổi đối với các phần tử HTML nếu bạn đang sử dụng các thư viện hoặc khuôn khổ của bên thứ ba như Bootstrap.
element.style có nghĩa là gì trong tab Style?Mỗi phần tử HTML mà bạn đánh dấu trong cửa sổ Inspect Element có một khối element.styles. Điều này tương đương với việc thêm inline styling vào phần tử HTML, thay vì nhắm mục tiêu nó bằng selector.
Cách các phần tử HTML con kế thừa stylingNếu bạn có hai giá trị style khác nhau được áp dụng cho phần tử cha và phần tử con, thì giá trị trong phần tử con sẽ được ưu tiên.
Lợi ích của việc gỡ lỗi CSS trong trình duyệtGỡ lỗi CSS trong trình duyệt có thể tiết kiệm rất nhiều thời gian và tăng tốc quy trình viết code. Điều này đặc biệt đúng nếu bạn cần xem các thay đổi CSS mới của mình tác động như thế nào đến giao diện người dùng trên trang web trong thời gian thực. Bạn có thể sử dụng kỹ thuật này thay vì thực hiện các thay đổi đối với code cục bộ và tải lại ứng dụng của mình. Điều này sẽ giúp bạn không phải đoán những giá trị CSS nào sẽ hoạt động, vì bây giờ bạn có thể xem các thay đổi giao diện người dùng ngay khi bạn thực hiện chúng. Bạn có thể thực hiện các thay đổi đối với cửa sổ Inspect Element cho đến khi bạn gần đạt được thiết kế mong muốn của mình. Sau đó, bạn có thể sao chép mã từ cửa sổ Inspect Element, trở lại mã cục bộ của bạn. Bạn vẫn có thể chạy lại ứng dụng của mình để kiểm tra xem các thay đổi CSS mới của bạn vẫn hoạt động. Hướng dẫn này bao gồm những kiến thức cơ bản về cách gỡ lỗi CSS của một trang web bằng cửa sổ Inspect Element, bao gồm cả vị trí tìm CSS trong tab Style. Nó cũng bao gồm cách thực hiện các thay đổi đối với CSS và xem các thay đổi trực quan đối với giao diện người dùng trong thời gian thực. Nếu có bất kỳ câu hỏi nào, hãy để lại dưới phần Bình luận để được giải đáp nhé. |