Nếu bạn nhìn vào công cụ kiểm tra của Chrome (Chrome inspection tool) mà không có bất kỳ kiến thức nào về cách hoạt động của nó, tất cả những gì bạn thấy có thể chỉ là một mớ mã và các bảng điều khiển phức tạp. Bạn có thể nghĩ rằng nó chỉ có ý nghĩa đối với một lập trình viên, và ở một mức độ nào đó, bạn đúng. Tuy nhiên, bài viết này sẽ chỉ cho bạn thấy công cụ mạnh mẽ này có thể mang lại lợi ích như thế nào, ngay cả khi bạn chưa từng viết một dòng mã nào trong đời. Google Chrome DevTools là một bộ công cụ tích hợp sẵn giúp người dùng kiểm tra, chỉnh sửa tạm thời và gỡ lỗi trang web ngay trên trình duyệt, mở ra nhiều khả năng ứng dụng thực tiễn mà không yêu cầu chuyên môn sâu về lập trình.
Tìm kiếm liên kết, phương tiện và tài nguyên khác
Bạn muốn tìm các liên kết ẩn, hình ảnh và tệp âm thanh trên các trang web? Công cụ kiểm tra của Chrome có thể giúp bạn. Điều này đặc biệt hữu ích khi bạn muốn tải xuống hình ảnh hoặc video mà không thể nhấp chuột phải để lưu, hoặc muốn tìm nguồn gốc của nội dung nhúng. Các liên kết thường nằm trong các thẻ chứa chữ “a,” hình ảnh trong thẻ “img,” và video trong thẻ “video.” Bạn có thể dễ dàng nhìn thấy tất cả chúng trong bảng “Elements” của công cụ.
Giao diện tab Elements trong công cụ kiểm tra Chrome
Bạn không cần phải là một lập trình viên để sử dụng công cụ kiểm tra của Chrome, nhưng việc có kiến thức cơ bản về HTML sẽ rất có lợi. HTML (HyperText Markup Language) là một ngôn ngữ đơn giản được sử dụng để xây dựng các trang web bằng cách sử dụng các thẻ (tags). Việc tìm hiểu những kiến thức cơ bản này chỉ mất vài phút.
Để sử dụng công cụ kiểm tra, bạn chỉ cần nhấp chuột phải vào bất kỳ phần tử nào trên trang web, chẳng hạn như văn bản, hình ảnh hoặc liên kết, sau đó chọn “Inspect” (Kiểm tra) trong menu xuất hiện. Bạn cũng có thể nhấn tổ hợp phím Ctrl+Shift+C (đối với Windows) hoặc Cmd+Shift+C (đối với Mac) để mở công cụ Chrome DevTools. Sau đó, nhấn Ctrl+F (Windows) hoặc Cmd+F (Mac) để tìm kiếm các phần tử cụ thể trên trang.
Mở công cụ kiểm tra Chrome từ menu chuột phải
Tùy chỉnh giao diện trang web tạm thời
Bạn cũng có thể tạm thời tùy chỉnh giao diện của một trang web bằng công cụ kiểm tra của Chrome. Những thay đổi bạn thực hiện sẽ chỉ mang tính tạm thời, vì trình kiểm tra hoạt động trong một môi trường cô lập (thường được gọi là “sandbox”). Điều này có nghĩa là những gì bạn làm sẽ không ảnh hưởng đến trang web chính, do đó bạn không cần lo lắng về việc làm hỏng bất cứ điều gì.
Có nhiều trường hợp sử dụng mà những thay đổi nhỏ có thể cải thiện trải nghiệm người dùng của bạn. Chẳng hạn, nếu phông chữ quá nhỏ, bạn có thể thay đổi kích thước. Bạn thậm chí có thể đổi màu nền sang một tông tối hơn trong điều kiện thiếu sáng. Nếu một banner quảng cáo đang làm phiền bạn, bạn có thể vô hiệu hóa nó.
Đối với phần này, bạn cần biết kiến thức CSS (Cascading Style Sheets) cơ bản – một ngôn ngữ đơn giản khác dùng để mô tả cách các phần tử của một trang web nên được hiển thị. Một lần nữa, bạn không cần phải là một lập trình viên chuyên nghiệp. Phần giới thiệu hữu ích về CSS này của Mozilla có thể giúp bạn làm quen với các khái niệm cốt lõi của nó chỉ trong 15 phút.
Hãy xem xét vấn đề về banner quảng cáo gây mất tập trung. Nếu muốn loại bỏ nó, bạn có thể kiểm tra phần tử đó trên trang web và đặt dòng mã sau vào bảng “Styles” của nó:
display: none;Vì công cụ kiểm tra thường xuất hiện ở phía bên phải của cửa sổ trình duyệt theo mặc định, bảng “Styles” thường sẽ nằm bên dưới.
Bảng Styles của công cụ kiểm tra Chrome
Việc này rất trực quan, không yêu cầu chuyên môn về mã hóa, và bạn có thể dễ dàng sử dụng một bảng tổng hợp CSS (CSS cheat sheet) hoặc công cụ AI để thực hiện các thay đổi mình cần. Hơn nữa, công cụ này còn cung cấp tính năng tô màu cú pháp và tự động hoàn thành, giúp đảm bảo bạn viết mã hoạt động chính xác.
Khám phá nội dung ẩn
Giống như bạn có thể ẩn nội dung trên một trang web, bạn cũng có thể tiết lộ nó khi nó đã bị ẩn đi. Đó có thể là các liên kết, phương tiện hoặc nội dung khác. Việc này hữu ích nếu, ví dụ, bạn muốn xem một đoạn trích bài viết bị ẩn sau tường phí (paywall) hoặc kích hoạt các tính năng ẩn như nút và trường biểu mẫu để xem chúng hoạt động như thế nào.
Dưới đây là các ví dụ về mã mà bạn có thể tìm và xóa trong bảng Styles để xem nội dung ẩn:
display: none;
visibility: hidden;
opacity: 0;Một số nội dung có thể bị ẩn bằng JavaScript, điều này sẽ khó sửa đổi hơn một chút nếu bạn không phải là lập trình viên. Nhưng đó là một chủ đề để bàn vào một dịp khác.
Chẩn đoán sự cố website
Nếu một trang web chậm, đôi khi rất khó để chẩn đoán vấn đề. Bạn có thể sử dụng công cụ kiểm tra của Chrome để tìm hiểu xem lỗi nằm ở trang web hay mạng của bạn.
Để làm điều đó, hãy mở công cụ kiểm tra của Chrome và chọn tab “Network” (Mạng). Bạn có thể cần mở rộng bảng điều khiển nếu nó không hiển thị để thấy các tab khác. Tại đây, bạn sẽ thấy mọi thứ mà trang tải, bao gồm HTML, CSS, script và các tệp phương tiện.
Tab Network trong công cụ kiểm tra Chrome để tải nhật ký mạng
Hãy tìm bất kỳ mục nào được đánh dấu màu đỏ và kiểm tra cột “Status” (Trạng thái) để tìm mã lỗi (ví dụ: 404 hoặc 500). Sau đó, bạn có thể liên hệ với quản trị viên trang web và báo cáo lỗi cùng các mục bị ảnh hưởng.
Ngoài ra, bạn có thể xuất nhật ký mạng bằng cách nhấp vào biểu tượng tải xuống trong menu bên dưới các tab. Sau đó, bạn có thể gửi nó cho quản trị viên để họ có thể khắc phục sự cố và giúp trang web hoạt động bình thường trở lại cho bạn.
Tải xuống nhật ký mạng từ công cụ kiểm tra Chrome
Nếu hóa ra vấn đề là do mạng của bạn, bạn cần tự khắc phục điều đó. Nếu kết nối chậm, bạn có thể thực hiện các bước để tăng tốc độ kết nối internet của mình.
Học hỏi phát triển web
Nếu bạn đang trên hành trình trở thành một nhà phát triển web, công cụ kiểm tra của Chrome là một công cụ tuyệt vời để học hỏi. Quan trọng nhất, nó có thể dạy bạn cách các trang web được cấu trúc.
Chẳng hạn, tab “Elements” tiết lộ cấu trúc HTML của trang web. Nó có thể cho thấy cách các thẻ phổ biến như “div,” “p,” hoặc “a,” cũng như CSS, được sử dụng để xây dựng các bố cục tuyệt đẹp.
Ngoài ra, như đã đề cập ở trên, công cụ kiểm tra cho phép bạn thực hiện các thay đổi tạm thời đối với HTML, CSS và bố cục của một trang web. Điều này cung cấp một môi trường thực hành tốt, đặc biệt là trên các trang web lớn với mã phức tạp. Thử nghiệm trong môi trường này là một cách tốt để xem các chỉnh sửa của bạn hoạt động như thế nào trong thời gian thực và củng cố những gì bạn đã học.
Công cụ kiểm tra của Chrome có thể gây khó khăn, đặc biệt đối với những người không thể lập trình. Nhưng bạn không cần phải là một lập trình viên chuyên nghiệp để sử dụng nó. Và nếu bạn sẵn sàng bỏ một chút công sức để hiểu HTML và CSS cơ bản, nó có thể trở thành một công cụ vô giá để cải thiện trải nghiệm duyệt web của bạn. Hãy bắt đầu khám phá và tận dụng sức mạnh của Chrome DevTools ngay hôm nay để làm chủ trình duyệt của bạn một cách hiệu quả nhất!
