Ưu Đãi Khi Mua Hosting
Mã giảm giá 10% : HOSTING1205
Khi website trắng trang, nút bấm không phản hồi hoặc dữ liệu tải mãi không xong, hãy dùng Chrome DevTools để xác định lỗi nằm ở JavaScript, yêu cầu mạng hay quá trình hiển thị trước khi sửa mã hoặc đổi cấu hình máy chủ. Cách làm hiệu quả là tái hiện đúng thao tác gây lỗi, ghi nhận bằng chứng rồi kiểm tra từng giả thuyết.
Hướng dẫn dưới đây dành cho chủ website và lập trình viên cần tìm nguyên nhân có thể xử lý được. Bạn không cần dùng hết các công cụ; hãy bắt đầu với Console và Network, sau đó mở rộng khi đã có dấu hiệu cụ thể.
Mở trang gặp sự cố, nhấn F12 hoặc Ctrl + Shift + I trên Windows/Linux. Trên macOS, dùng Command + Option + I. Bạn cũng có thể nhấp chuột phải vào trang và chọn Inspect.
Trước khi tải lại trang, ghi rõ URL, trạng thái đăng nhập và thao tác gây lỗi. Ví dụ, “nhấn Lưu sau khi thay địa chỉ giao hàng” hữu ích hơn mô tả “website bị hỏng”. Không ghi mật khẩu hoặc dữ liệu cá nhân vào báo cáo.
Kết quả cần có là một chuỗi thao tác khiến lỗi xuất hiện lặp lại. Nếu chỉ xảy ra với một tài khoản, giữ nguyên điều kiện đó để điều tra quyền truy cập hoặc dữ liệu riêng của tài khoản.
Console hiển thị lỗi JavaScript cùng nhiều thông báo khác. Hãy xóa nhật ký cũ rồi thực hiện lại đúng thao tác gây sự cố. Ưu tiên lỗi xuất hiện ngay tại thời điểm đó, không mặc định mọi dòng màu đỏ đều là nguyên nhân chính.
Ví dụ minh họa giả định: nút mở giỏ hàng không hoạt động và Console báo TypeError: Cannot read properties of undefined. Thông báo cho thấy mã đang đọc thuộc tính của một giá trị chưa tồn tại, nhưng chưa đủ để kết luận dữ liệu thiếu từ đâu.
Nhấp vào tên tệp và số dòng, xem ngăn xếp lời gọi để tìm hàm xử lý liên quan. Nếu bản triển khai có source map phù hợp, DevTools có thể hiển thị mã nguồn dễ đọc hơn thay vì chỉ mã đã rút gọn.
Trong Sources, bật chế độ tạm dừng khi có ngoại lệ rồi tái hiện lỗi. Khi chương trình dừng, kiểm tra biến trong Scope và đường đi trong Call Stack. Với lỗi chỉ xuất hiện khi nhấn nút, có thể đặt breakpoint tại hàm xử lý sự kiện.
Không vội thêm điều kiện bỏ qua giá trị rỗng để làm mất thông báo. Cần xác định dữ liệu thực sự được phép thiếu hay một yêu cầu trước đó đã thất bại. Tuyệt đối không dán mã lạ vào Console, nhất là trên trang quản trị đang đăng nhập.
Nếu trang không có dữ liệu, không lưu được biểu mẫu hoặc tải thiếu tài nguyên, Network thường cung cấp bằng chứng rõ hơn giao diện. Chọn bộ lọc Fetch/XHR cho các yêu cầu dữ liệu, hoặc xem JS, CSS và Img khi tài nguyên tương ứng bị thiếu.
Nhấp vào yêu cầu đáng nghi và đọc các phần sau:
Mã 401 thường liên quan đến thiếu hoặc không hợp lệ thông tin xác thực; 403 cho biết máy chủ từ chối truy cập. Với 404, kiểm tra đường dẫn và tuyến xử lý. Lỗi 5xx cần đối chiếu nhật ký máy chủ, vì DevTools không thể tự chỉ ra dòng mã backend gây lỗi.
Phản hồi 200 chưa có nghĩa chức năng thành công. Ví dụ giả định, yêu cầu lấy danh sách đơn hàng trả về HTML của trang đăng nhập thay vì JSON. Giao diện sau đó có thể báo lỗi phân tích dữ liệu. Hãy kiểm tra nội dung phản hồi và chuỗi chuyển hướng thay vì chỉ nhìn mã trạng thái.
Nếu Console báo CORS, hãy xem thông báo cụ thể và yêu cầu kiểm tra trước nếu có. Không vô hiệu hóa bảo mật trình duyệt để coi đó là cách sửa; cấu hình cho phép truy cập phải được xử lý ở phía máy chủ phù hợp.
Khi nút bị che, chữ tràn hoặc bố cục lệch, dùng công cụ chọn phần tử trong Elements. Xem Styles để biết quy tắc CSS nào đang áp dụng hoặc bị ghi đè; xem Computed để đọc giá trị cuối cùng và mô hình hộp của phần tử.
Bạn có thể tắt thử một thuộc tính như overflow hoặc điều chỉnh kích thước để kiểm chứng giả thuyết. Thay đổi này thường chỉ tồn tại trong phiên kiểm tra, không tự cập nhật mã nguồn trên máy chủ. Sau khi tìm được nguyên nhân, sửa trong dự án và triển khai lại.
Nếu trang đã tải nhưng gõ chữ hoặc mở menu vẫn chậm, ghi một phiên ngắn trong Performance bao quanh thao tác đó. Tìm đoạn luồng chính bận lâu và xem công việc liên quan đến JavaScript, tính toán bố cục hoặc vẽ giao diện.
Nếu thời gian chủ yếu nằm ở chờ phản hồi mạng, tiếp tục kiểm tra Network và phía máy chủ. Nếu yêu cầu đã hoàn tất nhưng giao diện còn khựng, ưu tiên điều tra xử lý phía trình duyệt. Không dùng một lần đo trên máy cá nhân để khẳng định hiệu năng cho mọi người dùng.
Sau khi sửa, chạy lại đúng kịch bản ban đầu với cùng loại tài khoản và dữ liệu kiểm thử. Kiểm tra đồng thời kết quả trên giao diện, phản hồi Network và lỗi Console liên quan. Với chức năng lưu dữ liệu, tải lại trang để xác nhận dữ liệu đã được lưu, không chỉ thay đổi tạm trên màn hình.
Không. Sai logic, phản hồi sai dữ liệu hoặc CSS che phần tử có thể không tạo lỗi JavaScript. Hãy đối chiếu hành vi mong muốn với Network và Elements.
Dùng chế độ mô phỏng thiết bị để kiểm tra kích thước màn hình và thao tác cơ bản. Tuy nhiên, mô phỏng không thay thế hoàn toàn thiết bị thật. Nếu lỗi không tái hiện, cần kiểm tra trên thiết bị gặp vấn đề, có thể dùng gỡ lỗi từ xa khi môi trường hỗ trợ.
DevTools cho biết trình duyệt gửi gì, nhận gì và mất bao lâu. Muốn xác định nguyên nhân bên trong máy chủ, cần đối chiếu log ứng dụng bằng thời điểm và mã yêu cầu nếu hệ thống có cung cấp.
Hãy lập một phiếu gồm URL, môi trường, thao tác tái hiện, kết quả mong muốn, kết quả thực tế và bằng chứng đã che dữ liệu nhạy cảm. Ghi thêm giả thuyết đang kiểm tra cùng tiêu chí xác nhận, chẳng hạn yêu cầu trả đúng dữ liệu và giao diện hiển thị được sau khi tải lại. Đây là đầu vào cụ thể để bạn tự sửa hoặc chuyển cho lập trình viên mà không phải điều tra lại từ đầu.
