Gỡ lỗi và hiệu suất phát triển web bằng AI

🔄 Tóm tắt nhanh: Trong bài học trước, bạn đã xây dựng các tính năng tương tác và kết nối với API — lấy dữ liệu, bộ lọc tìm kiếm và các thành phần có thể truy cập. Bây giờ, hãy làm cho mọi thứ hoạt động ổn định và load nhanh.

Gỡ lỗi với AI

Mẫu prompt gỡ lỗi

Khi gặp lỗi, hãy cung cấp cho AI toàn bộ thông tin:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

Tôi đang gặp lỗi trong JavaScript:

Thông báo lỗi: [lỗi chính xác từ bảng điều khiển]
Vị trí lỗi: [tên file, số dòng nếu có]
Code:
[dán hàm hoặc phần liên quan — không phải toàn bộ file]

Điều tôi mong đợi: [điều đáng lẽ phải xảy ra]
Điều thực tế xảy ra: [điều đang xảy ra]
Những gì tôi đã thử: [bất kỳ cách khắc phục nào bạn đã thử]

Trình duyệt: [Chrome/Firefox/Safari/Edge]
Những thay đổi gần đây: [bạn đã thay đổi gì trước khi lỗi xuất hiện?]

Hãy chẩn đoán vấn đề và cung cấp giải pháp.

✏️ ​​Cách điền thông tin chi tiết: Thay thế mỗi [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào không rõ ràng sẽ tạo ra kết quả không rõ ràng — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Cách xử lý kết quả: Lưu phản hồi vào file Notes. Chọn đề xuất có hiệu quả cao nhất và thực hiện ngay trong tuần này — đừng thử mọi thứ cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các đề xuất có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

✅ Kiểm tra nhanh: Tại sao lại bao gồm "những gì tôi đã thử" trong prompt gỡ lỗi?

Vì nó ngăn AI đề xuất các giải pháp mà bạn đã thử và thất bại. Nếu bạn đã kiểm tra URL API là chính xác, AI có thể bỏ qua bước đó và tìm hiểu sâu hơn — có thể vấn đề là CORS, hoặc định dạng phản hồi đã thay đổi, hoặc có vấn đề về cache. Nó cũng cho AI thấy nơi bạn đã gỡ lỗi sai, điều này thường tiết lộ vấn đề thực sự.

Gỡ lỗi bố cục CSS

Bố cục CSS của tôi không hoạt động như mong đợi:

Mong đợi: [mô tả hoặc phác thảo bố cục bạn muốn]
Thực tế: [mô tả những gì đang xảy ra]

Cấu trúc HTML:
[dán HTML liên quan]

CSS:
[dán CSS liên quan]

Chiều rộng khung nhìn nơi xảy ra lỗi: [điểm ngắt hoặc phạm vi cụ thể]
Trình duyệt: [trình duyệt nào]

Các vấn đề thường gặp cần kiểm tra:
- Căn chỉnh và hành vi xuống dòng của Flexbox
- Kích thước và tràn của Grid track
- Mô hình hộp (liệu padding/border có gây ra chiều rộng không mong muốn?)
- Ngữ cảnh vị trí (phần tử cha có được định vị không?)
- Các vấn đề về ngữ cảnh xếp chồng Z-index

Các vấn đề tương thích đa trình duyệt

Code này hoạt động trong [trình duyệt A] nhưng bị lỗi trong [trình duyệt B]:

Code:
[dán HTML/CSS/JS liên quan]

Hoạt động chính xác trong: [trình duyệt + phiên bản]
Bị lỗi trong: [trình duyệt + phiên bản]
Lỗi ở đâu: [mô tả sự khác biệt cụ thể về hành vi]

Kiểm tra:
1. Thuộc tính CSS cần tiền tố nhà cung cấp
2. API JavaScript không được hỗ trợ trong trình duyệt mục tiêu
3. Sự khác biệt về bố cục CSS giữa các công cụ kết xuất
4. Kiểu mặc định của trình duyệt khác nhau

Tối ưu hóa hiệu suất

Tối ưu hóa hình ảnh

Hình ảnh thường là tài nguyên lớn nhất trên một trang:

Tối ưu hóa hình ảnh trên trang web của tôi để cải thiện hiệu suất:

Thiết lập hiện tại:
- [số lượng] hình ảnh trên trang
- Hình ảnh lớn nhất: [kích thước tính bằng KB/MB]
- Định dạng hình ảnh: [jpg/png/svg]

Tạo:
1. HTML hình ảnh đáp ứng bằng cách sử dụng thuộc tính srcset và sizes
2. Triển khai Lazy loading (loading="lazy" cho hình ảnh bên dưới màn hình)
3. Đề xuất định dạng hình ảnh phù hợp (WebP với các định dạng dự phòng)
4. Thuộc tính chiều rộng và chiều cao để ngăn chặn sự dịch chuyển bố cục (CLS)
5. Chỉ đạo nghệ thuật với phần tử hình ảnh cho các kích thước màn hình khác nhau

Ví dụ hình ảnh cần tối ưu hóa: [mô tả một trong những hình ảnh của bạn]

Hiệu suất JavaScript

Xem xét JavaScript này để tìm các vấn đề về hiệu suất:

[dán code JavaScript của bạn]

Kiểm tra:
1. Truy vấn DOM bên trong vòng lặp (nên lưu trữ tham chiếu)
2. Thiếu debounce/throttle khi xử lý cuộn hoặc thay đổi kích thước
3. Mảng lớn được xử lý đồng bộ (nên chia nhỏ thành các khối?)
4. Trình lắng nghe sự kiện không được dọn dẹp (rò rỉ bộ nhớ)
5. Các thao tác đồng bộ có thể được thực hiện bất đồng bộ
6. Việc render lại hoặc cập nhật DOM không cần thiết

Đối với mỗi vấn đề, hãy hiển thị code hiện tại và phiên bản được tối ưu hóa.

Kiểm tra Core Web Vitals

Kiểm tra hiệu suất Core Web Vitals của trang web HTML/CSS/JS:

[dán HTML của bạn hoặc mô tả cấu trúc trang]

Kiểm tra và tối ưu hóa:

LCP (Largest Contentful Paint — mục tiêu: < 2.5s):
- Hình ảnh chính hoặc phần tử lớn nhất có được load trước không?
- Các tài nguyên gây chặn render có được giảm thiểu không?
- CSS quan trọng có được nhúng hoặc ưu tiên không?

CLS (Cumulative Layout Shift — mục tiêu: < 0.1):
- Tất cả hình ảnh có thuộc tính chiều rộng và chiều cao không?
- Phông chữ có được load với font-display: swap không?
- Các phần tử động (quảng cáo, nội dung nhúng) có được dành riêng không gian không?

INP (Thời gian từ tương tác đến lần hiển thị tiếp theo — mục tiêu: < 200ms):
- Các trình xử lý sự kiện có hiệu quả không?
- JavaScript nặng có được trì hoãn không?
- Các tác vụ dài có được chia nhỏ thành các phần nhỏ hơn không?

Cung cấp các bản sửa lỗi code cụ thể cho từng vấn đề được tìm thấy.

✅ Kiểm tra nhanh: Tại sao hình ảnh phải có thuộc tính chiều rộng và chiều cao rõ ràng?

Bởi vì nếu không có kích thước, trình duyệt không biết hình ảnh cần bao nhiêu không gian cho đến khi nó load xong. Nội dung bên dưới hình ảnh nằm ở trên cùng, sau đó nhảy xuống khi hình ảnh xuất hiện — đó là sự dịch chuyển bố cục (CLS). Việc đặt chiều rộng và chiều cao (kích thước tự nhiên của hình ảnh) cho phép trình duyệt dành riêng không gian chính xác trước khi hình ảnh load. Nội dung giữ nguyên vị trí, hình ảnh lấp đầy không gian được dành riêng và không có gì bị nhảy.

Kiểm tra khả năng truy cập

Kiểm tra trang này về các vấn đề về khả năng truy cập:

[dán code HTML của bạn]

Kiểm tra theo WCAG 2.1 AA:
1. Độ tương phản màu sắc (văn bản trên nền — cần tỷ lệ 4.5:1)
2. Điều hướng bằng bàn phím (mọi phần tử tương tác có thể truy cập và sử dụng được không?)
3. Khả năng tương thích với trình đọc màn hình (các điểm mốc, nhãn, vùng hoạt động)
4. Quản lý tiêu điểm (chỉ báo tiêu điểm hiển thị, thứ tự tab hợp lý)
5. Văn bản thay thế (có ý nghĩa cho hình ảnh thông tin, trống cho hình ảnh trang trí)
6. Khả năng truy cập biểu mẫu (nhãn, thông báo lỗi, chỉ báo bắt buộc)
7. Độ nhạy chuyển động (tôn trọng ưu tiên chuyển động giảm)

Ưu tiên các vấn đề theo mức độ nghiêm trọng: Nghiêm trọng → Quan trọng → Nhỏ.

Bài tập: Gỡ lỗi và tối ưu hóa dự án của bạn

1. Mở dự án của bạn trong Chrome DevTools và kiểm tra Console để tìm lỗi
2. Chạy Lighthouse (Chrome DevTools → tab Lighthouse) và ghi lại điểm số
3. Sử dụng prompt kiểm tra Core Web Vitals trên trang của bạn
4. Thêm lazy loading cho tất cả hình ảnh bên dưới màn hình hiển thị
5. Khắc phục 3 vấn đề hàng đầu mà Lighthouse xác định
6. Chạy lại Lighthouse và so sánh điểm số

Những điểm chính cần ghi nhớ

• Prompt gỡ lỗi hiệu quả bao gồm: lỗi, code, điều bạn mong đợi, điều gì đã xảy ra và những gì bạn đã thử
• Core Web Vitals (LCP, CLS, INP) ảnh hưởng đến cả thứ hạng tìm kiếm và trải nghiệm người dùng — mục tiêu LCP < 2,5s, CLS < 0,1, INP < 200ms
• Lazy loading hình ảnh bên dưới màn hình hiển thị giúp giảm thời gian load ban đầu từ 50-70% trên các trang có nhiều hình ảnh
• Luôn đặt chiều rộng và chiều cao rõ ràng cho hình ảnh để ngăn chặn sự thay đổi bố cục (CLS)
• Lưu trữ các tham chiếu DOM bên ngoài vòng lặp, giảm độ trễ của trình xử lý cuộn/thay đổi kích thước và dọn dẹp sự kiện những trình lắng nghe để ngăn ngừa các vấn đề về hiệu suất và rò rỉ bộ nhớ
• Chạy Lighthouse trước và sau khi tối ưu hóa để đo lường sự cải thiện thực sự